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.
Thank you!
Topic summary
Main issue: Homepage/About images on the Dawn theme appear too wide on mobile, getting cropped.
What was tried: A CSS tweak was suggested (add .media>img { object-fit: fill !important; } in base.css). This removed cropping but caused distortion, notably a squished logo. Object-fit: fill forces the image to fill its container, which can stretch/squash on different screens.
Outcome for original poster: Ultimately resolved by switching to mobile view in the theme editor and adjusting the section there (no code needed). A PageFly rep later noted the issue looked fixed for that store. An image attachment showing the squished logo was central to understanding the distortion.
Open issues from others:
- Another merchant reported the CSS made images look too stretched and asked for an alternative (no solution provided yet).
- A different user reported broader mobile product page layout problems (extra-large images, blank right side on zoom); the CSS did not help and remains unresolved.
Status: Original case resolved via mobile-specific edits in the theme editor; other users’ requests for a non-distorting CSS approach and mobile product page fixes are still open.
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
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 
Hi @jewelryeyelove . The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit on differentdevices.
Thank you. So there is no way around this? Could I possibly display two different images? One on desktop and one on mobile?
Still looking for a solution, thank you!
I see the problem has been fixed. Anything else you want me to help you with?
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
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!
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.