Shop Categories

X

CSS works only on smaller screens – woocommerce product price 2

Home Forums Agama Pro CSS works only on smaller screens – woocommerce product price 2

Topic Resolution: Resolved
  • This topic has 7 replies, 2 voices, and was last updated 3 years ago by Zex.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #26487
    Diego Letelier
    Participant

    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

    #26488
    Zex
    Moderator

    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

    #26493
    Zex
    Moderator

    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

    #26490
    Diego Letelier
    Participant

    Sure

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

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

    Regards,
    Diego

    #26489
    Diego Letelier
    Participant

    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

    #26505
    Diego Letelier
    Participant

    ok it works!

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

    best regards.

    #26507
    Diego Letelier
    Participant

    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!

    #26512
    Zex
    Moderator

    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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.