Shopify themes, liquid, logos, and UX
I have changed my website cover pic and it no longer fits the web page. I had this issue with my previous pic but managed to fix it. Can someone help. Dawn theme. www.peakclo.com
Hi @peakclo
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:
.banner__media.media > img {
object-fit: fill!important;
}
I resized the image and put in the code you shared which looks good on desktop. For mobile the pictire is really squashed
Do you have any resolution
Hello @peakclo
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> section-image-banner.css
@media screen and (min-width: 750px) {
.banner--small:not(.banner--adapt) {
min-height: 60rem !important;
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
I put this in but it did not work
Hi @peakclo
Please open base.css file, find this code
.banner__media.media {
max-width: 1100px;
top: unset!important;
left: unset!important;
}
Replace it with this
.banner__media.media {
max-width: 100%;
top: unset!important;
left: unset!important;
}
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
Sorry, I dont like this layout. I put this code in myself to change away from that.
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025