How can I optimize blog post image dimensions for mobile (any orientation)

Community Forums Forums Design Tips and Tricks How can I optimize blog post image dimensions for mobile (any orientation)

This topic is: not resolved

This topic contains 2 replies, has 3 voices, and was last updated by  eadev19entsp 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #114453

    Post count: 42

    Hi all,

    I’m using eleven40 pro theme which has a post width size of 810px. For most of my posts I use a half width (405px) right aligned image.

    I’ve just noticed that whilst the post and images look great portrait on a mobile (currently iphone) as they fill the whole width of the screen.

    They don’t look great when i turn my phone landscape as they only fill about 3 quarters of the screen and i end up with maybe one word next to the image which looks kid of messy.

    I know i can get around this by using full width images but i don’t always want to do that because depending upon the image it can be shrunk so much on mobile that you cant read any text in that image.

    Is there anyway I can optimise my images so that i can use a half width image in my blog post and then have it fit full width of a mobile whatever orientation it is?

    Lauren Gaige
    Post count: 10

    Hi there,

    You could do a couple things here:

    1. You could make your images just a bit bigger so it fills the widget of the landscape view on an iphone.

    2. Or.. since most of your images are assigned the class alignright, you can force the alignright class to be like the aligncenter class under the media queries for that screen size.

    So you could add:

    .alignright {
    float: none;
    margin: 0 auto;

    under the @media only screen and (max-width: 767px) section.

    Hope this helps!


    Post count: 3

    the auto usually works

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.