WordPress.org

Forums

Customizr
[resolved] Bug in responsiveness on mobiles (4 posts)

  1. ElectricFeet
    Member
    Posted 1 year ago #

    I found a bug related to the responsiveness of blog summaries on mobiles:

    The round images on post summaries are getting cropped before they get fully responsive. Unfortunately, it is visible exactly at the width of most mobiles (320) in portrait mode--see simulation of themesandco here--scroll down to see all the cropped cirlces.

    I suppose there's a very easy solution, which would be to wrap the summaries in a row-fluid div (though there may be some re-ordering to do, to account for the alternating side-positioning of the circles).

    Is it too late for this to catch 3.0.9?

  2. ElectricFeet
    Member
    Posted 1 year ago #

    Well, I found the answer (nothing to do with wrong divs). For some reason, at less than 767px, the theme's CSS adds:

    @media (max-width: 767px) {
      body {
        padding-left: 20px;
        padding-right: 20px;
      }
    ....etc
    }

    Which makes the blog summary pictures crop on the iPhone :-(

    It's not clear why the padding-left and padding-right are in there, as it clearly messes up the display on mobiles (perhaps there's another reason I'm not aware of).

    It can be rectified with

    @media (max-width: 767px) {
      body {
        padding-left: 0;
        padding-right: 0;
      }
    .container {
    padding-left: 2px;
        padding-right: 2px;
      }
     }

    in Custom CSS or the child theme. The body selector takes away the whole-body padding---which has the nice effect of making the header borders, footer and slider (yey!) fill the full width of the page properly, as they do at higher screen sizes. The .container selector puts back a little bit of padding---just enough to take the text off the edges (needed at iPhone width), but not too much to crop the photos.

    @Nikeo could this be incorporated into a future release?

  3. nikeo
    Member
    Theme Author

    Posted 1 year ago #

    @EF great ! I will check this out!

  4. ElectricFeet
    Member
    Posted 1 year ago #

    There are always 25 ways to get the result you want in CSS. The above code gave a little bit of horizontal scrolling, which is a pain on an iPhone. Better CSS for an iPhone is:

    @media (max-width: 767px) {
      body {
        padding-left: 0px;
        padding-right: 0px;
        }
      .container {
        padding-left: 4px;
        padding-right: 4px;
        overflow-x:hidden;
        }
    }

    The reason is that 4px makes it a little better laid-out page while still allowing the circles to show fully. As there is some overflow of elements on the right of the page, however, the overflow-x:hidden; is required, to stop horizontal scrolling.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic