How can I lower the position of the 'Shop Now' button on mobile?

[conceptnox]

Hi, 

I'm looking to lower the position of this "discover" button lower on mobile to fill the screen more

However, 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!

[made4Uo]

Hi @conceptnox,

Try the instructions below. I would recommend to use a background color that will stand out for your button. I also added the code for mobile view. 

1. In your Admin store, click Online store > Themes
2. Go to the theme you want to edit, click Actions > Edit code
3. In your Asset folder, open the base.css and add the code below

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

[conceptnox]

Hey, thanks.

I tried this but it shifted up rather than shifting down

[made4Uo]

Hi @conceptnox,

Are you talking about my code? This is what I have after I added my code

[conceptnox]

Hey, thanks for helping. You're right that does happen on the desktop version, however on the mobile version, it actually goes higher than before. My website views are mostly mobile so sadly this is quite annoying. Would you know how to fix this?

Thank you so much

[KetanKumar]

@conceptnox 

sorry for that issue can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-image-banner.css ->paste below code at the bottom of the file.

.banner__content.banner__content--middle-center {justify-content: center;}