CSS works only on smaller screens – woocommerce product price 2

[Diego Letelier]

Hello

The last code is not working, and the color prices are the same as before. The topic is #26431 , I will copy and paste over here:

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

April 22, 2020 at 8:45 pm#26432REPLY

Zex
Moderator
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

Regards,
Diego

[Zex]

Hi,

I just tested the code and it works.

https://prnt.sc/s7ydtj

Maybe I don’t understand your question then…
Can you send me a screenshot?

Regards

[Zex]

Hello, Diego!

You miss one bracket in your code, and that’s why the code doesn’t work properly.
Replace your Custom Codes with the following:

	#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*/
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 ; }

PS: Your last two posts have been marked as spam, so that is the reason I haven’t seen them.

Regards

[Diego Letelier]

Sure

Here is on desktop:
https://prntscr.com/s825fu

On smaller views:
https://prntscr.com/s826ja

Regards,
Diego

[Diego Letelier]

Hello,

I send you imgs.

The code on customizer on desktop view:
https://prntscr.com/s825fu

Same thing on smaller views (it actually behaves like that).

https://prntscr.com/s826ja

Regards,
Diego

[Diego Letelier]

ok it works!

Yeah, I don´t understand how the bracket should go, someday I will 🙂

best regards.

[Diego Letelier]

Just one more question…

I would like to have images with a minimum height so they look better on mobile. I am using elementor right now for this feature but it is a big plugin just for that.

I noticed that there is a class that you can set for the images, can you set a minimum height for specific images?

https://prntscr.com/s8k2yu

Than you!

[Zex]

Hi, Diego!

Yes, of course, you can add a class to an image and insert a minimum height value for it, but in that case, your image will not hold aspect ratio and will be distorted. As you can see from the screenshot, there are already options in the background to adjust the image size as you need without adding extra code.

https://prnt.sc/s8p9ra
https://prnt.sc/s8p5eu

[Author]

Posts