CSS works only on smaller screens – woocommerce product price 2
- This topic has 7 replies, 2 voices, and was last updated 3 years ago by
Zex.
-
AuthorPosts
-
April 29, 2020 at 1:28 pm #26487
Diego Letelier
ParticipantHello
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,
DiegoApril 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;
}
RegardsRegards,
DiegoApril 29, 2020 at 1:34 pm #26488Zex
ModeratorHi,
I just tested the code and it works.
Maybe I don’t understand your question then…
Can you send me a screenshot?Regards
April 29, 2020 at 6:01 pm #26493Zex
ModeratorHello, 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
April 29, 2020 at 6:01 pm #26490Diego Letelier
ParticipantSure
Here is on desktop:
https://prntscr.com/s825fuOn smaller views:
https://prntscr.com/s826jaRegards,
DiegoApril 29, 2020 at 6:01 pm #26489Diego Letelier
ParticipantHello,
I send you imgs.
The code on customizer on desktop view:
https://prntscr.com/s825fuSame thing on smaller views (it actually behaves like that).
Regards,
DiegoApril 30, 2020 at 12:21 pm #26505Diego Letelier
Participantok it works!
Yeah, I don´t understand how the bracket should go, someday I will 🙂
best regards.
April 30, 2020 at 12:58 pm #26507Diego Letelier
ParticipantJust 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?
Than you!
April 30, 2020 at 5:00 pm #26512Zex
ModeratorHi, 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.
-
AuthorPosts
- You must be logged in to reply to this topic.