front page callout button

It looks nice on web browser after changing  css customization, but looks awful on mobile as it's not resized.

How can I solve this? here I attach my css file

Comments

  • .top-contact-detail-section { padding:2px 0 ; } 
    .contact-area { padding:2px 0 ; } .contact-area h4 { font-size:16px } 

    .navbar-default .navbar-nav > li > a { font-size: 22px; } 

    .navbar-right{ margin-top:16px;}

    @media (max-width: 480px) {.contact-area h4 { font-size: 16px !important;} 

    .contact-icon i { font-size: 24px;} 
    .top-contact-detail-section { padding: 3px 0 !important;} 
    .contact-area{ padding: 2px 0 !important; }} 

    @media (max-width: 480px){ .section-heading-title h1 { font-size: 30px !important; } } 

    .service-area p { font-size: 16px; } 
    .service-area h3 { font-size: 24px; }

    .callout-btn1 {    font-size: 35px;    padding: 30px 50px;}
    .callout-btn2 {    font-size: 35px;    padding: 30px 50px;}

    .portfolio-section {    padding-top: 0px ! important; }

    .testimonial-section .overlay {    padding: 30px 0;}


    .testimonial-section {    background-repeat: no-repeat !important; }

    .testimonial-section {    background-repeat: no-repeat !important;   background-attachment: scroll !important; }

  • Hi masaists

    Kindly add the below css code in custom css box.

    @media (max-width: 768px){   

    .callout-btn1 {
         font-size: 20px !important;
         padding: 14px 35px !important;
        }  
    .callout-btn2 {
        font-size: 20px !important;
        padding: 14px 30px !important;
    }

    Let me know did it work.

    Thanks
  • Hi @prajapati

    your support was perfect!!

    Thanks
This discussion has been closed.