Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
I am having issues with overlapping on the full width banner on mobile, I have looked at the community but none of these solutions work. PLEASE HELP!
Solved! Go to the solution
This is an accepted solution.
let come: Sale channels -> Online Stores -> Themes -> choose your theme -> click Edit code.
Search file base.css then add that code to the end of this file:
@media screen and (max-width: 480px) {
.section-full-width-banner:has(.media > *)
.media-position--background
.section-full-width-banner__content {
padding-inline: 16px;
padding-block: 6px;
}
}
Please share that url to let me check then give you the solution
I see the text also overlay on image on desktop. is this your want or not?
no you see how it overlaps on the footer of the mobile website - see below:
I want to keep the desktop as is 🙂
Do you think it's ok?
Yes! I would prefer a tiny bit more of padding at the bottom but that is much better thank you - how do i do this?
This is an accepted solution.
let come: Sale channels -> Online Stores -> Themes -> choose your theme -> click Edit code.
Search file base.css then add that code to the end of this file:
@media screen and (max-width: 480px) {
.section-full-width-banner:has(.media > *)
.media-position--background
.section-full-width-banner__content {
padding-inline: 16px;
padding-block: 6px;
}
}
it worked! thank you so so much 🙂
sorry it worked for one page but not the bitesoft one - can you check?
Yes because the image below for bitesoft one low height:
@media screen and (max-width: 480px) {
.section-full-width-banner:has(.media>*) .media-position--background .section-full-width-banner__content p{
margin-block: 2px;
}
}
sorry but what do you mean? the images I have are the same size just look different.
oh the images same size but the long text of each different.
Is it working now?
ah yes I understand - I will leave it, still a lot better than before thanks again 🙂
Yes. I hope it better 😄
Please let me know if you need any assistance