Free space around slider when screen is scaled down ?

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 ??