How to reduce elara theme display size on mobile

Hi @michimochi1,

Thanks for getting in touch again, great to hear from you.

Would you mind checking the demo site to see whether it looks correct to you on mobile?
https://demo.lyrathemes.com/elara

If the demo looks good on your mobile, then would you mind also including a link to the site you’re having trouble with? The link in your profile doesn’t seem to be valid any longer.

Thanks so much!

Thank you for the quick response! It looks like the same layout as demo, however, I would like to reduce the size so the pics aren’t so huge on the mobile. Here is a link to my site.
https://mylifeinmeals.com/

Thank you!

Thanks for the link, @michimochi1, super helpful.

You can limit the size of these on smaller devices by adding this CSS in Appearance > Customize > Additional CSS:

@media (max-width: 767px) {
    #blog-feed .entry {
        width: 340px;
        max-width: 80%;
        margin: 30px auto;
        float: none;
    }
}

If you need it adjusted any, just let us know!

This worked, thank you! If I wanted to make it even smaller, do I just change the “max-width” percentage?

Glad to hear it worked- thanks!

That’s correct, both the width and max-width have an effect depending on the resolution of the device you’re viewing it on, so you may need to adjust both depending on what size you’re aiming for.

Thank you! I appreciate your patience. I have zero website development or coding experience so your help is very much appreciated.

Very welcome- anytime! ??