White gap appearing down right hand side of Minimum 2.0 homepage in 1280 x 1024

[joeroberson]

This gap just appeared on the right hand side of my Minimum 2.0 homepage at http://www.mindofmyown.org.uk.

This is a screenshot taken on a 1280 x 1024 monitor http://mindofmyown.org.uk/wp-content/uploads/2013/10/MOMO-new-homepage.png

On a 1366 x 768 display the gap is much thinner but still visible.

This problem appears in both chrome and firefox (not tried on any other browser)

Ive tried to inspect it in chrome but i dont know what to look for.

Please can someone help!

Thanks!
Joe

http://www.mindofmyown.org.uk

[AnitaC]

Looking at your CSS, the largest setting in your media queries is "@media only screen and (max-width: 1200px)" So you need to add in new media queries with the larger size.

---

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

[joeroberson]

Thanks for pointing that out, Anita. However i don't understand what i should do to fix it.
- When I change “@media only screen and (max-width: 1200px)” to “@media only screen and (max-width: 1280px)” then it skews the header menu and featured section out of alignment with the other page elements, and creates a huge margin on either side of the page.

Do I need to start a new @media? How do i work out what should go into it?

Thanks again
Joe

[AnitaC]

No you shouldn't change it. You will probably need to create a new media queries section to accommodate the new size and add in all the CSS that does with it.

---

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

[joeroberson]

Thanks

I've added a new media queries like this:

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

.wrap,
#header {
width: 1100px;
}

#content {
width: 760px;
}

.post-type-archive-portfolio .portfolio {
width: 380px;
}

}

It *seems* to work. Is there any other adjustment I should make to improve it? (I'm working on intuition, not experience here!)

Thanks
Joe

[AnitaC]

I use the mobile response tester in Firefox (Ctrl+Shift+M) to look at the sizes. Just review it and check all the elements to make sure they meet your needs.

---

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

[joeroberson]

Thanks. I don't really understand what Im doing with it yet but will look up and learn 🙂

Joe

[Author]

Posts