How can I resize images for mobile view on Dawn theme?

[jewelryeyelove]

Hi, I can't figure out how to resize the photos on my home page or my about section, they are too wide so they get cut off. Can someone help? I'm using the Dawn theme.

jewelryeyelove.com 

Thank you!

[PageFly-Kate]

Hi @jewelryeyelove 

This is Kate from PageFly - Landing page builder. I’d like to suggest this idea:

Step 1: Go to Online Store->Theme->Edit code

Step 2: Asset->/base.css->paste below code at the bottom of the file:

.media>img {
object-fit: fill !important;
}

Hope my answer will help you

[jewelryeyelove]

Thank you. That does help, but I think it looks a little odd because of my logo. Are there any other solutions by chance? If not that is okay, I really do appreciate your help 🙂

[jewelryeyelove]

my logo looks squished lol

[PageFly-Kate]

Hi @jewelryeyelove. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit on different devices.

[jewelryeyelove]

Thank you. So there is no way around this? Could I possibly display two different images? One on desktop and one on mobile?

[alex44]

I am having a problem with the view of my product pages. On mobile it is totally differently images are showing extra large the layout of product pages are not on their place when i zoom out any of product page the right side of page remains blank and product pages are not fit on mobile view kindly help me out in it. I tried this code but still its not working out. 

[jewelryeyelove]

Still looking for a solution, thank you!

[PageFly-Kate]

I see the problem has been fixed. Anything else you want me to help you with?

[jmoney1234]

Hi I am having a similar problem. My used your code above but now the image is too stretched. Is there a different code to add to make the picture less stretched? https://anciennechains.com

[jewelryeyelove]

Hey! So when you're in edit mode on the top right hand corner you can switch to mobile view and edit it that way! That fixed my issue completely!