5 replies · opened Oct 8, 2021
Im trying to use the sliders in the following files -
http://themes.semicolonweb.com/html/canvas/block-hero-9.html
http://themes.semicolonweb.com/html/canvas/block-hero-17.html
Im looking to reduce the height of this slider/carousel. Currently its occupying full screen in a laptop browser. I want to reduce the height to about 60% of the current height (for web browsers / laptops ).
The sizing looks ok in mobile devices.
Please tell me how to do it ?
Hello,
Simply find and change the .min-vh-md-100 Class to .min-vh-md-60 Class. You can find the Height Utility Classes here: http://docs.semicolonweb.com/docs/utility-classes/heights/ .
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
I changed the .min-vh-md-100 to .min-vh-md-60.
That solved part of my problem. Now the slider takes 60% of the browser window (height wise).
I also want the slider element to also occupy a maximum width of 80% of the browser window. How do I achieve that ?
For mobile devices, I want the slider element to occupy exactly 100% of screen both in width and height.
Hello,
Consider using the following CSS code:
[ch_pre type="css"]@media (min-width: 992px) {
.block-hero-9 {
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
}[/ch_pre]
This should work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
You dint answer the second part of the question -
For mobile devices, I want the slider element to occupy exactly 100% of the screen both in width and height.
So basically the entire slider element (image and text) should fit entirely in the mobile screen, without the user needing to scroll in either direction.
How do I achieve that ?
Hello,
The Codes we have provided you above already makes the Slider 100% Width on Mobile Devices. However, if you are looking to keep the Grid alignment intact, you can simply replace all occurrences of .col-*-5 or equivalent Classes within the .slider-element DIV to just .col-5 Classes. In short, simply remove the -{breakpoint} identifier from all the .col-* Classes within the .slider-element DIV.
This will work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard