I'm trying to create a slider component from zeto to use on my project. The problem I'm currently facing is that the slider has 0 height unless I set hardcoded height like height: 50rem;. I can't spot what's cauising this or why.
You can find working code snippet here: https://jsfiddle.net/fj640arc/1/
You should remove height: 50rem; on .slider CSS class to see how it looks. I shouldn't hardcode an height for sliders.
Also any help help would be appreciated on responsive images for this slider. How can I improve this slider images to be able to fit on the slider properly and not break it?
Thanks!
If you are looking to add responsive height sizing, try changing the height to use vh instead of rem. For example, you could use:
.slider {
max-width: 114rem;
height: 50vh;
position: relative;
box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.15);
}
vh stands for viewport height, and setting it at 50 will ensure your slider will always be at 50% of the height of the screen regardless of the particular dimensions of the screen.
If you are looking to implement responsive design further, you will need to consider various screen sizes.
Meta Tags
Including a meta tag will help you set the zoom level and adjust depending on the screen dimensions. The following meta tag is probably what you are looking for, but read more online:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Grid Layout and Flexbox
Next, I would look into how you lay out your screen. Two very great ways of doing this is by implementing grid layout or flex-box. W3Schools provides great information on these two techniques.
Media Queries
Finally, you can also include media queries to use certain CSS code depending on the screen dimensions. For example, this CSS code will run if the browser is 600px or smaller:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
You can use vh, em, and rem in your media queries as well if pixels are not what you would like to compare against.
When you position items, you take them out of the document flow.
You have to remove the
position: relative; declaration in the slider__item-list