CSS not showing on mobile browsers

Shopify Discussion
1

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

2

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

3

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;
}
}

4

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.

eason_feng_0-1670296746619.png
eason_feng_0-1670296746619.png422×465 54.4 KB

5

Ok I removed that code but I still don’t see the CSS showing up.