How to reduce size of section image banner:

Store Design
1

Hi guys.

I need to reduce size, zoom, dimensions, and something like that of image banner of this page (or all):
horostoreonline.com
but only for desktop. nothing has to be changed for mobile. So I mean that its too large and I would like to center all content without change the image portion.

example what I want like size.

2

Hi @neal_8475

To be able to use CSS without affecting mobile, you should use responsive mode so that you can put CSS code in:

@media screen and (min-width: 750px){
}

The min-width means that when the screen is larger than 750px will be applied. For example, here I want to resize the whole product image:

view (86).png
view (86).png1140×856 84.4 KB

I add the below CSS code to the theme’s CSS:

@media screen and (min-width: 750px){
.product__media.media.media--transparent img{
   width: 100px !important;
    height: 100px !important;
}
}

The image on the desktop will be changed:

view (88).png
view (88).png1144×891 37.5 KB

While on the mobile will not be changed because the mobile size is only smaller than 414px

view (89).png
view (89).png382×911 68.1 KB

I hope that it’s useful for you.