Image Banner Button Mobile - Dawn

[kmacgillivray]

Hi there,

I am trying to modify the image banner button size in the Dawn theme, but only for mobile. On mobile, the button is too large. 

In section-banner-css I was able to modify the button/size padding entirely using the following code at the bottom:

}
.banner .banner__buttons .button{
padding: 4px 8px;
}

However, I require the padding to be different for mobile than it is for desktop. 

Cheers! 

Krista

[Simonsron]

@media screen and (max-width: 750px){
// mobile css here
}

You can put your mobile style inside this media query! Then put this code inside base.css!

[PageFly-Victor]

Hi

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media screen and (max-width: 767px){
.banner .banner__buttons .button{
padding: 4px 8px;
}
}
</style>

Hope this can help you solve the issue 

Best regards,

Victor | PageFly

[oscprofessional]

@kmacgillivray ,

share the store url ?

[SAN_MSWEB]

Hi @kmacgillivray 

I hope you are doing good and welcome to the Shopify Community!
I am Santanu from MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore).


Can you pls share your store URL with me, so i can check it once in my device and find the exact solution as per your theme layout.

Regards,

Santanu

[PageFly-Kate · Accepted solution]

Hi @kmacgillivray 

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:

You can use CSS media queries to target specific screen sizes and apply different styles for different devices. Here's an example:

@media (max-width: 767px) {
  .banner .banner__buttons .button {
    padding: 2px 4px;
  }
}

.banner .banner__buttons .button{
  padding: 4px 8px;
}

The media query @media (max-width: 767px) targets screens with a maximum width of 767px, which is commonly used as the breakpoint for mobile devices. The styles inside the media query will only be applied on mobile devices with a screen width less than or equal to 767px. The styles outside the media query will be applied on all other devices.

Hope my answer will help you.

[kmacgillivray]

Thank you -- appreciate the thorough explanation as someone new to CSS! I was able to resolve this with some of your code, although I use the max width to do the following to get it to work:

@media (min-width: 768px) {
.banner .banner__buttons .button{
padding: 30px 50px;
top: 20px;
right: 5px;
}
}

It doesn't seem to wanna work on mobile when I use:

@media (max-width: 767px) { .banner .banner__buttons .button { padding: 2px 4px; } }

[PageFly-Kate]

Hi @kmacgillivray 

It sounds like you're on the right track! It's possible that there are other styles conflicting with your media query. Make sure to include your media query styles after any styles that they might be conflicting with, and to use specific selectors. Additionally, you may want to use the !important rule in your media query styles to ensure that they take precedence over other styles:

@media (max-width: 767px) {
  .banner .banner__buttons .button {
    padding: 2px 4px !important;
  }
}

@media (min-width: 768px) {
  .banner .banner__buttons .button {
    padding: 30px 50px;
    top: 20px;
    right: 5px;
  }
}

If that still doesn't resolve the issue, you may want to try using developer tools in your browser to inspect the element and see what styles are being applied to it.