How can I make images responsive for mobile?

[ramyasriram1]

Hi,

Can you help me understand how to optimize images for mobile please? I think I set a max width for desktop but I would like to have images responsive for mobile/tablets. Example page: https://thetapstories.com/category/comics/ – the images look quite tiny on mobile.

Many thanks in advance!

Ramya

[marc_a]

Hi @ramyasriram1,

Thanks for reaching out!

By default, WordPress will have different image sizes when you upload them in the Media Library! In other words, the images will automatically resize in the mobile view as long as it is set to max-width 100%. As long you are using the image element, it will automatically resize on the mobile. If you are also referring to mobile image optimization, I suggest that you use the lazyload image plugins.

Hope that helps.

Thank you.

[ramyasriram1]

Hi Marc,

Thanks for your help! Is there a way to set max-width to 100% on mobile only? I would like to use a max-width of 85% for desktop.

Many thanks,
Ramya

[tristup]

Hi Ramya,

If you are using the Image element you can set the max-width to 100% only for the mobile, by adding the following code into the Element CSS of Image element.

@media  (max-width: 480px) 
{
    $el.x-image
    {
        max-width:100% !important;
    }
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[ramyasriram1]

Thank you so much, @tristup!

I’m not using the Image element (is that cornerstone?), these are for normal image posts showing up on category pages. I have this code:

.category .entry-content.content img {
max-width: 80%;
}

.category .entry-content.content .wp-block-image.size-large {
max-width: 80%;
}

@media (max-width: 480px){
.category .entry-content.content .wp-block-image.size-large {
width: 100% ! important;
margin-left: 0;
}}

However it is still 80% on mobile as well. Unless I change the first two max-width to 100%, I am unable to show it as 100% on mobile. Is there a way to tweak this code to show 80% width on desktop and 100% on mobile, please?

Thanks a ton!

Ramya

[ruenel]

Hello Ramya,

You need to add maximum width of 100% in your @media block. Therefore, the @media code should be like this:

@media (max-width: 480px){
  .category .entry-content.content .wp-block-image.size-large {
    width: 100% ! important;
    margin-left: 0;
    max-width: 100%;
  }
}

Kindly let us know how it goes.

[ramyasriram1]

@ruenel

@media (max-width: 480px){
  .category .entry-content.content .wp-block-image.size-large {
    width: 100% ! important;
    margin-left: 0;
    max-width: 100%;
  }
}

Hi Ruenel,

Thank you so much. I’ve added in your code, and it works as long as I remove the following:

.category .entry-content.content img {
max-width: 80%;
}

How can I make the images appear 80% on desktop without affecting the 100% mobile size?

So sorry about the back and forth, and thank you so much.

Ramya

[prakash_s]

Hello Ramya,

Please replace this code with the given code under X/Pro—>Theme Option —>CSS

 .category .entry-content.content img {
max-width: 80%;
}

Replace with this code.

@media (min-width: 993px){
.category .entry-content.content img {
max-width: 80%;
}
}

Please note that this code only works if the viewport width would be 993px or more. It means that it would only work on larger devise and desktop.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[ramyasriram1]

@prakash_s

@media (min-width: 993px){
.category .entry-content.content img {
max-width: 80%;
}
}

Hi Prakash,

This worked perfectly, thank you so much! Will work on my CSS skills going forward

[prakash_s]

You are welcome @ramyasriram1