On my blog, I have customized the button tag in two different ways. Here is the code for both:
.button1 {
border: 2px solid rgb(0, 0, 0);
box-sizing: inherit;
background-color: #ffffff;
margin-right: 1.7px;
color: black;
font-size: 18px;
font-weight: 980;
padding: 6px 32px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px;
font-size: 16px;
font-family: domine;
display: inline-table;
}
.button2 {
border: 2px solid rgb(255, 87, 51);
background-color: #FF5733;
box-sizing: inherit;
margin-right: 1.7px;
color: white;
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px;
font-size: 16px;
font-family: domine;
display: inline-table;}
.button2:hover {
background-color: #FF5733;
color: #000000;}
However, the customization I applied is not showing up on mobile view, it defaults back to the original styling. How can I ensure that these customizations are visible on mobile devices? Please assist me with a solution.
For reference, here's the code snippet I used:
@media screen and (max-width: 390px) {
.button2 { padding: 6px 32px;width: 84.6px;font-size: 16px;display: inline-table;
}
@media screen and (max-width: 390px) {
.button1 { width: 76.6px;}
}}
I attempted to implement these CSS changes in the blogger blog settings, however, they seem to have no effect on the mobile view. Can you please guide me on where I might be going wrong or offer suggestions on how to fix this issue?