I’m not sure why my featured product and featured collection are of different sizing.
Is there a way to make the size consistent and follow the featured product image sizing?
Topic summary
Featured product and featured collection images render at different sizes, and the requester wants the collection to match the featured product sizing.
Initial fix provided: edit theme code (Online Store > Themes > Actions > Edit code > base.css). In the desktop media query (@media screen and (min-width: 990px)), change .page-width-desktop padding from 0 5rem to 0 15rem. This adjustment visually aligned the sections on the requester’s screen, and they confirmed it worked.
Technical context: the change is within a CSS media query (rules that apply at certain viewport widths). Increasing horizontal padding affects layout width on desktops (≥990px), which can influence how image cards scale.
Follow-up issue: on other desktop resolutions, the sizing becomes inconsistent again. The requester asked how to keep sizing consistent across different desktop viewports and shared a product link and screenshots to illustrate the discrepancy.
Status: No responsive, cross-resolution solution has been provided yet. Discussion remains open with an outstanding request for adjustments that maintain consistency across varying screen sizes. Images/screenshots are central to understanding the layout differences.
Hello @thatshampooshop
Go to online store ----> themes ----> actions ----> edit code---->base.css ----> line number 93
search this code.
@media screen and (min-width: 990px) {
.page-width-desktop {
max-width: var(--page-width);
padding: 0 5rem;
}
}
and replace with this code
@media screen and (min-width: 990px) {
.page-width-desktop {
max-width: var(--page-width);
padding: 0 15rem;
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
1 Like
it works, thanks! 
Thanks a lot…!!
please hit the like button also.
Hello GTLOfficial,
The above code works in my resolution but when I use different desktop/resolutions, the sizing changes once again.
Is there a way to adjust the above code to make sure the sizing is consistent across different resolutions?
Store: https://ee15bf-83.myshopify.com/products/system-professional-hydrate-shampoo