Solved

Image Banner Resizing on mobile - Dawn theme

adorcollective
Tourist
10 0 2

Hello, I would like to expand my image banner on the mobile version to go "full screen", not that square format. I tried going with some custom css from other sollutions in the community but nothing worked. I edited the code before to make some edits to the header (making it transparent and expanding the image banner up) and maybe it has something to do with it. This is the website: https://adorcollective.com

pw: geicay

 

thank you.

Accepted Solutions (2)
JasmeetVT14313
Shopify Partner
204 48 57

This is an accepted solution.

@adorcollective 
Okay in that case you can update my previous code with

 

 

 

@media screen and (max-width: 749px){
#Banner-template--21354181296471__image_banner.banner:not(.banner--stacked) {
    height: 100vh;
}
}

 

 

If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

 

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

View solution in original post

JasmeetVT14313
Shopify Partner
204 48 57

This is an accepted solution.

@adorcollective 
Glad it worked
Please mark it as a solution as it has solved your issue.

Related to your above query, yes it is possible. You can add the below code at the end of same file

@media screen and (max-width: 749px){
#Banner-template--21354181296471__image_banner .banner__content {
    align-items: end;
}
}


 If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

View solution in original post

Replies 8 (8)

PageFly-Noah
Shopify Partner
1251 221 254

This is Noah from PageFly - Shopify Page Builder App

 

Please add code here to change full screen banner:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

 

<style>
   @media screen and (max-width:767px){
      .banner__media img{
           height: 50vh !important;
       }
   }
   
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

adorcollective
Tourist
10 0 2

It somehow expands but it expands the banner inside the square, not the square itself.

IMG_1585.jpeg

PageFly-Noah
Shopify Partner
1251 221 254

Hi @adorcollective  iam sorry please add again code here:

<style>
   @media screen and (max-width:767px){
     #Banner-template--21354181296471__image_banner{
           height: 50vh !important;
     }
      .banner__media img{
           height: 50vh !important;
       }
   }
   
</style>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

JasmeetVT14313
Shopify Partner
204 48 57

Hi @adorcollective 

If you would like to make the banner of full screen on mobile then try adding below code to end of "section-image-banner.css" file

@media screen and (max-width: 749px){
.banner:not(.banner--stacked) {
    height: 100vh;
}
}

If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
adorcollective
Tourist
10 0 2

Well TY, it actually worked but I have another image banner down next to the products that it was also afected by this. I want only for the top image.

JasmeetVT14313
Shopify Partner
204 48 57

This is an accepted solution.

@adorcollective 
Okay in that case you can update my previous code with

 

 

 

@media screen and (max-width: 749px){
#Banner-template--21354181296471__image_banner.banner:not(.banner--stacked) {
    height: 100vh;
}
}

 

 

If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

 

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
adorcollective
Tourist
10 0 2

Perfect!! thank you. Another question maybe you can help me. I would like now because the banner is full screen to put the "View Collection" button and "new launch" text lower on the banner. Is it possible?

thank you.

JasmeetVT14313
Shopify Partner
204 48 57

This is an accepted solution.

@adorcollective 
Glad it worked
Please mark it as a solution as it has solved your issue.

Related to your above query, yes it is possible. You can add the below code at the end of same file

@media screen and (max-width: 749px){
#Banner-template--21354181296471__image_banner .banner__content {
    align-items: end;
}
}


 If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com