Solved

How to display banner text with button on mobile version?

MrGolfer_
Excursionist
18 0 8

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!

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
5966 1435 1772

This is an 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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


View solution in original post

Replies 9 (9)

Made4uo-Ribe
Shopify Partner
5966 1435 1772

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)

Made4uoRibe_0-1697485102284.png

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.
Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


MrGolfer_
Excursionist
18 0 8

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
Shopify Partner
5966 1435 1772

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:

Made4uoRibe_0-1697488807141.png

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


MrGolfer_
Excursionist
18 0 8

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
Shopify Partner
5966 1435 1772

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. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


MrGolfer_
Excursionist
18 0 8

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

Screenshot 2023-10-16 at 5.26.20 PM.png

Made4uo-Ribe
Shopify Partner
5966 1435 1772

This is an 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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


MrGolfer_
Excursionist
18 0 8

Thank you so much!  You're awesome 😀 

MrGolfer_
Excursionist
18 0 8

Thank you so much!