Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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:
This is an accepted solution.
@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.
Thanks Nomtech but it does not work.
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!
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
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
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)
But if you still did want to use the page-width class, you would need to add a space before it 🙂
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 🙂
The easiest option would just be to change the
max-width: 80%; to max-width: 120rem;
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:
This is an accepted solution.
Thanks so much for keeping helping.
A great fan!
Eric
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?
Thanks RhiRo but this is is a fit for purpose solution and I know what to do should I create another banner.
Best
Eric
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;
}
}
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024