Make front page cover page fit

Make front page cover page fit

peakclo
Excursionist
24 0 4

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

 

peakclo_0-1728366319389.png

 

Replies 6 (6)

ZestardTech
Shopify Partner
5833 1058 1396

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;
}

 

ZestardTech_0-1728366644129.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
peakclo
Excursionist
24 0 4

I resized the image and put in the code you shared which looks good on desktop. For mobile the pictire is really squashed

 

peakclo_0-1728367576580.jpeg

 

Do you have any resolution 

GTLOfficial
Shopify Partner
609 133 121

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
4.png

If this was helpful, hit the like button and accept the solution.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
peakclo
Excursionist
24 0 4

peakclo_0-1728368141039.png

 

 

I put this in but it did not work

Dan-From-Ryviu
Shopify Partner
10042 2000 2046

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;
}

Screenshot 2024-10-08 at 13.35.52.png

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

peakclo
Excursionist
24 0 4

Sorry, I dont like this layout. I put this code in myself to change away from that.