Hello,
I have added some CSS to style html buttons, color headlines, etc and none of it shows up on mobile. I’ve never had this happen to me in shopify, any ideas?
https://revel-girl.myshopify.com/
PW: revelgirl
1 Like
Hello @hellorisingtide
Glad to help you today.
Could you please share the code that you added then I can see and suggest something for you?
Best regards,
GemPages Support Team
It’s pretty much just the css for the buttons and I have this code in
different variations for different buttons:
.hero__link .btn–inverse {
background-color: #639EE3 !important;
border-radius: 30px;
box-shadow: #42EAAD 4px 4px 0 0;
color: #fff;
cursor: pointer;
display: inline-block;
font-weight: 600;
font-size: 18px;
padding: 0 18px;
line-height: 50px;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.hero__link .btn–inverse:hover {
background-color: #fff !important;
}
.hero__link .btn–inverse:active {
box-shadow: #422800 2px 2px 0 0;
transform: translate(2px, 2px);
}
@media (min-width: 768px) {
.hero__link .btn–inverse {
min-width: 120px;
padding: 0 25px;
}
.payment-buttons .shopify-payment-button__button–unbranded{
background-color: #FFB900 !important;
border-radius: 30px !important;
box-shadow: #950038 4px 4px 0 0 !important;
color: #fff;
cursor: pointer;
display: inline-block;
font-weight: 600;
font-size: 18px;
padding: 0 18px;
line-height: 50px;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.payment-buttons .shopify-payment-button__button–unbranded:hover{
background-color: #fff !important;
color: #000 !important;
}
.button-56 {
background-color: #00F2EA;
border-radius: 30px;
box-shadow: #08524D 4px 4px 0 0;
color: #fff !important;
cursor: pointer;
display: inline-block;
font-weight: 600;
font-size: 18px;
padding: 0 18px;
line-height: 50px;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.button-56:hover {
background-color: #fff;
color: #000 !important;
}
.button-56:active {
box-shadow: #422800 2px 2px 0 0;
transform: translate(2px, 2px);
}
@media (min-width: 768px) {
.button-56 {
min-width: 120px;
padding: 0 25px;
}
}
.button-55 {
background-color: #639EE3;
border-radius: 30px;
box-shadow: #42EAAD 4px 4px 0 0;
color: #fff !important;
cursor: pointer;
display: inline-block;
font-weight: 600;
font-size: 18px;
padding: 0 18px;
line-height: 50px;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.button-55:hover {
background-color: #fff;
color: #000 !important;
}
.button-55:active {
box-shadow: #422800 2px 2px 0 0;
transform: translate(2px, 2px);
}
@media (min-width: 768px) {
.button-55 {
min-width: 120px;
padding: 0 25px;
}
}
.button-75 {
background-color: #FFB900;
border-radius: 30px;
box-shadow: #950038 4px 4px 0 0;
color: #fff !important;
cursor: pointer;
display: inline-block;
font-weight: 600;
font-size: 18px;
padding: 0 18px;
line-height: 50px;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.button-75:hover {
background-color: #fff;
color: #000 !important;
}
.button-75:active {
box-shadow: #422800 2px 2px 0 0;
transform: translate(2px, 2px);
}
@media (min-width: 768px) {
.button-75 {
min-width: 120px;
padding: 0 25px;
}
}
The css button on the picture can only be visible on devices wider than 768px. But the mobilephone width is less than 768px, so the whole css code is invalid. This is why the button is not showing correctly.
Ok I removed that code but I still don’t see the CSS showing up.