Hi, im trying to reduce the height of the container as its just wasted space as seen below in green. how do i make it be exactly like the same height as the shop now button? my site is combatica.co.uk but this theme is not published yet so can be viewed here https://42tvec657rvjnldl-59424374992.shopifypreview.com
1 Like
Hi @COMBATICAUK
Do you want to remove the space only or you like same with the desktop view?
Check this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.banner__box {
padding: 0rem 3.5rem;
}
}
- And Save.
- Result:
My advice:
- Same Instruction.
@media only screen and (max-width: 749px){
.banner__box {
padding: 0rem 3.5rem;
position: absolute;
bottom: 30px;
}
}
- And Save.
- Result:
Lesser white space.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
i acutally prefer your idea about having it like desktop view but would also like the shop now button to be a bit smaller when in mobile view
@Made4uo-Ribe hi, any other ideas to fix it please?
Can you try this code again.
@media only screen and (max-width: 749px){
.banner__box {
padding: 0rem 3.5rem !important;
position: absolute !important;
bottom: 30px !important;
}
}
And Save. If still didnt work, can you share the preview again. The preview expired already. Thanks!
1 Like
Nice! that worked perfectly. Final question, do you know how to make the shop now button a little smaller in mobile view only as it takes a lot of space as seen below
Yes, I can help but I would need the preview again. Thanks!
1 Like
sure thing, here you go https://d5353vc9gbsbvh6s-59424374992.shopifypreview.com
Hi did u manage to take a look at tackling this issue?
1 Like
oh, this is crazy. I reply this post since yesterday.
Sorry for that Im not sure what is happening but its the 2nd post now. That Ive reply and yet not posted. Please, check this one. Thanks!
Same Instruction.
@media only screen and (max-width: 749px){
a.button.button--primary {
padding: 0 1.5rem !important;
min-height: 3.5rem !important;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
Man, you’re a legend! Wish i could double like! Please keep an eye out for me if i have issues in the future 
1 Like
Welcome! Yes sure.
Hey Made4uo-Ribe can you help me too please coz i m facing the same issue
Hi @LisseStitch
Yeahm sure but i would need your store URL. Would you mind to share? Thanks!
Sure no problem
Here is my store url - https://ef5850-d3.myshopify.com/
Hey Made4uo-Ribe any updates regarding my problem ?
Hi,
If i didnt reply for 1-2days you should not wait for me. I missed some of the notification, sorry for that.
Check this one then.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 989px){
.banner__content.banner__content--bottom-center.page-width {
position: absolute;
bottom: 0;
}
.banner__box.content-container.content-container--full-width-mobile.color-scheme-5.gradient {
background: transparent;
}
}
And Save.
Result:
Hi,
Will this reflect a small button in the bottom center for mobile layout as well ?
In mobile layout the slideshow is not reflecting and its hidden behind the upper poster .
Can you please have a look ?