Problem Displaying the Slider Image properly on homepage

edited October 2018 in Busiprof
why is image display so big, not like the one in the dummy ?
please check out the attachment and the below link:
centralPictureDisplayedBad.png
3M

Comments

  • Hi
    Thanks for asking query again .
    You uploaded 1920*1271 px size image . That's why its showing big image . 
    For better slider layout , kindly upload 1920*600 px size image . 

    Let us know for any confusion . 

    Thanks 
    Akhilesh
  • last time you said it's 1920*1271, not 1920*600?
  • event I use a photo with the size 1920*600, it's right now still too big to display. will you check it out? t hanks.Steven from China
  • Hi 
    You may  upload your required  height size image .As your need .

    Thanks 

  • ok,understand, I will try then.
    meanwhile,
    would you please kindly follow up another ticket here:

    thanks
    Steven
  • one more thing to follow up here,
    however,
    the slider image displays on mobile not well, actually its size is too small? any possible to make it appear bigger on mobile? thanks. Steven
  • Hi 
    To change slider height in mobile device . Add the below css code inside the custom css box .

    @media only screen and (max-width: 480px) and (min-width: 200px) { 
    .flexslider .slides img {
      height: 300px;
    }
    }

    Let us know for further assistance . 

    Thanks
    Akhilesh

  • great, it works, and I change 300px to 200px, it display better for me, thanks,
    however,
    can I ask if we can make the text in the box above the slider images to display a little bit bigger on mobile?
  • Hi 
    For this add the below css code inside the custom css box . 

    @media only screen and (max-width: 480px) and (min-width: 200px) { 
    .slide-caption h2 {font-size: 15px ! important;} 
    .slide-caption p {font-size: 10px ! important;  }
    }

    Change font size as your need . 

    Thanks 
    Akhilesh
  • ok, better now, but can we have a little bit wider line there also?
  • Hi 
    Where did you want wider line ,  Send me the snapshot by indicating area on which you want wider line . 

    Thanks
    Akhilesh
  • sorry, not wider line, but a bit more line height, you may kindly look into the attached snapshot where I expected the line-height a little bit more. can we do that?
    beingHeldbackforRegistrationforCodecanyon.png
    188K
  • Hi 
    Your snapshot did not showing slider related content , its showing something else .
    So Confirm us, Are you want much line height  for slider box description text ?

    Thanks 
  • Yes, I want much line height  for slider box description text.
  • Hi 
    For this Use below css code inside the custom css box . 

    @media only screen and (max-width: 480px) and (min-width: 200px) { 
    .slide-caption p { line-height: 20px; }

    }


    Change line height value as your need . 

    Thanks 
    Akhilesh
  • got it and did as told.
    so I just want to confirm, if when I receive codes provided by you and your colleague, regarding custom css,  what I need to do is just add them into the custom css box (Customizing ▸ General settings ▸ Custom CSS  ), line by line, without doing any other thing?
    like below:

    .page-title h2 {
        display: none;
    }
    .testimonial-scroll .section-title-mini .txt-color{display:none;}
    .page-template-service-template .testi-nav {
        float: none;
        text-align: center;
    }
    @media only screen and (max-width: 480px) and (min-width: 200px) { 
    .flexslider .slides img {
      height: 200px;
    }
    @media only screen and (max-width: 480px) and (min-width: 200px) { 
    .slide-caption h2 {font-size: 13px ! important;} 
    .slide-caption p {font-size: 8px ! important;  }
    }
    @media only screen and (max-width: 480px) and (min-width: 200px) { 
    .slide-caption p { line-height: 13px; }
    }
    }
    .page-template-aboutus .testi-nav {
        float: none;
        text-align: center;
    }
  • Hi 
    You can sort the above css code inside the custom css box instead of above . 

     

     .page-title h2 {
        display: none;
    }
    .testimonial-scroll .section-title-mini .txt-color{display:none;}
    .page-template-service-template .testi-nav {
        float: none;
        text-align: center;
    }

    @media only screen and (max-width: 480px) and (min-width: 200px) { 
    .slide-caption h2 {font-size: 13px ! important;} 
    .slide-caption p {font-size: 8px ! important;  }
    .flexslider .slides img {height: 200px;}
    .slide-caption p { line-height: 13px; }
    }

    .page-template-aboutus .testi-nav {
        float: none;
        text-align: center;
    }

    Thanks 
  • ok, thank you very much. 
This discussion has been closed.