Some CSS code not working.

Some of the CSS for my website is not working. Most lines are working but a few do not. is there anything wrong with these sections:

@media only screen and (max-width : 1132px) and (min-width : 1024px){
   body .nectar-slider-wrap div.swiper-slide .content h2 {
       font-size: 20px!important;
       color: #AEA2B0
       line-height: 22px!important;
       margin-bottom: 2px;
       letter-spacing: -0.5px;
   }

   body .nectar-slider-wrap div.swiper-slide .content p span {
       font-size: 15px!important;
       line-height: 20px!important;
       padding-bottom: 7px;
   }
   body .nectar-slider-wrap div.swiper-slide .content p {
       font-size: 15px!important;
       line-height: 20px!important;
       padding-bottom: 7px;
   }
   body .nectar-slider-wrap div.swiper-slide .button a {
       font-size: 14px!important;
       padding: 14px 14px !important;
       font-style: bold; !important;
       border: 2px solid #AEA2B0;
       border-radius: 5px 5px 5px 5px !important;
   }

   body .nectar-slider-wrap .swiper-slide .content {
       bottom:  -130%;
       margin-left:  -2% !important;
   }

The second to last line (bottom: -130%:wink: doesn't work.

@media only screen and (max-width : 735px) and (min-width : 1px){
   body .nectar-slider-wrap div.swiper-slide .content h2 {
       font-size: 20px!important;
       color: #AEA2B0
       line-height: 22px!important;
       margin-bottom: 2px;
       letter-spacing: -0.5px;
   }

   body .nectar-slider-wrap div.swiper-slide .content p span {
       font-size: 15px!important;
       line-height: 20px!important;
       padding-bottom: 7px;
   }
   body .nectar-slider-wrap div.swiper-slide .content p {
       font-size: 15px!important;
       line-height: 20px!important;
       padding-bottom: 7px;
   }
   body .nectar-slider-wrap div.swiper-slide .button a {
       font-size: 5px!important;
       padding: 5px 5px !important;
       font-style: bold; !important;
       border: 5px solid #AEA2B0;
       border-radius: 5px 5px 5px 5px !important;
   }

   body .nectar-slider-wrap .swiper-slide .content {
       margin-left: -140px !important;
       top: 230px !important;
   }
}

This portion of ths above code does not seem to work:
body .nectar-slider-wrap div.swiper-slide .button a {
font-size: 5px!important;
padding: 5px 5px !important;
font-style: bold; !important;
border: 5px solid #AEA2B0;
border-radius: 5px 5px 5px 5px !important;
}
Thanks in advance.

Dion

  • Nahid

    Hey Dion Kara !
    Hope you are having a great day!

    Well, I can't really help you properly until you mention what you want to do with the code specifically. From my observation of the provided code, here are some suggestions.

    @media only screen and (max-width : 1132px) and (min-width : 1024px){
       body .nectar-slider-wrap div.swiper-slide .content h2 {
           font-size: 20px!important;
           color: #AEA2B0
           line-height: 22px!important;
           margin-bottom: 2px;
           letter-spacing: -0.5px;
       }
    
       body .nectar-slider-wrap div.swiper-slide .content p span {
           font-size: 15px!important;
           line-height: 20px!important;
           padding-bottom: 7px;
       }
       body .nectar-slider-wrap div.swiper-slide .content p {
           font-size: 15px!important;
           line-height: 20px!important;
           padding-bottom: 7px;
       }
       body .nectar-slider-wrap div.swiper-slide .button a {
           font-size: 14px!important;
           padding: 14px 14px !important;
           font-style: bold; !important;
           border: 2px solid #AEA2B0;
           border-radius: 5px 5px 5px 5px !important;
       }
    
       body .nectar-slider-wrap .swiper-slide .content {
           bottom:  -130%;
           margin-left:  -2% !important;
       }

    This bunch of code doesn't seem to have a closing bracket. Try replacing it with the following:

    @media only screen and (max-width : 1132px) and (min-width : 1024px){
       body .nectar-slider-wrap div.swiper-slide .content h2 {
           font-size: 20px!important;
           color: #AEA2B0
           line-height: 22px!important;
           margin-bottom: 2px;
           letter-spacing: -0.5px;
       }
    
       body .nectar-slider-wrap div.swiper-slide .content p span {
           font-size: 15px!important;
           line-height: 20px!important;
           padding-bottom: 7px;
       }
       body .nectar-slider-wrap div.swiper-slide .content p {
           font-size: 15px!important;
           line-height: 20px!important;
           padding-bottom: 7px;
       }
       body .nectar-slider-wrap div.swiper-slide .button a {
           font-size: 14px!important;
           padding: 14px 14px !important;
           font-style: bold; !important;
           border: 2px solid #AEA2B0;
           border-radius: 5px 5px 5px 5px !important;
       }
    
       body .nectar-slider-wrap .swiper-slide .content {
           bottom:  -130%;
           margin-left:  -2% !important;
       }
    }
    body .nectar-slider-wrap div.swiper-slide .button a {
           font-size: 5px!important;
           padding: 5px 5px !important;
           font-style: bold; !important;
           border: 5px solid #AEA2B0;
           border-radius: 5px 5px 5px 5px !important;
       }

    This chunk of codes has some issues too. Try replacing it with the following:

    body .nectar-slider-wrap div.swiper-slide .button a {
           font-size: 5px !important;
           padding: 5px 5px !important;
           font-style: bold !important;
           border: 5px solid #AEA2B0;
           border-radius: 5px 5px 5px 5px !important;
       }

    Let me know if this works. Thanks!

    Best,
    Nahid.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.