WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Getting the Slider container to reduce height on the iPad (5 posts)

  1. Lancerubin
    Member
    Posted 6 months ago #

    I have had wonderful success in getting answers from the assembled brain trust on this forum, so I will see if my current conundrum has a solution. The home page looks just as I wish on Desktops, but when I view the same home page on an iPad, the large white spaces above and below the slider are preventing the text below the features pages images from showing without having to scroll. I understand that to fit the entire image on the smaller screen, the image height reduces (which is fine) , but I was hoping that the container would also be reduced in size to elimiate the large white spaces. I have placed both screen captures on the following link for you review.
    Thanks in advance. Lance

  2. rdellconsulting
    Member
    Posted 6 months ago #

    Firstly, read this @media snippet which will explain what you need to do.

    If not clear, come back with a site link and we'll help.

  3. Lancerubin
    Member
    Posted 6 months ago #

    As always, much thanks for your help. I am afraid I do not understand the @media snippet, thus my attempts to use it have failed. The site is http://www.kbla.com and the Slider container spacing looks great on a desktop computer, but on the iPad in vertical mode the Slider container does not contract in size even though the slider images do.

    http://www.kbla.com/wp-content/uploads/Capture-1.jpg
    is how the spacing looks on the iPad and
    http://www.kbla.com/wp-content/uploads/Capture-2.jpg
    is the goal.
    Thanks

  4. ElectricFeet
    Member
    Posted 6 months ago #

    You need to take the CSS that you have already written that works on the desktop, namely:

    #customizr-slider.carousel .item {
        height: 375px;
        line-height: 375px;
        min-height: 375px;
    }

    and wrap it in a media query for devices smaller than 980px (say). So it will become:

    @media (max-width: 979px) {
        #customizr-slider.carousel .item {
            height: 375px;
            line-height: 375px;
            min-height: 375px;
        }
    }

    Then change those figures significantly downwards to remove the extra space you've added on smaller screens.

    You need to do this for all the sizes you want to change. Here is a full set of the ones used in Customizr. Pick the ones you want to change and use only those (you need to replace "ADD YOUR CSS" with valid CSS).

    @media (min-width: 1200px) {ADD YOUR CSS}
    @media (max-width: 1200px) {ADD YOUR CSS}
    @media (min-width: 980px) {ADD YOUR CSS}
    @media (max-width: 979px) {ADD YOUR CSS}
    @media (min-width: 768px) and (max-width: 979px) {ADD YOUR CSS}
    @media (max-width: 767px) {ADD YOUR CSS}
    @media (min-width: 481px) and (max-width: 767px) {ADD YOUR CSS}
    @media (max-width: 480px) {ADD YOUR CSS}
    @media (max-width: 320px) {ADD YOUR CSS}
  5. Lancerubin
    Member
    Posted 6 months ago #

    The brain trust comes through again. Thanks to rdellconsulting and ElectricFeet. Marked resolved.

Reply

You must log in to post.

About this Theme

About this Topic