How to Reduce Image Banner Size on Desktop View?

[Esra47]

Hi everyone,

I’m having an issue with the image banner on the desktop view of my website. It’s way too large. Is there any way to reduce its size? I would appreciate any help.

Thanks in advance!

Here is link : https://tekaifaswg23rye9-71988969740.shopifypreview.com Dawn Theme

[BSSCommerce-HDL]

Hi @Esra47 ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file → Save

@media (min-width: 769px) {
   .banner {
      height: 600px !important;
   }
}

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[Esra47]

I would like the entire image to be visible, including the bags on the table. I’m okay with the handles of the bags being only partially visible. Would this be possible?

[TerenceKEANE]

Hi,

Manually altering the slider image with code can cause it to become distorted. Therefore, I recommend re-uploading the image at the following resolutions. If you can’t do this, let me know!

Desktop: 1920x790

Mobile:1000x700

[Esra47]

Hi,

I tried using GIMP to resize the image, but it doesn’t seem to accept these dimensions. Is there another way to set the banner to this size? Any help would be appreciated.

Thank you!

[TerenceKEANE]

Can you send me the desktop and mobile slider picture links? I will try to do it manually.

[Esra47]

I try to send the link via Canva is this ok?

https://www.canva.com/design/DAGFj6zKqlk/nrqKx9nFZjm52tGAfautFA/view?utm_content=DAGFj6zKqlk&utm_campaign=designshare&utm_medium=link&utm_source=editor

I like the mobile version as it is. Only the desktop version needs to be adjusted. I’m not sure if I sent the link correctly. I’m a bit confused right now.

[Esra47]

I will try it

[TerenceKEANE]

The image size you sent appears to be 1080x720. Can you recreate it using Canva with the following resolution and then upload it to the system? The issue is that the image doesn’t fit the designated area. Alternatively, you can create a different image as an example. The suggestion from the person above is a quick fix, but it also disrupts the designated area.

Desktop: 1920x720

[Esra47]

I tried, but when I upload it in the desired size, it looks like this. Unfortunately, I don’t think the image fits. I don’t have another image at the moment, so I guess I’ll have to live with it.

[TerenceKEANE]

Let me know if you can’t do it.

[Esra47]

Thanks for your help! I tried, but when I upload it in the desired size, it looks like this. Unfortunately, I don’t think the image fits. I don’t have another image at the moment, so I guess I’ll have to live with it.

[TerenceKEANE]

You are welcome.

Let me know if you need help with anything else.

[Patient_Sub]

You can use resizeimage.io I think it should work.

[Patient_Sub]

Use Advanced settings