How can I lower the 'discover' button position on mobile view?

Store Design
1

Hi,

I’m looking to lower the position of this “discover” button lower on mobile to fill the screen more. I’ve already posted this question but the suggest answers were the following:

@made4Uo suggested the following code:

.banner__content.banner__content–middle-center.page-width { align-items: flex-end; } @media only screen and (max-width: 750px) { .banner__content.banner__content–middle-center.page-width { position: absolute; bottom: 15px; } }

Although this did indeed lower the button on desktop, it highered it on the mobile version.

Is it even possible to lower it lower than the actual image on which it is? It’s already at the bottom on the mobile version.

Otherwise, is there another way of achieving a look where the button is between the image and the bottom?

conceptnox_0-1656261774719.png
conceptnox_0-1656261774719.png229×400 96 KB

All the help I’ve found on forums has said to edit the theme.scss.liquid which I do not have in my files.

Is there a different way of editing the code so that this button moves down? I feel like the website would look a lot better. Link is conceptnox.com

Thanks!

2

Hi @conceptnox ,

You can adjust the bottom code. The code below will adjust in the middle of the line (not sure exactly on where you want it)

@media only screen and (max-width: 750px) {
.banner__content.banner__content--middle-center.page-width {
    position: absolute;
    bottom: -22px;
}
}

See the code customization result

made4Uo_0-1656281562935.png
made4Uo_0-1656281562935.png1237×1700 422 KB

3

Hey, thanks again but here it lands up being even higher than before. Is it not possible to lower its position?

Thanks for helping so much by the way, really means a lot.

4

Hi @conceptnox ,

I am not sure really on where you want the button, but I move it in between the video and the image. See image below. If this is not what you want, it would be best to provide an image of the location.

@media only screen and (max-width: 750px) {
.banner__content.banner__content--middle-center.page-width {
    position: absolute;
    bottom: -27%;
}
}

made4Uo_0-1656282238384.png
made4Uo_0-1656282238384.png1625×1620 524 KB

5

Hi, thanks again for your answer. When I add this code, it doesn’t do anything! I’m very sorry, do you know how to fix this?

Also please give me your Venmo when this is done because you’ve been very helpful.