How to apply a css button style to image banner of main page only in dawn theme

[monomgroup]

Hello,

im using the dawn theme. i do have a code to change the button of the image banner in the way I want it

.button {
border: none;
color: white;
padding: 240.5px 165px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; !important;
}

I have placed this in the bottom of the base.css and it affects also the button of the sales page, which is not what I wish to have. How do I apply this amendment to the image banner of main page only ?  Many thanks for any leads.

Cheers,

monomgroup

[LitExtension · Accepted solution]

Hi @monomgroup,

Please change all code:

.banner__buttons .button {
  border: none;
  color: white;
  padding: 240.5px 165px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px; !important;
}

Hope it helps!

[Kani]

Hi @monomgroup 

you can use liquid code to control which page should not include that css code.

but what is your sales page type? is collection or page?

collection

{%- unless collection.handle contains 'sale' -%}
    css code here
{%- endunless -%}

 page

{%- unless page.handle contains 'sale' -%}
    css code here
{%- endunless -%}

[LitExtension · Accepted solution]

Hi @monomgroup,

Please change all code:

.banner__buttons .button {
  border: none;
  color: white;
  padding: 240.5px 165px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px; !important;
}

Hope it helps!

[monomgroup]

@LitExtension yes that worked! Thanks a lot!

@Kaniappreciate your reply!

[LitExtension]

Hi @monomgroup,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

[monomgroup]

Hello,

I have a follow up question. How do I change this code, so that it applies to desktop mode only and have separate padding values for mobile mode?

.banner__buttons .button {
  border: none;
  color: white;
  padding: 240.5px 165px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px; !important;
}

Thanks for any leads,

monomgroup

[LitExtension · Accepted solution]

Hi @monomgroup,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
	.banner__buttons .button {
	  padding: 240.5px 165px !important;
	}
}

You can change the value for it, it will work fine only on mobile.

[monomgroup]

Thanks a lot that could solve it.  It is overlapping with the logo in the header though regardless of any value we put it. We're trying now to change the size of the logo that's in the center of the header to about 50 percent - only on mobile. Appreciate any help.

Cheers

[LitExtension]

Hi @monomgroup,

Are you looking for help with your header logo?

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

[callum146]

Hi there, I am trying to do the same, with my image banner button, it comes up with a background with the button, 2 buttons, and no way to change the positioning,  although I just want a simple button over the banner image saying " SHOP ALL", what code would I need to do so? I am also unsure where to enter the code and what to delete, etc, could you show a reference of how to do so? Greatly appreciate any help what so ever really struggling on this one.