Site body width changing on mobile

  • I’m currently trying to work through some mobile compatibility issues with my WP site, but this is a field I have very little experience with. The site I’m working on is here: https://whitehallrow.com/

    When viewed on a mobile device (I’m using an iPhone 4S), the page becomes very narrow and text wraps within it. However, the photos on the left of the page as well as the blue ribbons get pushed out onto the background on the right.

    How can I get the body width to stay the same on mobile devices instead of becoming narrow and pushing content off the side?

Viewing 11 replies - 1 through 11 (of 11 total)

  • Do you find the same problem with Twenty Twelve theme? Please try and let us know.

    Thread Starter benrsullivan

    (@benrsullivan)

    Can I switch back to the parent theme to check without breaking my site when I return to the child theme?

    If you have a child theme, you can safely switch to the parent theme.

    Thread Starter benrsullivan

    (@benrsullivan)

    The problem still occurs when I switch to Twenty Twelve.

    Can I see your site with the Twenty Twelve theme? You are now using a child theme.

    in the area around your ‘ribbon links’ and those photos to the left of those ribbons you have lots of styles with fixed widths, which are incompatible with responsive formatting.
    also the #customfooter, and possible many more.

    you will possibly need to find some ways to change the way these sections are positioned by adding some @media queries for narrower browsers.

    Thread Starter benrsullivan

    (@benrsullivan)

    So if I understand this correctly, what I need to do is use media queries to detect certain browser widths and modify the CSS for each one? I’ve never used media queries before or even spent much time dealing with cross-browser/platform compatibility issues, so this is new territory for me.

    if I understand this correctly

    yes.

    be aware, that in Twenty Twelve, the ‘mobile’ formatting is in the general css section, while the @media queries are correcting the layout for the larger browsers.

    you’ll find out by looking through style.css, at what browser widths the formatting gets adapted.

    Thread Starter benrsullivan

    (@benrsullivan)

    Cool! I’m slowly getting the hang of it. One thing that I’ve noticed is that the website banner (as well as the slideshows) resizes with my browser window… how can I get the images further down on the page to do that as well?

    the website banner (as well as the slideshows) resizes with my browser window… how can I get the images further down on the page to do that as well?

    try to find teh formatting for the banner in the style.css – a browser inspection tool might help to do so…

    generally the ‘responsive’ images are styled with:

    max-width: 100%; height: auto;

    Thread Starter benrsullivan

    (@benrsullivan)

    Unfortunately, I’m still having the problem of the site body being much too narrow… on an iPhone it only takes up about 1/3 of the screen width. I’ve tried changing CSS in the media queries section but I can’t get the body to appear wider.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Site body width changing on mobile’ is closed to new replies.