Bug in responsiveness on mobiles

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?

@ef great ! I will check this out!

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.