Solved

How to fix mobile banner error on Dawn 13.0 theme?

hefoli
Tourist
14 0 2

I'm using the Dawn 13.0 theme. I got the image I wanted on the desktop on the homepage. Although it asked for two images in the banner, I uploaded a single image and there is no problem. But when I check from mobile, a very bad image occurs. Officially half of the page is empty 🙂 How can I fix this? Preview link below. Thank you in advance.

https://ujpt9cyruh3i95w0-85574287682.shopifypreview.com

Accepted Solutions (2)

Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

@hefoli  please add the below code to the "base.css" file

 

@media screen and (max-width:480px){
.banner {
  height: 100vh;
}
.banner__media{
  height: 100vh;
}
}
➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me

View solution in original post

Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

@hefoli  add the code in "section-image-banner.css" file.

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me

View solution in original post

Replies 7 (7)

Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

@hefoli  please add the below code to the "base.css" file

 

@media screen and (max-width:480px){
.banner {
  height: 100vh;
}
.banner__media{
  height: 100vh;
}
}
➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
hefoli
Tourist
14 0 2

Unfortunately it didn't work 😞

Zeel-prajapatii
Shopify Partner
138 32 27

Hey @hefoli 

 

Can you please share me the screenshot of code you have added. also , I can't see the code i have given to you on the website.

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
hefoli
Tourist
14 0 2

When it didn't work, I deleted it to avoid an error. Now I'm adding it again and sending ss. When it didn't work, I deleted it to avoid an error. Now I'm adding it again and throwing ss. This method only takes the image from top to bottom on mobile, but does not make it full page. I will not remove the code so you can check it on mobile.ss4.PNG

Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

@hefoli  add the code in "section-image-banner.css" file.

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
hefoli
Tourist
14 0 2

DUDE, YOU ARE AWESOME! Thanks for your helping!

TerenceKEANE
Shopify Partner
510 86 78
u can use below code!
 
 

 

@media (max-width: 771.98px){
    div#Banner-template--22121307996482__image_banner {
        height: 100vh!important;
    }
}

 

 

Terence Keane

Best Regards,

★ 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