[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

Hi @bibigab You can use the code below. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code Go to Asset folder and open the base.css file At very end of the code, add the code below @media screen and (min-width: 750px) { div#Banner-te…

Locate and click on the “Assets” folder, then open the “theme.scss.liquid” file for editing. 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 C…

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 2…

Thanks Nomtech but it does not work.

Hi RhiRo, In which liquid file do I have to insert page width? Tks Eric

Hi Eric, image-banner.liquid on the first div in there, where the line starts <div id="Banner-{{ section.id }}" class="banner .....

This is were I copied page-width: And I deleted the 80% which was on my image banner custom CSS section. No success, no visible change? Best Eric

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

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

Thanks RhiRo but you loose me. I will sleep on it. Best

Ok, well if there is anything in particular that you don’t understand/would like more explanation on, please let me know :slightly_smiling_face: The easiest option would just be to change the max-width: 80%; to max-width: 120rem;

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

Store Design

RhiRo May 26, 2023, 4:46pm 14

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?

Topic		Replies	Views
Match the image banners width to the page size Dawn theme Store Design design , customizations	1	45	December 19, 2023
Make image banner responsive - Refresh theme Store Design css , shopify-themes	6	156	June 18, 2024
URG Dawn Homepage Image Banner Width (center) Store Design troubleshooting	5	74	September 10, 2022
Image Banner wider than rest of page - Dawn theme Store Design design	5	64	October 3, 2024
Page banner not taking 100% of the page's space Store Design design , customizations , troubleshooting	6	54	October 15, 2024

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

Related topics