front page picture( for slider)

How can I enlarge the picture size in terms of height? Especially as for smartphone size, I think main picture is too small so users cannot understand what homepage shows.

Comments

  • Hi masaists

    Kindly use the below css code for change the height of the slider image in homepage for the smartphone.

    For this Go to Appearance >> customizer >> header setting >> custom css box . 

    @media (max-width: 480px) {
    .homepage-mycarousel .carousel-inner > .item > img {
        height: 250px;
    }
    }


    Let me know did it work.

    Thanks

  • Hi prajapati(by the way, how can I set link on name like you did?)

    I followed as you told.
    It worked but as I imagined, the balance of picture got broken.
    (I wish I could have put picture here)

    But I guess there's no way to control that. Appointment theme is more like for web browsing but not mobile browsing.

    Masa 



  • Hi masaist

    Kindly share your site URL so we can take a look and assist you better.

    Thanks
  • Hi Prajapti,

    here is my URL

    you'll see the balance between the size of main picture and the size of header(phone, hours, email) is not beautiful..
    But I guess there's no way to make it better,,maybe resize the size of header smaller..

    Thanks

  • Hi masaist

    If you want to bigger height of the slider image in mobile version then you have to add large height of slider image. like 600px.

    for less height in header(phone, hours, email) in mobile version then add the following css code in custom css box.

    @media (max-width: 480px) {

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

    }

    Let me know your issue resolve.

    Thanks
  • Hi Prajapti,

    Your code worked well, thanks.

    And if possible, pls kindly gimme code to make "service setting title" smaller for mobile.

    Thanks
  • Hi masaist

    For this add the below css code in custom css box.

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

    Let me know did it work.

    Thanks
  • Hi Prajapti,

    Your code worked well again!! Thanks

    Thanks
  • Hi masaist

    Glad I was able to help. If you’re happy with our products and support, please leave us a kind review here:-https://wordpress.org/support/theme/appointment/reviews/?filter=5

    Have a great day!

    Let me know for further assistance.

    Thanks
This discussion has been closed.