Archived topic
Page hero button CSS does not work on mobile
7 replies · Started by Daniel on August 16, 2021
Hi guys,
I am having a problem with my page hero button. I followed the instructions on the website to create a page hero with elements and finally made it look the way I want it to look. I also styled the button with CSS. It looks totally fine on desktop, but in the mobile version it only shows the standard configuration for buttons. I changed the standard values and the button color changes. So it seems CSS does not address this button for whatever reason.
What do I have to do that the button on mobile will accept my CSS?
Thanks Daniel
CSS used
.button.ghost, .button.ghost:visited {
background: transparent;
color: #ffffff;
border: 2px solid #FFF;
border-radius: 7px;
}
.button.ghost:hover,
.button.ghost:active {
background: #FFFFFF;
color: #222222;
border: 2px solid transparent;
}
Hi there,
The styling doesn't apply on mobile because you have an @media rule for it.
You have this on your CSS @media (min-width: 769px) which basically tells the browser to apply it on breakpoints not smaller than 769px. Mobile's breakpoint starts at 768px so the CSS applied on the media rule won't apply to mobile.
You can remove the @media rule for the .button.ghost, .button.ghost:visited selector so the button's styling applies to all viewports. :D
Thanks Elvin. I understand what you say, but I need some advice on how to remove the @media rule please
Thanks Elvin. I understand what you say, but I need some advice on how to remove the @media rule please
You have it added on Appearance > Customize > Additional CSS. You can remove it from there. :)
haha, ok! First of all: that works! Great :)
But: I added the @media rule for the other button because I don't want it do display on mobile ;) What would I have to add so the @media rule only applies to that specific button but not to any other?
But: I added the @media rule for the other button because I don’t want it do display on mobile 😉 What would I have to add so the @media rule only applies to that specific button but not to any other?
There's a syntax issue with it.
It's missing a }.
For best practices, @media rules should always have a delimiter } so its scope is clear.
Example:
@media(){
your CSS here.
}Thank you so much. It can be so easy :)
No problem. Glad to be of any help. :D
