I want my banner to be deeper down so when you load in on mobile you see more of the banner and less of just buttons in your face.
I want to get the mobile to look like this
Is there any way of getting it like this / closer like this.
Everytime I remove the “WELCOME TO” and “SPORTS CONNECTION” text/header it just makes the image banner even smaller. I want more focus on the background image, the buttons at the bottom and no white background on my header
Thank you for ANY help! Im not sure if this is possible, I am very new to building up websites.
If all that isn’t possible, can anyone help with atleast sizing down the size of the buttons, so they’re all the same size as the “SHOP CLOTHING” button where their isn’t any extra space to the left/write of the words. And then on Desktop, the “SHOP CLOTHING” has no gap between that and “SHOP SNEAKERS”
Thank you again.
Could you please share your store url? @sportsconnectio
Hi @sportsconnectio
Hope the following instructions can help you:
Step 1: Go to Admin → Online store → Theme > Edit code:
Step 2: Search base.css
Step 3: Add this code at the end of the fille
.page-width.scroll-trigger.animate--slide-in .banner__buttons:nth-child(4) {
display: block;
}
@media only screen and (max-width: 749px) {
.banner.banner--content-align-center.banner--content-align-mobile-center.banner--adapt.banner--adapt {
display: flex;
height: 72vh;
align-items: end;
}
div.banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in
> div
> div.banner__buttons.banner__buttons--multiple {
justify-content: center;
margin-bottom: -1rem;
}
div.banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in
> div
> div.banner__buttons.banner__buttons--multiple
> a {
max-width: 180px;
min-width: 180px;
}
}
I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.
Have a nice day sir!
Hi @sportsconnectio
Hope the following instructions can help you:
Step 1: Go to Admin → Online store → Theme > Edit code:
Step 2: Search base.css
Step 3: Add this code at the end of the file:
.page-width.scroll-trigger.animate--slide-in .banner__buttons:nth-child(4) {
display: block;
}
@media only screen and (max-width: 749px) {
.banner.banner--content-align-center.banner--content-align-mobile-center.banner--adapt.banner--adapt {
display: flex;
height: 72vh;
align-items: end;
}
div.banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in
> div
> div.banner__buttons.banner__buttons--multiple {
justify-content: center;
margin-bottom: -1rem;
}
div.banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in
> div
> div.banner__buttons.banner__buttons--multiple
> a {
max-width: 180px;
min-width: 180px;
}
}
You will get the result like this:
I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.
Have a nice day sir!
1 Like
You my friend are my favorite person of the week. Thank you! Worked like a charm!
Do you know if there is a way with code to make the header transparent? I’m not 100% sure if it would look better but if its possible I would like to try it out. Thank you again!
