Home Forums Pro Themes Pet Business Pro Home Page Slider Image

This topic contains 12 replies, has 3 voices, and was last updated by  wensolutions 2 weeks, 3 days ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #91233

    Deborah Parks
    Participant

    I’m having trouble getting my images to show correctly on the Home page slider. I’m using 1200 X 600 images, but the tops are getting cut off. I’ve added the below Custom CSS, but it didn’t help. My site is: http://www.caninekarma.org/

    #header-image {
    max-height: 95px;
    min-height: 20px;
    overflow: hidden;
    background-color: #fff;
    }

    .has-banner-image#header-image {
    min-height: 20px;
    }

    #header-image img {
    width: 100%;
    vertical-align: middle;
    }
    #header-image.no-banner-image {
    min-height: 300px;
    max-height: 300px;
    }

    #91246

    wensolutions
    Keymaster

    Hello @dlnsparks,

    The issue has arisen because the image is displayed as the background image.

    However as a fix, please add below-given CSS by going to Admin Panel > Appearance > Customize > Additional CSS.

    .slick-slide {
        height: 100vh;
    }

    Hope this helps.

    Best Regards!!

    #96289

    Deborah Parks
    Participant

    What should the correct size of the slider images be? We feel like the slider is taking up too much of the front page real estate. Is there a way to minimize this?

    #96304

    wensolutions
    Keymaster

    Hello @dlnsparks

    On inspecting your site URL, we found that the image size of the slider is fine and the space occupied seems to be normal.

    However, if you are willing to use a small size image in the slider, use image with small height as the slider size will adjust in accordance to the size of the uploaded image itself.

    Also, please once verify by using the image of 1421px x 560 px as the accurate size is 1421px x 560 px.

    Hope this helps,

    Let us know for any further query/consfuion,

    Best Regards!!

    #96331

    Deborah Parks
    Participant

    We want the sliders to be the same height as the header image on the other pages. I’ve uploaded the same size image (1200 X 528), but I can’t get it to resize correctly.

    #96411

    wensolutions
    Keymaster

    Hello @dlnsparks.

    Please upload the image of height approx 400 px which is equal to the height of the header images displayed in the single pages.

    Hope this helps.

    Let us know if that works or not?

    Thank you.

    #96599

    Deborah Parks
    Participant

    I give up! I’ve uploaded the slider images as 800X400, but it doesn’t help! What am I doing wrong?

    Here’s all of the code I have in CSS:

    .home #features {
    padding-bottom: 0;
    }
    .slick-slide .overlay {
    opacity: 0 !important;
    }
    .slick-slide {
    height: 80vh;
    }
    #client-testimonial .overlay {
    opacity: 0.0 !important;
    }
    .home #our-services .entry-content p {
    display: none;
    }
    .featured-image {
    display: none;
    }
    .page-id-2123 div#page-site-header {
    display: none;
    }
    @media only screen and (max-width: 767px){
    #featured-slider {
    display: none;
    }
    }

    I put the code in for
    .slick-slide {
    height: 80vh;
    }
    simply to try to reduce the height of the slider. But I just can’t get it to not take up so much real estate. Ugh!

    #96623

    wensolutions
    Keymaster

    Hello @dlnsparks,

    Once please try by adding below given CSS.

    #featured-slider article {
        padding: 200px 0;
        background-position: 100%;
        height: auto;
    }

    Hope this helps.

    Regards!!

    #96929

    Deborah Parks
    Participant

    My entire code is:
    .home #features {
    padding-bottom: 0;
    }
    .slick-slide .overlay {
    opacity: 0 !important;
    }
    #featured-slider article {
    padding: 200px 0;
    background-position: 100%;
    height: auto;
    }
    #client-testimonial .overlay {
    opacity: 0.0 !important;
    }
    .home #our-services .entry-content p {
    display: none;
    }
    #contact-us .overlay {
    opacity: 0.2;
    }
    #contact-us .section-title {
    color: #000;
    font-weight: bold;
    }
    #contact-us .section-subtitle {
    color: #000;
    }
    .contact-address ul.contact-details {
    color: #000;
    }
    .contact-form {
    background-color: #fff;
    }
    .featured-image {
    display: none;
    }
    .page-id-2123 div#page-site-header {
    display: none;
    }
    @media only screen and (max-width: 767px){
    #featured-slider {
    display: none;
    }
    }

    As you can see (http://www.caninekarma.org/) this definitely didn’t help.

    What am I doing wrong?

    #96947

    fuchsr
    Participant

    May I chime in? I’m just another user of this theme and have struggled with this issue as well.

    If I understand your problem it’s not the size of the slider window (which looks fine on your site) but what is show in the slider, particularly the tops (and bottoms) getting cut off.

    I actually don’t think it’s an issue with CSS or with this theme but it’s a “feature” of responsive design. Think about it this way: You have a picture at a certain size that looks perfect (and the images on your site do, when I make the window small). Now you make your window wider. For the image to fill the width of the window AND maintain a given height AND NOT get distorted it has to cut off bottom and top pieces of the image. Otherwise you’d either have to allow the picture to grow in height or allow the image to get stretched out to the sides.

    I don’t see how any CSS can “fix” this.

    My “solution” to this: Make sure the images you use have their focus point centered and have plenty of stuff that can be cut off at the bottom and top. (See my site lrcgb.org).

    #96952

    Deborah Parks
    Participant

    Dang! Thank you! Why didn’t I think of this?!!

    #96973

    wensolutions
    Keymaster

    Hello @fuchsr

    Thank you so much for your help.

    For any further query/confusion, feel free to write us back.

    Best Regards!!

    #96975

    wensolutions
    Keymaster

    Hello @dlnsparks

    For any further query/confusion, feel free to write back to us.

    Best Regards!!

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.