News Theme – Firefox Issue

[timmarchant]

Hi

I have been having a problem with the News theme (awesome theme). In Firefox when the responsive view switches in i.e. when the @media only screen and (max-width: 960px) rule is applied the text in the #content div flows off the right side of the page and is hidden from view. The theme works fine in IE/Safari/Chrome, only FIrefox seems to be effected.

I have, I think, got a fix for this using Firefox specific CSS. I have appended the following rule to the foot of style.css and it seems to work.

@-moz-document url-prefix() {

@media only screen and (max-width: 960px) {
#content {max-width:93%}
}
}

This is the first time I have ever had to use FF specific CSS, so I am a bit worried that I am going to hit some snag with this approach.

http://felixstowechamber.co.uk/

[AnitaC]

I viewed in my Firefox. Use this responsive tool - http://cre8tivediva.com/responsive/. Add your url and hit enter. Do you see it out of sorts in the test windows in Firefox?

---

Need help with customization or troubleshooting? Reach out to me.

[AnitaC]

This is how I would fix this. Change 35px to 25 and it will balance the left and right padding.

#content {
float: left;
padding: 25px 35px;
width: 430px;
}

---

Need help with customization or troubleshooting? Reach out to me.

[timmarchant]

Thanks, but no, that doesn't work and it changes the layout (makes it wrong) in other browsers.

Nice tool for showing clients responsive views, I just teach them to use Ctrl Shift M like I do.

Tim

[AnitaC]

Thanks for sharing your method. I never new that existed. As for the coding, responsive is just that trial and error type of thing. Hope that fix works for the long haul for you.

---

Need help with customization or troubleshooting? Reach out to me.

[timmarchant]

🙂 I only found that by accident, it is tucked away in the developer options menu.

I prefer to fix things with code which will work for everything but I can't work out why FF is different, I have tested the demo theme and that is wrong too.

[AnitaC]

Normally things work great in Firefox. You can always send out a tweet on twitter and use hashtag #GenesisWP to see if someone from there can help you.

---

Need help with customization or troubleshooting? Reach out to me.

[timmarchant]

Yes, I love Firefox, I tend to code css in Firefox using EditCSS and then rejig if there are problems in other browsers. I have always tried to avoid browser specific code, even back with IE4/5, you could mostly get things to be pretty consistent without it.

Until today, I didn't even know you could write stuff for FF like that so this has been a good day, I have learned something new, 🙂

Thanks again for your input.

[Author]

Posts