Resize images only on desktop version

Store Design
, , , , ,

Topic summary

A Shopify store owner using the Dawn theme wants to resize images to match mobile proportions on desktop, where they currently appear too large. Initial CSS attempts left unwanted blank spaces.

Solution provided:

  • Custom CSS targeting desktop slider images only (min-width: 767px)
  • Sets banner height to 500px with object-fit: contain
  • Creates horizontal layout for desktop while maintaining vertical mobile design

Additional requests:

  • Extending the solution to work with video banners (not just images)
  • Making filler areas completely black instead of gray
  • Hiding specific banners on mobile using media queries

Current status:

  • Image resizing resolved
  • Video banner customization pending (user shared admin link, then corrected with direct CDN video link)
  • Discussion ongoing about potential paid assistance for multiple customization needs
Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

hey,

i have dawn theme and my main focus is for it to look similar sized to the mobile version because on the desktop version is way too big

I need a custom CCS to specially target each image directly to resize it

i tried this custom CCS but it doesnt look right it leaves a huge blank space, plus i wanted to change the size ONLY on desktop

Screenshot 2024-09-03 at 3.07.19 p.m..png
Screenshot 2024-09-03 at 3.07.19 p.m..png2410×1064 221 KB

this is how i want it to look like

Screenshot 2024-09-03 at 3.19.34 p.m..png
Screenshot 2024-09-03 at 3.19.34 p.m..png724×1196 387 KB

So i basically need a ccs custom code to add to every image banner/video that resizes it specifically on desktop version, my store is perfumecartelmx.com

2

You need some other images for desktop. Which will be horisontal and not vertical. Other way it will always have black area on side.

I created code which will affect only desktop slider. Result should be like this.

Debular_0-1725407461487.png
Debular_0-1725407461487.png1920×1080 196 KB

@media only screen and (min-width:767px){

.banner__media img{
object-fit:contain;
}
.slideshow.banner{

height:500px;

}

}

1 Like
3

looks great, thanks

how can i change the code to work on a video banner?

4

Send me link to video banner

5

i have this custom ccs code to show a specific banner only on mobile, but it only works on images

@media screen and (min-width: 750px) { .banner, slideshow-component { display: none; } }

btw is there a way i can make the filler completely black and not that gray tone?

6

https://admin.shopify.com/store/7be9e5-2/themes/136013152413/editor?section=template–16769217593501__video_NLRLbm

i believe is this one

7

The link you sent only to view as admin - it’s not available to me.
You can hire me and I’ll do all things you want :smiley:

8

ill sure considered it i need help wit many things

lets see if you can handle the video first

here is the link

https://cdn.shopify.com/videos/c/o/v/1de41476ce894a3287f8c98910b3b20a.mov