How to reduce the width of banner images only on desktop?

Technical Q&A
1

https://empiricalwater.com/

I just need to reduce the width of the banner images at the top of my homepage. (Btw, with how much I’ve been posting here, I hope the site is actually getting better, lol.)

Anyhow, just need to make sure the sides of the images aren’t being cropped on desktop, I need it to shrink on desktop. Cheers and thanks for all the help.

2

Add this to your Custom CSS of banner section

@media (max-width: 767px) {
.banner__media img {
    object-fit: contain !important;
}
}

Screenshot_2.jpg
Screenshot_2.jpg1270×907 77.9 KB

3

Thanks, but how do I eliminate the gray sections that show up on iPhone? I need the rest of the website to cover that space, if that makes sense

Also I just noticed I’m not actually seeing any change on desktop.

4

Sorry, I provided code for mobile. Please update code to this to make it changes for desktop only

@media (min-width: 768px) {
.banner__media img {
    object-fit: contain !important;
}
}
5

Is there a way to make the gray areas the same color as one of my backgrounds?

6

Hi @empiricalarby

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

7

Like this?

Screenshot 2023-11-24 at 14.15.13.png
Screenshot 2023-11-24 at 14.15.13.png1280×757 100 KB

8

Yes

9

I would like to see the background color be the same as the rest of my background: FDFCFB

10

Hi @empiricalarby

Please use this code.

.banner:after, .banner__media:after {
    background: #fdfcfb !important;
}