What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Dawn 8.0 / Image banner / desktop view / how not to exceed 80% of the other section when zooming

Solved

Dawn 8.0 / Image banner / desktop view / how not to exceed 80% of the other section when zooming out

bibigab
Explorer
61 4 12

Capture d’écran 2023-05-26 142501.png

On desktop view, how to keep the proportion ratio of the image banner section aligned with the other sections when zooming out (pictures shows what I want to avoid). My site is OurHatsDeserveBetter.com

Best

Eric

Bibigab
Accepted Solutions (2)

made4Uo
Shopify Partner
3856 717 1200

This is an accepted solution.

Hi @bibigab 

 

You can use the code below. 

 

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below

@media screen and (min-width: 750px) {
div#Banner-template--18974826660176__b5925a07-95a1-451c-8cbd-e25842240e67 {
    max-width: var(--page-width) !important;
}
}

 

Result here:

made4Uo_0-1685117710583.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

bibigab
Explorer
61 4 12

This is an accepted solution.

Thanks so much for keeping helping.

A great fan!

Eric

Bibigab

View solution in original post

Replies 15 (15)

NomtechSolution
Astronaut
1245 113 154
  1. Locate and click on the "Assets" folder, then open the "theme.scss.liquid" file for editing.
  2. Scroll to the bottom of the file and add the following CSS code:

 

@media screen and (min-width: 1024px) {
  .featured-banner {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
}
​

 

This CSS code targets the image within the "featured-banner" section and sets its maximum width to 100% of the container, allows the height to adjust automatically based on the image's aspect ratio, and uses the contain value for the object-fit property to maintain the image's proportions.

bibigab
Explorer
61 4 12

Thanks Nomtech but it does not work.

Bibigab

RhiRo
Shopify Partner
41 3 8

Hi Eric, 

 

You need to remove the max-width: 80% from the .banner class in the relevant css file (I believe section-image-banner.css ?) 

Screenshot 2023-05-26 at 14.38.37.png

And add the page-width class to that div in the liquid file

Screenshot 2023-05-26 at 14.38.31.png

 

Screenshot 2023-05-26 at 14.41.53.png

Hopefully that makes sense, but if you need a more in depth explanation, please let me know! 

bibigab
Explorer
61 4 12

Hi RhiRo,

In which liquid file do I have to insert page width?

Tks

Eric

Bibigab
RhiRo
Shopify Partner
41 3 8

Hi Eric, 

image-banner.liquid on the first div in there, where the line starts 

<div id="Banner-{{ section.id }}class="banner .....
bibigab
Explorer
61 4 12

This is were I copied page-width:

<div
id="Banner-{{ section.id }}"
class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}page-width"
>

And I deleted the 80% which was on my image banner custom CSS section.

No success, no visible change?

Best

Eric

Bibigab
RhiRo
Shopify Partner
41 3 8

Hi Eric,
You could just change the max width to 120rem by adding this at line 30 of the liquid file (or if you have added css, within the style section that is not in the if statement) 

@media screen and (min-width: 750px) {
#Banner-{{ section.id }}{
max-width: 120rem;
}
}

 

 

RhiRo
Shopify Partner
41 3 8

But if you still did want to use the page-width class, you would need to add a space before it 🙂 

bibigab
Explorer
61 4 12

Thanks RhiRo but you loose me.

I will sleep on it.

Best

Bibigab
RhiRo
Shopify Partner
41 3 8

Ok, well if there is anything in particular that you don't understand/would like more explanation on, please let me know 🙂 

The easiest option would just be to change the
max-width: 80%; to max-width: 120rem; 

made4Uo
Shopify Partner
3856 717 1200

This is an accepted solution.

Hi @bibigab 

 

You can use the code below. 

 

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below

@media screen and (min-width: 750px) {
div#Banner-template--18974826660176__b5925a07-95a1-451c-8cbd-e25842240e67 {
    max-width: var(--page-width) !important;
}
}

 

Result here:

made4Uo_0-1685117710583.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
bibigab
Explorer
61 4 12

This is an accepted solution.

Thanks so much for keeping helping.

A great fan!

Eric

Bibigab
RhiRo
Shopify Partner
41 3 8

But this only works for this banner with this section Id?

If Eric decides to add another banner surely they’ll have the same problem next time? 

bibigab
Explorer
61 4 12

Thanks RhiRo but this is is a fit for purpose solution and I know what to do should I create another banner.

Best

Eric

Bibigab
made4Uo
Shopify Partner
3856 717 1200

Sorry @bibigab. I misunderstood. You can use the code below to apply to all banner instead. Please replace the code provided earlier.

 

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below

 

@media screen and (min-width: 750px) {
.banner[id^="Banner-template"] {
    max-width: var(--page-width) !important;
    margin: auto;
}
}

 

 

 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free