Solved

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

bibigab
Explorer
59 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
3818 715 1132

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

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

View solution in original post

bibigab
Explorer
59 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 148
  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
59 4 12

Thanks Nomtech but it does not work.

Bibigab

RhiRo
Shopify Partner
41 3 7

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
59 4 12

Hi RhiRo,

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

Tks

Eric

Bibigab
RhiRo
Shopify Partner
41 3 7

Hi Eric, 

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

<div id="Banner-{{ section.id }}class="banner .....
bibigab
Explorer
59 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 7

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 7

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

bibigab
Explorer
59 4 12

Thanks RhiRo but you loose me.

I will sleep on it.

Best

Bibigab
RhiRo
Shopify Partner
41 3 7

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
3818 715 1132

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

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
bibigab
Explorer
59 4 12

This is an accepted solution.

Thanks so much for keeping helping.

A great fan!

Eric

Bibigab
RhiRo
Shopify Partner
41 3 7

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
59 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
3818 715 1132

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

 

 

 

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!