Decrease slider size
-
Hi
How do I decrease the size of the content slider (both dimensions), without apparently cropping the image (does not matter if the image is smaller)
thanks
The blog I need help with is: (visible only to logged in users)
-
I’m not seeing a content slider on your site right now. Can you give me a link to the page that has it?
-
I remove it every time I stop working on the page, till I got everything done
Do u need to see the slider or is it just the css code?
-
-
Give this a try and see what you think. In my testing it seems to work for all screen sizes. As you can see, I’ve made a good number of changes to get the image to show in full and get rid of all the extra whitespace above the image and also above the title/menu on smaller screens.
.featured-slider .featured-image { background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; } .verticalize-container::before { display: inline; } .featured-slider-wrap { margin-top: 150px !important; } @media screen and (max-width: 768px) { .featured-slider-wrap { margin-top: 0 !important; } } @media screen and (max-width: 991px) { .featured-slider-wrap { margin-top: 50px !important; } } -
Thanks, but the slider does not seem to change size in my laptop. I am sending you sceenshots of my site and of the Eris demo, both taken from my screen
https://www.dropbox.com/sh/jvw8ono04vqjdv2/AACJe3L6k5uZNtdqEEsBA1ZXa?dl=0
-
See my comment here: https://en.forums.wordpress.com/topic/sidebar-in-eris-theme?replies=5#post-2900710. Fix the labels in your custom CSS and things will then work.
-
Perfect, thanks
Last one. Is this the smaller it can get? Because I am decreasing the 768px and 991px but there is no difference
-
The 768 and 991 pixel values in the media query have to stay as they are overriding styling in media queries in the original CSS.
We can make the slider images smaller with the following, but Eris is quite complex and getting it all to look right and good with changes like this is more than a little challenging.
.featured-slider .slick-current .featured-image { transform: scale(.5); } .admin-bar .featured-slider-wrap { height: 430px !important; } -
-
- The topic ‘Decrease slider size’ is closed to new replies.