How to change features of the banner in mobile version?

Store Design
,
1

Hi, how can I change the color of the letters of the head banner, especially the buy button, frame other background pictures (relative to the desktop), and adjust the dimension vertically (so that does occupy all the space)?

Only for the mobile version

site: dentalgoodbuys.com

2

Hi @NGM2022 ,

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Add this CSS at the bottom

Online Store ->Theme ->Edit code

Assets → base.css

@media screen and (max-width: 749px) {

.banner--small:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {

    min-height: 50rem !important;

}

h2.banner__heading.h1 {

    color: brown !important;

}

.button.button--secondary {

    color: brown !important;

}

.banner__text.body {

    color: brown !important;

}

}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

3

thank you! I tried to reduce even more vertical dimensions under 20rem but it doesn’t change. Do you also know how to do that? and also, how can I set a background photo for the banner that is only for mobile?

4

Hi @NGM2022 ,

This is Victor from PageFly - Shopify Page Builder App., I’d like to suggest this idea:

I found a way to get this working you can try with this code:

Add this css at the bottom

Online Store ->Theme ->Edit code

Assets → base.css

@media screen and (max-width: 749px) {

.banner--small:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {

    min-height: 20rem!important;

    height: 20rem !important;

}

}

please add background-image as usual and then use this code to make it only show on mobile:

@media only screen and (min-width: 767px) {

  "class contains background-image" {

    display: none;

  }

}

Hope you find my answer helpful!

Best regards,

Victor | PageFly