Image Banner Resizing on mobile - Dawn theme

Solved

Image Banner Resizing on mobile - Dawn theme

adorcollective
Tourist
11 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
292 63 76

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!

 

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

View solution in original post

JasmeetVT14313
Shopify Partner
292 63 76

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!

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

View solution in original post

Replies 8 (8)

PageFly-Noah
Shopify Partner
1317 233 280

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
11 0 2

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

IMG_1585.jpeg

PageFly-Noah
Shopify Partner
1317 233 280

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
292 63 76

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!

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
adorcollective
Tourist
11 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
292 63 76

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!

 

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
adorcollective
Tourist
11 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
292 63 76

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!

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com