Everytime i switch the lay out in my hero section. The text gets messed up over my product photo. i cant make them go individualy in the right spot in the savor theme even when i click the vertical on mobile part. When i fix either the desktop or the mobile. the other one gets messed up
Hey @afterlight
Welcome to the community! Just to be clear, can you tell me that where exactly you want the text to be on desktop and where exactly you want it on mobile? In that way, I can provide you an accurate code that works.
Also, share your store URL and frontend password (if enabled).
Best,
Moeed
If you can’t properly format your section for both mobile and desktop,
consider using two sections instead – How to upload video on website banner for mobile and dekstop - #5 by tim_1
The linked topic is about video, but solution can be applied to any kind of section.
The benefit is that you can fine tune each of those sections specifically for their target screen size.
Hi @afterlight,
Go to online store > edit theme > select hero section and in custom css paste this
@media screen and (max-width: 749px) {
.hero__container {
display: flex !important;
justify-content: flex-end !important;
padding-bottom: 20px !important;
min-height: 500px !important;
}
.hero__content-wrapper {
background: rgba(0, 0, 0, 0.7) !important;
padding: 15px !important;
width: 100% !important;
}
.hero__content-wrapper *,
.hero__content-wrapper a {
color: #ffffff !important;
}
}
Save
https://afterlight-2104.myshopify.com/ i posted how id like both mobile and desktop to look
Try this code – can add it to the “Custom CSS” of the hero section.
And remove the placeholder third block after “recover brighter” and “hydration+ recovery…”
.hero__content-wrapper {
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
@media (max-width:750px) {
.hero__content-wrapper {
justify-content: flex-start;
padding-top: 50%;
}
}
Hey @afterlight
Add this code in the Custom CSS of your hero section from theme customization.
@media screen and (min-width: 768px) {
.hero__content-wrapper.layout-panel-flex.layout-panel-flex--row.mobile-column.section-content-wrapper.page-width {
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
}
}
RESULT:
Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.
Best,
Moeed
Hi @afterlight,
I finally managed to fix the layout issue for the Savor theme on mobile devices. The problem was that the theme’s base layout was forcing the text to center vertically, which ended up covering the product photo on mobile screens.
By using custom CSS with absolute positioning, we can force the text wrapper into the empty sky area at the top of the mobile hero image, left-align it nicely, and keep the product packets completely clean and visible.
Here is the exact code that worked for me. You can paste this into your base.css file:
@media screen and (max-width: 749px) {
#shopify-section-template--20716856967256__hero_RkimKJ .hero,
#shopify-section-template--20716856967256__hero_RkimKJ .hero__container {
position: relative !important;
}
#shopify-section-template--20716856967256__hero_RkimKJ .hero__content-wrapper {
position: absolute !important;
top: 150px !important;
bottom: auto !important;
transform: none !important;
height: auto !important;
}
}
If this code helps resolve your issue as well, please don’t forget to mark this post as the Solution!