css, enews extended, mobile

[newedgemarketing]

I have just added an enews extended signup form to my footer. with email field and button on the same line.

However on mobile or when the screen size gets beyond a certain width the button starts getting cut off as shown in the images,

This is the css I am using:
/* Genesis eNews Extended
--------------------------------------------- */

.enews-widget input {
width: 60%;
}

.enews-widget input[type="submit"] {
width: 30%;
}

IMAGES:
On desktop:
http://www.newedgemarketing.com.au/wp-content/uploads/2015/05/Screen-Shot-2015-05-09-at-1.24.03-pm.png

On reduced desktop screen: (The button is small on the right hand side)
http://www.newedgemarketing.com.au/wp-content/uploads/2015/05/mobile.png

On mobile (IOS Iphone 5)
http://www.newedgemarketing.com.au/wp-content/uploads/2015/05/IMG_7720.png

Anyone know what i can do to fix this error on mobile?

http://www.newedgemarketing.com.au/wp-content/uploads/2015/05/IMG_7720.png

[Christoph]

Hi,

you can adjust the width in the media queries. Find the media query closest to when the button is not showing right anymore.
I would suggest to move the button underneath the form on smaller screen sizes.
(give both a width of 100%).

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[newedgemarketing]

Sounds perfect I'd love to do that but have no idea how, any ideas Christoph?

[Christoph]

You can try adding the changed widths after line 1686 of the style.css

@media only screen and (max-width: 767px) {

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[newedgemarketing]

Thanks Christoph it all sounds a bit out of my comfort zone i think I'll live with it for now.

[Author]

Posts