How to overlay a 'shop all' button on an image?

Store Design
1

Looking to move a “shop all” button on top of an image, like an overlay. Site URL for front page is fidgetbest.com

(will be changed soon.) What code or something do I need to use?

HELP IMAGE.png
HELP IMAGE.png450×453 85.9 KB

2

Please add below css code in bottom of base.css file

@media screen and (max-width: 749px)
.banner–mobile-bottom:not(.banner–stacked) .banner__content {
position: absolute;
top: 70px;

}
@media screen and (max-width: 749px)

.banner__box.color-background-1 {
padding: 1rem;
width: auto;

}
Thank you.

3

Hi @Starter1 ,

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

@media screen and (max-width: 749px) {
	.banner--mobile-bottom:not(.banner--stacked) .banner__content {
		position: absolute !important;
		top: 50% !important;
		right: 12% !important;
		width: auto !important;
	}
	.banner--mobile-bottom:not(.banner--stacked) .banner__content .banner__box {
		padding: 0rem !important;
		width: auto !important;
	}
}

it will show like this:

Screenshot.png
Screenshot.png385×502 95.1 KB

Hope it helps!

1 Like
4

Great, Thanks for your help. Cheers

1 Like