CSS works only on smaller screens – woocommerce product price

[Diego Letelier]

Hello,

I managed (with your precious help!) Have change the colours of the offer price, but works only on smaller screens.

This is the CSS code that I am using right now, all of it…

#top-bar{
background-color:#443748!important;
}
#top-social ul li a {
color:white!important;
}
.agama-primary-nav,
#agama-logo img{
float: none!important;
display:inline!important;
}
.agama-primary-nav {
float: none!important;
left:23%!important;
max-width: 65%!important;
}
@media (max-width:992px) {
.sticky-header.sticky-header-shrink {
position: fixed!important;
height:80px!important;
}

nav.mobile-menu {
position: fixed!important;
width: 100%;
top: 80px!important;
height: 220px!important;
overflow: auto!important;
z-index:9999;
}
@media only screen and (min-width: 992px) {
#agama-logo .logo-mobile{
display: none;
}
}
@media only screen and (max-width: 992px) {
#agama-logo .logo-desktop{
display: none;
}
}

/*Button background and text color*/
.wp-block-button__link{
background-color: #ffffff!important;
color:black!important;
}
/*Button background and text color-ON HOVER*/
.wp-block-button__link:hover{
background-color: white!important;
color:green!important;
}
/*The offer price color and background*/
@media (max-width: 992px){
ins{
background: white!important;
color:blue!important;
}
}
/*Woocommerce buttons translations*/
.show_details_button,.agama-cart-item-desc,.agama-cart-action a.button{
text-indent: -9999px;
}
/* View Cart */
.agama-cart-action a.button:after{
text-indent: 0px;
float: left;
content: ‘VER CARRITO’;
}
/* Cart is empty */
.agama-cart-item-desc:after{
text-indent: 0px;
float: left;
content: ‘CARRITO VACÍO’;
}
/*Details*/
.show_details_button:after{
text-indent: 0px;
float: right;
font-family: “Raleway”;
line-height: 13px;
content: ‘\f0f6” Detalles ‘;
}
#footer-wrapper .site-info p { text-align:right; }
.wpforms-container { font-family: raleway ; }

Regards,
Diego

[Zex]

Hello, Diego!

try to replace this part of code :

/*The offer price color and background*/
@media (max-width: 992px){
ins{
background: white!important;
color:blue!important;
}
}

with the following:

/*The offer price color and background*/
ins{
background: white!important;
color:blue!important;
}

Regards

[Diego Letelier]

Hello Zex,

I´ve tried, no luck. What else can I do?

Regards,
Diego

[Author]

Posts