Is it possible to move the banner image text to very top of the page, and only effect the text on the mobile banner, not the desktop? Dawn 10. I want the shop all button to be where the delicious text is now.
Hey @LIVINGSIMPLY
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
You can do that by adding this CSS code at the bottom of your base.css file
@media screen and (max-width: 600px) {
.banner__content { align-items: flex-start !important; }
.banner__buttons { margin-top: 1rem !important; }
}
Thank you, when put the code in it made my screen render different, it is not as tall?
No matter what I do, the purple image is not even mine and it renders great, mine is the exact same size, but I do not get all the image, I do not understand why.
..
You can add those CSS code to make your image appear in correct size
@media screen and (max-width: 600px) {
.media>img,
.banner__media { position: relative !important; }
.banner__content { position: absolute !important; }
}
And remove this code from previous code
.banner__content { align-items: flex-start !important; }
So I remove what I just put in-
@media screen and (max-width: 600px) {
.banner__content { align-items: flex-start !important; }
.banner__buttons { margin-top: 1rem !important; }
}
and add-
@media screen and (max-width: 600px) {
.media>img,
.banner__media { position: relative !important; }
.banner__content { position: absolute !important; }
}
correct?
Yeah
Great, thank you! I need to pay someone to clean my code up, I feel like I have added so many lines of code. I am sure it is not very efficient.
1 Like
Happy I could help <3!
Actually it made the other banner look funky, and this banner is the same size as homepage banner and same section?
You can apply the code to your homepage banner only by using this code
@media screen and (max-width: 600px) {
#Banner-template--19931114438948__image_banner .media>img,
#Banner-template--19931114438948__image_banner .banner__media { position: relative !important; }
#Banner-template--19931114438948__image_banner .banner__content { position: absolute !important; }
}
The code I changed in the section image_banner won’t effect that section anytime I use it? How would I implement what we just did with home page to the other banners I have on the site (other pages).
I am trying to have the same setting for every image_banner section, since they will all be the same size and layout, so is there a way to make the changes automatic in every image_banner section I have on my site?
