Dawn theme - Mobile View image problems

Store Design
,

Topic summary

A user reports that product images are being cut off in mobile view on their Shopify store using the Dawn theme. The image appears cropped within its container bubble rather than displaying fully.

Two CSS solutions proposed:

  • Solution 1: Add CSS targeting the specific .uk-card class with a fixed height of 30rem for screens under 767px width. Implementation requires editing the theme.liquid file and placing code within <style> tags.

  • Solution 2: A simpler approach adding CSS to the section’s Custom CSS field, setting .uk-card height to 340px for screens under 749px width.

Both solutions use media queries to apply fixed heights specifically for mobile viewports. The issue remains unresolved as the original poster hasn’t confirmed which solution worked.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

My image is getting cut off in the mobile view. How do I expand it to fit the whole bubble? https://bluphactor.myshopify.com/

mobile-view.jpg
mobile-view.jpg182×399 14.8 KB

1 Like
2 
@media screen and (max-width: 767px) {
.uk-card.uk-card-default.uk-overflow-hidden.uk-border-rounded.uk-box-shadow-no.uk-height-1-1 {
    height: 30rem !important;
 }
}

Mustufaali_0-1743359370407.png
Mustufaali_0-1743359370407.png287×513 101 KB

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

3

Hi @khurst

Please add this code to Custom CSS of that section to solve the issue on mobile.

@media (max-width: 749px) {
    .uk-card { height: 340px !important; }
}