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

Community Forums Forums Design Tips and Tricks White gap appearing down right hand side of Minimum 2.0 homepage in 1280 x 1024

This topic is: not resolved

This topic contains 6 replies, has 2 voices, and was last updated by  joeroberson 12 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #69308

    joeroberson
    Participant
    Post count: 18

    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
    #69312

    AC
    Blocked
    Post count: 7712

    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.

    #69320

    joeroberson
    Participant
    Post count: 18

    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

    • This reply was modified 12 months ago by  joeroberson.
    • This reply was modified 12 months ago by  joeroberson.
    #69322

    AC
    Blocked
    Post count: 7712

    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.

    #69331

    joeroberson
    Participant
    Post count: 18

    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

    #69335

    AC
    Blocked
    Post count: 7712

    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.

    #69340

    joeroberson
    Participant
    Post count: 18

    Thanks. I don’t really understand what Im doing with it yet but will look up and learn :)

    Joe

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.