A user is experiencing issues with images becoming oversized when uploaded to their Shopify homepage sections, specifically in “Popular devices” and “Section 2” (Gadgets & accessories).
Initial Problem:
Solutions Provided:
First, CSS targeting was applied to limit the first image width:
.card-main .box:first-child { width: 90px; }
This fixed desktop/mobile views but not all screen sizes. The solution was refined to:
.card-main .box:first-child { max-width: 90px !important; }
Expanded Issue:
The user clarified they can create multiple “popular devices” blocks, and images exceeding 170px height become oversized regardless of aspect ratio. They need a solution maintaining height constraints.
Final Working Solution:
Dmitry16 provided CSS that maintains maximum height:
.popular-section .card-main .box img { max-height: 170px; }
This successfully resolved the issue. The user then requested similar help for another homepage section (appears to need 246px height constraint). Status: Partially resolved - main issue fixed, secondary section assistance pending.
Hello everyone;
I am currently facing a problem when uploading images on the homepage. When uploading any image to these sections on the homepage, the image gets big on these sections. How can I fix this issue?
store URL: https://skinociti.com
Section1 (Popular devices): https://snipboard.io/3C62wn.jpg
Section2 (Gadgets & accessories) :https://snipboard.io/b3EjFx.jpg
Hi,
You need to right click open inspect element. You will get to know css class, target it and use following code:
.example-class{
width: 350px !important;
}
Can you help me find the class from inspect? It would be much appreciated.
This link is not working https://snipboard.io/quYPXm.jpg
Can you please send updated link so that I can see and send you the relevant class?
Open
Themes -
Edit Code -
Find style.css or base.css and paste following code at the bottom of file:
.card-main .box:first-child {
width: 90px;
}
It worked indeed, thanks. However, I am still getting the problem on different screen size. Desktop/Mobile is fixed however, on this screen size. It hasn’t changed.
Please try following code then and let me know if it works:
.card-main .box:first-child img {
max-width: 90px !important;
}
I just noticed you are targeting the first image only. When uploading other image, the problem remains the same. I don’t think it is a proper solution.
Thank you for explaining.
So under popular devices section, first image of Macbook is larger than all other images. You need that first image should be same size as all the other images under popular devices? Is that so?
From the block editor, I am allowed to create as many popular devices I can. When creating any new popular device and upading any images of 170px height, it is working fine but exceeding the height after 170px. The image gets bigger. I want something that is going to maintain the height aspect ratio no matter what is the size of the image.
So for that I will need to login and adjust code.
Hello, @geekyboy . Try this solution:
.popular-section .card-main .box img {
max-height: 170px;
}
I hope this solution will help you 
.
Perfect, it worked. Can you also help me with this section as well?
This section is also on homepage when you scroll a bit.
the height section for this should be: 462px
