WordPress.org

Support

Support » Themes and Templates » Customizr » Free space around slider when screen is scaled down ?

Free space around slider when screen is scaled down ?

Viewing 11 replies - 1 through 11 (of 11 total)
  • If you take out your custom styles for .carousel .item and #customizr-slider and add:

    .attachment-slider-full {
        vertical-align: top;
    }

    you’ll see that it doesn’t look as bad.

    I have this code for getting carousel smaller : /*Slider size*/
    .carousel .item {
    line-height: 350px;
    overflow: hidden;
    margin-left:auto;
    margin-right:auto;
    min-height: 350px;
    }

    I want it to be smaller… but in the same time can it look at least a little better when scaled down ? Is there any css for solving this problem ?

    I make mine smaller on big viewports (greater than 1200px) with:

    @media (min-width: 1200px) {
        /*Stop the slider growing too much*/
        #customizr-slider {
            max-width: 1170px;
            margin-left:auto;
            margin-right:auto;
            }
    }

    (I chose 1170px because that’s how big my pics are.)

    Change the value to suit yours. If you want the rule to kick in at all viewport sizes, then take out the media query from the top and tail.

    This do not solve my problem… on small screen it makes too much free space… I assume there is no solution 😀

    Who wrote this in your custom css?

    .carousel .item {
    line-height: 350px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    min-height: 350px;
    }

    Let’s try deleting those
    line-height: 350px
    and
    min-height: 350px

    this way you’ll use default values.
    In customizr orange.css (which you are using) for “screen” width < 767px those values are 308px:

    @media (max-width: 767px){
    .carousel .item {
    line-height: 308px;
    overflow: hidden;
    min-height: 308px;
    }
    }

    and for 190px for screen width < 480px, are 190px.

    @media (max-width: 480px){
    .carousel .item {
    line-height: 190px;
    overflow: hidden;
    min-height: 190px;
    }
    }

    With the code you have in your custom css you force those values to be always 350px, you’re breaking slider responsiveness!
    Wanna change those default values? Wanna make it more responsive? Make your own rules overriding default for specific screen widths.
    But in order to achieve that, again, you have to understand media queries, it’s not that hard.

    Ok,those are original values you wrotted…

    I need height od 350px on bigger screen… This is most important thing to me…

    Is it possible to write a code which will hold it on 350px height on bigger screen and hold it normal on smaller screen ? So that it holds slider 350 but not effect its responsivnes ?

    And yes of course I have to learn media queries… Il try to understand it next days…

    Thanks

    I put those values in css and now it looks good enough for me 😉

    @media (max-width: 1690px){
    .carousel .item {
    line-height: 350px;
    overflow: hidden;
    min-height: 350px;
    }
    }
    
    @media (max-width: 1300px){
    .carousel .item {
    line-height: 300px;
    overflow: hidden;
    min-height: 300px;
    }
    }
    @media (max-width: 1060px){
    .carousel .item {
    line-height: 280x;
    overflow: hidden;
    min-height: 280px;
    }
    }
    
    @media (max-width: 767px){
    .carousel .item {
    line-height: 250px;
    overflow: hidden;
    min-height: 250px;
    }
    }
    
    @media (max-width: 480px){
    .carousel .item {
    line-height: 230px;
    overflow: hidden;
    min-height: 230px;
    }
    }

    Ok,those are original values you wrotted…

    who? don’t get

    Anyway glad to see you figured out how to use media queries and also backticks 😛

    Yeah, thank you d4z_c0nf I am a newbie so I learn while working on this… I was asking myself what are backsticks on first… But google always helps… well,not always as I am boring with questions to you also hehe

    Thanks 😉

    dt125x no problem, we all have to learn something.
    About backticks explanation, is here when you write a comment, under the text-area you can see:

    Put code in between backticks.

    Also, as I told you in that other post, you can use the buttons above the text-area named “code”.

    Yeah I figure it out on harder way 😉

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Free space around slider when screen is scaled down ?’ is closed to new replies.
Skip to toolbar