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

[bibigab]

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

[made4Uo · 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:

[NomtechSolution]

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]

Thanks Nomtech but it does not work.

[RhiRo]

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 ?) 

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

 

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

[bibigab]

Hi RhiRo,

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

Tks

Eric

[RhiRo]

Hi Eric, 

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

<div id="Banner-{{ section.id }}" class="banner .....

[bibigab]

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

[RhiRo]

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]

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

[bibigab]

Thanks RhiRo but you loose me.

I will sleep on it.

Best

[RhiRo]

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 · 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:

[bibigab · Accepted solution]

Thanks so much for keeping helping.

A great fan!

Eric

[RhiRo]

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]

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

Best

Eric

[made4Uo]

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;
}
}