How to Reduce Image Banner Size on Desktop View?

Esra47
Excursionist
51 0 6

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

 

 

 

 

Replies 14 (14)

BSSCommerce-HDL
Shopify Expert
643 198 213

Hi @Esra47

You can try this code by following these steps:

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

BSSTechVenture_1-1716293742265.png

 

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

BSSTechVenture_2-1716293758598.png

 

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

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

Here is result: 

BSSTechVenture_0-1716293689230.png

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 😍

 

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Esra47
Excursionist
51 0 6

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
Shopify Partner
510 86 78

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

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
Esra47
Excursionist
51 0 6

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
Shopify Partner
510 86 78

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

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
Esra47
Excursionist
51 0 6

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

 

https://www.canva.com/design/DAGFj6zKqlk/nrqKx9nFZjm52tGAfautFA/view?utm_content=DAGFj6zKqlk&utm_cam... 

 

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.

TerenceKEANE
Shopify Partner
510 86 78

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

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
Esra47
Excursionist
51 0 6

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.

 

Bildschirmfoto 2024-05-21 um 17.28.25.png

Esra47
Excursionist
51 0 6

I will try it 

 

 

 

TerenceKEANE
Shopify Partner
510 86 78

Let me know if you can't do it.

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
Esra47
Excursionist
51 0 6

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.

 

Bildschirmfoto 2024-05-22 um 08.18.42.png

TerenceKEANE
Shopify Partner
510 86 78

You are welcome.

 

Let me know if you need help with anything else.

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
Patient_Sub
Visitor
2 0 0

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

Patient_Sub
Visitor
2 0 0

Use Advanced settings