Hi, is there a way to adjust the size of the mobile image, and desktop image in the section “image_banner” in Dawn 10.0? I already have the code in to upload 2 different images. For example, I want to be able to choose small for the desktop banner, with the header left center, and for mobile, maybe large with the header top center.
Is this possible?
This is the page I am having issues with, the desktop image should be smaller 1600x619 and the mobile is 800x1279, so maybe the code could be to keep the banners the size of the image?
https://shoplivingsimply.com/pages/simply-sleep-launch-offer
shoplivingsimply.com (to hero sections)
Also, just for the record, the banner sizes I will be using 95% of the time will be 1600x619 and 800x1279. The copy will also be middle or top left on desktop and top center (very top) for mobile. If that helps at all.
Hello @LIVINGSIMPLY ,
You can try to follow these steps:
Go to Online Store → Themes → Actions → Edit code
Go to Assets folder → base.css or theme.scss.liquid file
Add this following code at the bottom of page
.image-banner {
text-align: center;
&.small {
max-width: 300px;
}
&.large {
max-width: 800px;
}
@media (max-width: 768px) {
text-align: center;
&.small {
max-width: 100%;
}
&.large {
max-width: 100%;
}
}
}
Save and preview
Hope this can help you.
Transcy
Thank you for the help. But it did not do anything, it was all the same. The setting for banner size (adjust to first image, small. medium, large) is the problem, if I adjust to the first image the mobile will be small, if I adjust to the large, the mobile looks terrible, and mobile is ok, other than heading placement.
