A user seeks CSS code to reduce the size of an “As Seen In” image on their product page’s desktop view while maintaining its mobile dimensions.
Current Issue:
Solutions Provided:
Two approaches were offered:
Custom CSS method (xtrend): Navigate to Theme → Customize → Custom CSS and add a media query targeting screens 768px+ wide. Use width: 50% and margin: 0 auto with !important flags on the banner element ID, adjusting the percentage as needed.
theme.liquid method (PageFly-Oliver): Access Online Store → Theme → Edit Code, locate the theme.liquid file, and paste CSS code at the bottom before saving.
Both solutions use CSS code snippets to constrain the image width specifically on desktop viewports while preserving the mobile layout.
Refresh theme
https://huggercomfort.com/products/hot-hugger-wearable-hot-water-bottle
Please can someone give me the code to make this “As Seen In” image smaller on desktop so it is a wide as the “more benefits” above it. Please do not re size it on mobile it is a good size on there. Thank You!
go to your store > theme > customize > theme settings > custom css or theme base.css
@media (min-width:768px) {
#Banner-template–16912016048384__image_banner_ypUtb8 {
width: 50% !important;
margin: 0 auto !important;
}
}
you can adjust the width according to your need i just used width 50% for me
Hi @Finn4 ,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code at the bottom of the file → Save
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly