WordPress.org

Ready to get started?Download WordPress

Forums

Site body width changing on mobile (12 posts)

  1. benrsullivan
    Member
    Posted 10 months ago #

    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: http://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?

  2. Krishna
    Volunteer Moderator
    Posted 10 months ago #

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

  3. benrsullivan
    Member
    Posted 10 months ago #

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

  4. Krishna
    Volunteer Moderator
    Posted 10 months ago #

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

  5. benrsullivan
    Member
    Posted 10 months ago #

    The problem still occurs when I switch to Twenty Twelve.

  6. Krishna
    Volunteer Moderator
    Posted 10 months ago #

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

  7. alchymyth
    The Sweeper & Moderator
    Posted 10 months ago #

    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.

  8. benrsullivan
    Member
    Posted 10 months ago #

    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.

  9. alchymyth
    The Sweeper & Moderator
    Posted 10 months ago #

    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.

  10. benrsullivan
    Member
    Posted 10 months ago #

    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?

  11. alchymyth
    The Sweeper & Moderator
    Posted 10 months ago #

    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;

  12. benrsullivan
    Member
    Posted 10 months ago #

    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.

Reply

You must log in to post.

About this Topic