Changing banner box location on desktop and mobile versions.

Store Design
1

I want to move the text boxes in the first image banners on the home and impact pages down by a certain amount. Additionally, I would also like to move the same text boxes down a different distance in the mobile version.

Any help is appreciated.

Thank you

url: sisubracelets.us

2

Hi @sanjivp27

Kani_0-1662776079082.png
Kani_0-1662776079082.png1893×739 158 KB

Kani_1-1662776095376.png
Kani_1-1662776095376.png610×717 186 KB

1: Online store > themes > Actions > Edit code > Section > image-banner.liquid

2:

replace

#Banner-{{section.id}} {
    top: -110px;
}

with

#Banner-{{section.id}} {
    top: -110px;
    padding-top: 110px;/* add */
}
3

Hi @sanjivp27 ,

Go to Assets > base.css and paste this at the bottom of the file:

/* code desktop */
@media only screen and (min-width: 750px) {
	#Banner-template--15453100146745__165525969688027bd0 .banner__box {
		margin-top: 10%;
	}
}
/* code mobile */
#Banner-template--15453100146745__165525969688027bd0 .banner__box {
	margin-top: 10%;
}

You can change the number to your liking.

Hope it helps!

4

It works. Thank you for the help.