How to make images responsive on mobile

  • Resolved efaler

    (@efaler)


    8 years, 1 month ago

    Hi,

    Images on my blog look fine on desktop, however they are misaligned when on mobile. On mobile an image is cropped when embedded in the post. The only way to see the full image is to zoom out of the post. Which then misaligns the text. As an example please look at https://devoted.io/blog/good-net-promoter-score/ on mobile.

    Can anyone advise on how to make images responsive on mobile? Is there an image size that you would recommend..

    Thanks very much!

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hello,
    You need to add this css for images:

    width: initial;
max-width: 100%;
height: auto;

    @systemsbox – could you be more specific on where to add that? Don’t see how I can add it in Appearance > Customize > Additional CSS without a code reference to “images”.

    I don’t necessarily need it to apply globally. Just have one full width image on home page that squishes on mobile. Can I add your fix as an inline style for that image only?

    Sorry for not being more precise. Here is the full code

    .blogContent .container img{
    width: initial;
    max-width: 100%;
    height: auto;
}

    I recommend you to apply it to all images inside posts using the code above, in case you have multiple ones. This way you don’t have to add it every time there is a bigger image, it will save you a lot of time.

    • This reply was modified 8 years, 1 month ago by systemsbox.
    • This reply was modified 8 years, 1 month ago by systemsbox.
    • This reply was modified 8 years, 1 month ago by systemsbox.

    While I was waiting I tried it inline, which seems to work fine on laptop and iPhone.

    img style=”width: initial; max-width: 100%; height: auto;” src= (etc. etc.)

    Since it’s the only extra-wide image on the site I don’t think I’ll need to mess with others. Anyway thanks because your CSS was the key. Found other class solutions and all kinds of stuff using srcset etc., but since yours worked I didn’t bother trying the rest.

    • This reply was modified 8 years, 1 month ago by cliff3esler. Reason: make code visible with pre
    • This reply was modified 8 years, 1 month ago by cliff3esler. Reason: glitch saving
    • This reply was modified 8 years, 1 month ago by cliff3esler. Reason: orig code would not save
    Thread Starter efaler

    (@efaler)

    Your solution works! Thanks so much for your help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to make images responsive on mobile’ is closed to new replies.