Featured images resizing in tablets

  • Author
  • #53788

    Hi there. Just purchased Bromley a couple weeks ago. On a laptop or desktop computer, the featured images that display on my home page look OK. However, on the iPad the images get resized horizontally and take on an extremely narrow vertical shape.

    I understand this is part of the responsive design, however, the image becomes so narrow that it looks pretty terrible. Ideally, the image would at least retain its landscape orientation; otherwise it’s very difficult to select an image that will look good in every environment.

    I’ve seen other blogs do this. Is there any fix for this?


    Theme Author

    Hi – I’ve tweaked the theme slightly so hopefully this will work a bit better now.


    Thanks! The images definitely look better. I do notice that it pushes the sidebar down below the main content. Is there any way to keep the sidebar on the side? Kind of like they do it here: http://www.justjared.com/. Would it help if I reduce my font size?


    Oh, I also just looked on the iPad and see that the top third of my header is now being cut off. Could you adjust this? Thanks!


    Theme Author

    I can fix the header image thing so I’ll do that soon.

    I’ll need to think about the other thing. The problem I have is that I can’t change things drastically since any changes I make to your site will affect all the other people who use the theme.

    If you have the custom design upgrade (which I think you do since you seem to be using a custom font?) then perhaps I can suggest some custom css styles that will help you get the site you want.


    Theme Author

    I’ve put it back as it was (with the sidebar) and made the images slightly wider.

    Making the font smaller would definitely help make the text more readable – and a smaller font would mean the images are less tall.

    If you have the custom css upgrade then I can probably suggest some css changes that will help you get closer to what you want.


    Thanks. Yes, I have the custom upgrade and I’d love to hear your suggestions. Is there a specific location where I would need to insert the CSS? (I know HTML very well, but not familiar with CSS.)


    Theme Author

    ok cool – so the first thing we could try is to set a maximum height on the thumbnail images. This will mean they don’t get stretched too tall.

    The following seems to work quite well.

    .main article.post-archive a.thumbnail {
    max-height: 240px;

    All you have to do is add that code to the css editor (I like to use the customizer for this since it will update the site in real time).


    OK, that does look better. Thank you for all your help and responsiveness – excellent customer service! It is much appreciated!

The topic ‘Featured images resizing in tablets’ is closed to new replies.