Solved

Can I move mobile banner image text to the top of the page?

LIVINGSIMPLY
Shopify Partner
66 0 12

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. 

 

Shoplivingsimply.com

 

LIVINGSIMPLY_1-1692080023632.png

 

 

 

Living Simply is a company developed to give back, and help others.
Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
7678 1493 1496

This is an accepted solution.

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

Screenshot 2023-08-15 at 15.20.54.png

 

 

 

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 15 (15)

Moeed
Shopify Partner
3769 953 1185

Hey @LIVINGSIMPLY 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.banner__box {
    padding-bottom: 24rem !important;
}
</style>

Moeed_0-1692082008266.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

Dan-From-Ryviu
Shopify Partner
7678 1493 1496

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

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

LIVINGSIMPLY
Shopify Partner
66 0 12

Thank you, when put the code in it made my screen render different, it is not as tall?

Living Simply is a company developed to give back, and help others.
LIVINGSIMPLY
Shopify Partner
66 0 12

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.

IMG_3910.WEBP

Untitled (1920 × 1080 px) (1920 × 875 px) (910 × 875 px) (1600 × 619 px).jpg

..

Living Simply is a company developed to give back, and help others.
Dan-From-Ryviu
Shopify Partner
7678 1493 1496

This is an accepted solution.

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

Screenshot 2023-08-15 at 15.20.54.png

 

 

 

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

LIVINGSIMPLY
Shopify Partner
66 0 12

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?

 

Living Simply is a company developed to give back, and help others.
Dan-From-Ryviu
Shopify Partner
7678 1493 1496

Yeah

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

LIVINGSIMPLY
Shopify Partner
66 0 12

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.  

Living Simply is a company developed to give back, and help others.
Dan-From-Ryviu
Shopify Partner
7678 1493 1496

Happy I could help <3!

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

LIVINGSIMPLY
Shopify Partner
66 0 12

I tried this, and it looks better but the button is not moving. 

 

LIVINGSIMPLY_0-1692090123555.png

 

Living Simply is a company developed to give back, and help others.
LIVINGSIMPLY
Shopify Partner
66 0 12

Actually it made the other banner look funky, and this banner is the same size as homepage banner and same section?

 

LIVINGSIMPLY_0-1692089474409.png

 

 

Living Simply is a company developed to give back, and help others.
Dan-From-Ryviu
Shopify Partner
7678 1493 1496

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

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

LIVINGSIMPLY
Shopify Partner
66 0 12

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). 

Living Simply is a company developed to give back, and help others.
LIVINGSIMPLY
Shopify Partner
66 0 12

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?

Living Simply is a company developed to give back, and help others.
LIVINGSIMPLY
Shopify Partner
66 0 12

Sir, I just noticed after making the banner changes, this happened to my multi column content.  How can I get it back under the image?

 

LIVINGSIMPLY_0-1692131563376.png

 

Living Simply is a company developed to give back, and help others.