"Post Comment" button CSS edit works on desktop but not on mobile.

Hi Andrew,

Issues like this are usually related to @media rules.

Can you check if these CSS are placed inside an @media rule for desktop/tablet?

We can help you check things out of you can link us to a sample page in question.

Hmmm, I'm not sure how to even check that. Here's an example of a page where this issue is: https://prudentreviews.com/homemade-stain-remover/

If you scroll all the way to the bottom, right before the footer you'll see the "post comment" button. It looks good on desktop but not mobile. I really appreciate you taking a look.

I've found the CSS w/ the issue and it is indeed wrapped in a @media (min-width:769px) which is the media rule for tablets and desktops.

What I wasn't able to trace back was the origin of where the code was added because the site's assets are cached.

But the CSS is basically this or something that looks similar:

@media (min-width: 769px){
.comments-area button, .comments-area input[type=button], .comments-area input[type=submit], .comments-area a.button {
    color: #fff;
    background-color: #2253f2;
    border-radius: 10px;
    font-weight: 700;
}
}

You can scan through the place where you've added the CSS and check for this one and move .comments-area button, .comments-area input[type=button], .comments-area input[type=submit], .comments-area a.button {...} out of the @media rule.

That was it. Thank you! I originally added the CSS to my child theme files but I moved it to the "Additional CSS" area and that did the trick.

For future reference, how do I move CSS out of a media rule? This is the CSS above the snippet for the post comment button before I moved it to the "additional css" area.

@media (min-width: 769px) {
.right-sidebar #primary {
max-width: calc(100% - 340px);
}

.right-sidebar #right-sidebar {
min-width: 300px;
width: 300px;
margin-left: 40px;
}
}

@media (max-width: 768px) {
.generate-columns {
padding-left: 0 !important;
}
}

h2 a {
color: #111111 !important;
}

h2 a:hover {
color: #2253f2 !important;
}

.wp-show-posts a, .wp-show-posts a:visited {
color: #111111 !important;
}

.wp-show-posts a:hover {
color: #2253f2 !important;
}

.wp-show-posts-image.wpsp-image-left {
float: left;
margin-right: 0;
}

.wpsp-image-meta-wrap {
position: relative;
}
.wpsp-image-meta-wrap .wp-show-posts-image.wpsp-image-left {
float: none;
}

.wpsp-image-meta-wrap .wp-show-posts-image img {
vertical-align: bottom;
font-size: 0;
}

.wpsp-image-meta-wrap .wp-show-posts-entry-meta {
position: absolute;
bottom: 0;
left: 0;
}

.wpsp-image-meta-wrap .wp-show-posts-entry-meta a {
color: #fff !important;
background-color: #000;
padding: 0.25em 0.75em;
font-size: 12px;
}
.wpsp-image-meta-wrap .wp-show-posts-entry-meta a:hover {
background-color: #2253f2 !important;
}

.wp-show-posts-image.wpsp-image-left {
margin-bottom: 1em;
}

.main-navigation .menu > .menu-item > a::after {
content: "";
position: absolute;
right: 50%;
left: 50%;
color: #16a286;
top: 5px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 3px;
background-color: currentColor;
transition: 0.3s width ease;
}

.main-navigation .menu > .menu-item:hover > a::after,
.main-navigation .menu > .menu-item > a:focus::after,
.main-navigation .menu > .current-menu-item > a::after{
width: 90%;
color: #16a286;
}

.site-header, #mobile-header .inside-navigation {
box-shadow: 0px 6px 12px #eeeeee;
}

@media(min-width: 769px) {
body.archive p#breadcrumbs {
padding-left: 20px;
}
}

p#breadcrumbs {
font-size: 14px;
color: #000000;
}

p#breadcrumbs a {
font-size: 14px;
color: #000000;
}

p#breadcrumbs a:hover {
font-size: 14px;
color: #2253f2;
}

.container-link {
position: relative;
opacity: 1.0;
transition: all 0.2s ease-in;
}
.container-link a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container-link:hover {
opacity: 0.8;
}

.entry-meta {
font-size: 13px;
}

#mobile-header.has-branding .menu-toggle {
order: -1;
margin-right: auto;
}

.generate-back-to-top {
bottom: 140px;
}

@media (max-width: 768px ) {
.generate-back-to-top {
display: none;
}
}
@media (min-width: 769px) {
nav .main-nav .mega-menu {
position: static;
}
.main-navigation .sub-menu {
border: 1px solid #16a286
}
.main-navigation .sub-menu > li:not(:last-child) > a {
border-bottom: 1px solid #d7d8d9;
}
.main-navigation .sub-menu > li > a {
margin-left: 10px;
margin-right: 10px;
}

For future reference, how do I move CSS out of a media rule? This is the CSS above the snippet for the post comment button before I moved it to the “additional css” area.

Try checking the scope of the @media rule first. The scope is basically the opening and closing curly bracket.

Example: @media (max-width:768px){ CSS here }

The { indicates the start of the @media's scope and the } marks the end of the @media's scope.

The "CSS here" is usually were the CSS are placed. anything inside the { } are within the scope.

Now, moving the CSS out of the media rule's scope is basically cutting and pasting it outside the @media (...){ ... }.