Different Slider heights in different pages

  • Well I have kinda done it with this coding but just wondering if I need to set the height for other media too

    /* Adjust the Slider Height */
    #customizr-slider.carousel .item {
    height: 300px;
    min-height: 300px;
    line-height: 300px;
    }
    @media (max-width: 1200px){
    #customizr-slider.carousel .item {
    height: 231px;
    min-height: 231px;
    line-height: 231px;
    }
    }
    @media (max-width: 979px){
    #customizr-slider.carousel .item {
    height: 186px;
    min-height: 186px;
    line-height: 186px;
    }
    }
    @media (max-width: 767px){
    #customizr-slider.carousel .item {
    height: 185px;
    min-height: 185px;
    line-height: 185px;
    }
    }

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

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

    /* Adjust HOME page Slider Height */
    .page-id-246 #customizr-slider.carousel .item {
    height: 500px;
    min-height: 500px;
    line-height: 500px;
    }

    .page-id-323 #customizr-slider.carousel .item {
    height: 500px;
    min-height: 500px;
    line-height: 500px;
    }

    Well I want the Home pages (2 pages in different languages) to remain the default height and the other pages to 300px.

    The above coding does the trick but I want to ask is there anyway to combine the settings for page 246 and 323 into one entry.

    Second question is do I need to set @media ones for the HOME page also?

Viewing 3 replies - 1 through 3 (of 3 total)

  • To combine them, try this:

    .page-id-246 #customizr-slider.carousel .item, .page-id-323 #customizr-slider.carousel .item {
height: 500px;
min-height: 500px;
line-height: 500px;
}

    Yes…you would also need to include @media queries since the ones you entered for the 300px adjustment would take over…

    However…I do not know if this is proper or if it will work in this case, but you could play around with the :not() css selector…see this…could possibly save some css coding…

    Thread Starter mongulu

    (@mongulu)

    Thanks your code works perfectly. (Tried .page-id-246, .page-id-323 #customizr-slider.carousel .item) that’s whay it didnt work for me.

    Tried to play around with the :not() css selector but it didnt work
    for example:

    #customizr-slider.carousel .item:not(.page-id-246) {
    height: 300px;
    min-height: 300px;
    line-height: 300px;
    }

    Page 246 still show up with height 300px :/

    Yes, but you can combine them so the media query for max 320px would be something like:

    @media (max-width: 320px){
    #customizr-slider.carousel .item {
        height: 84px;
        min-height: 84px;
        line-height: 84px;
    }
    .page-id-246 #customizr-slider.carousel .item,
    .page-id-323 #customizr-slider.carousel .item {
        height: 100px;
        min-height: 100px;
        line-height: 100px;
    }
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Different Slider heights in different pages’ is closed to new replies.