Responsive design

Mauer Themes Support Storyteller Responsive design

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #291


    I like the theme, but I’m having a few problems.

    1) The theme doesn’t appear to be fully responsive. On mobile (iPhone 6S) I’m getting stretched featured images on my index page (see link #1). On a macbook pro & iMac I’m getting fully rendered images if the window is at full size (see image #2). However if I then make the window as small as it’ll go, the images end up stretched (vertically) when the window reaches its smallest width (see image #3). If I refresh the page with the window as least wide as it’ll go the images render with the correct ratio. However, when I make the browser window large again it doesn’t resize the images, it stops at a certain point and breaks the layout (see image #4). I understand things happen, however it does say the theme is responsive and ready. It would seem that it’s not triggering the resizing for various screen sizes. Can you advise on how to fix this?


    Also, can you advise on image sizes for featured images & images in general? I’ve noticed some of my featured images can look a bit fuzzy when they’re at 1200px wide. It’d be good to know the dimensions you have in mind for media. Thanks.


    I think the responsive thing might be related to Jetpack (which I installed as recommended by the manual). I’ve deactivated it and it seems to be working. Might be something to mention in documentation. But if you could let me know about image sizes that’d be great!



    The sizes of the media used by the theme are as follows:

    781×520, hard-cropped
    510×382, hard-cropped
    680×680, soft-cropped
    526×526, hard-cropped
    1596×840, hard-cropped
    1920×1920, soft-cropped

    WordPress automatically generates all the sizes of an image used in the currently active theme once you upload the image. So if you just give Storyteller the biggest images you have, it will be alright. Please mind that the images that are bigger than 1920 by any of the sides will be scaled down to be 1920 by the bigger side.

    The sizes above are a bit bigger than the areas in which they are displayed — this is done to give them a sharper look on high-resolution displays like Retina.

    As for the images being stretched, I wasn’t able to reproduce this behavior. What I tried is I opened on an iPhone 5s and in Google Chrome’s iPhone 6 simulator. Both did not show any stretched images. I also tried opening the demo (, which has Jetpack running on an iPhone 5s and in Chrome’s iPhone 6 simulator. The images don’t appear to be stretched as well. I used the same version of WP as you do — 4.5.3, and the latest Jetpack version.
    I also did not see the images being stretched when changing the browser window size on a Mac.

    Here is what we can do:

    You mentioned that you found that the problem is connected with JetPack.

    Can you please turn on Jetpack on so I could take a look and search for probable solutions? Having Jetpack running on the demo does not cause this behavior, so I need to look at it on your site to be able to track down the reason.

    Also, can you please take a look at on your devices and see if the images appear stretched?

    Thank you.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Responsive design’ is closed to new replies.