WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Free space around slider when screen is scaled down ? (12 posts)

  1. dt125x
    Member
    Posted 5 months ago #

    Why is that happening ?

    http://www.apartmentsinmakarska.net/

  2. ElectricFeet
    Member
    Posted 5 months ago #

    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.

  3. dt125x
    Member
    Posted 5 months ago #

    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 ?

  4. ElectricFeet
    Member
    Posted 5 months ago #

    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.

  5. dt125x
    Member
    Posted 5 months ago #

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

  6. d4z_c0nf
    Member
    Posted 5 months ago #

    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.

  7. dt125x
    Member
    Posted 5 months ago #

    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

  8. dt125x
    Member
    Posted 5 months ago #

    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;
    }
    }
  9. d4z_c0nf
    Member
    Posted 5 months ago #

    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 :P

  10. dt125x
    Member
    Posted 5 months ago #

    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 ;)

  11. d4z_c0nf
    Member
    Posted 5 months ago #

    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".

  12. dt125x
    Member
    Posted 5 months ago #

    Yeah I figure it out on harder way ;)

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.