How to display banner text with button on mobile version?

[MrGolfer_]

Hi Guys,

Can someone please give me the code to make my banner text with button show on the mobile version.  Right now it's only showing on the desktop.  My site is zerogravityrcs.com.  I am using the dawn theme.

Thanks!

[Made4uo-Ribe]

Hi @MrGolfer_ 

It seems like you button and title are hide on the mobile. Mostly in the mobile it will go automatically below the banner or video banner. 

like this(I colored the background so it would be visible)

This is the code. 

• 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 screen and (max-width: 767px){
.videoBoxInfoTitle, .videoBackground .videoBoxInfoBtn {
    display: inline-block !important;
}
.videoBackground .videoBoxInfo {
    background: aqua;
}
}

• And Save.

[MrGolfer_]

Thank you for your help, but this looks awful.  I would like it to sit on top the exact same way as the homepage please and thank you.

[Made4uo-Ribe]

Yeah, that is why I let you know so i can add changes. 

Check this one. Same Instruction.

@media screen and (max-width: 767px){
.videoBoxInfoTitle, .videoBackground .videoBoxInfoBtn {
    display: inline-block !important;
}
.videoBackground .videoBoxInfo {
    background: transparent;
    position: absolute;
    padding-bottom: 25px;
}
}
@media only screen and (max-width: 621px){
.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
    line-height: 1 !important;
}
}

And Save. 

Result:

[MrGolfer_]

Very close :).  Now can we make the font and shop now box a bit smaller.  Also push the "shop now" box up a big higher.

[Made4uo-Ribe]

Im not sure what size you like, but you can change it. 

The padding bottom you can adjust it.

Replace on this again. 

@media screen and (max-width: 767px){
.videoBoxInfoTitle, .videoBackground .videoBoxInfoBtn {
    display: inline-block !important;
    font-size: 30px !important; 
}
.videoBackground .videoBoxInfo {
    background: transparent;
    position: absolute;
    padding-bottom: 20% !important;
}
}
@media only screen and (max-width: 621px){
.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
    line-height: 1 !important;
}
}

And Save. 

[MrGolfer_]

SOO CLOSE!  Font is perfect, but shop now is HUGE lol.  Which code is the "shop now" box?  I will adjust it.

 

[Made4uo-Ribe · Accepted solution]

Add this one then. 

@media screen and (max-width: 767px){
.videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {
    padding: 8px 25px;
    font-size: 15px !important;
}
}

And Save. 

Please, dont forget to Like and Mark Solution to the post that helped you. Thanks!

[MrGolfer_]

Thank you so much!  You're awesome 😀 

[MrGolfer_]

Thank you so much!