I'm currently trying to create a horizontal card row for my website. The cards have a little transition where they lightly rotate and raise on hover, like so:
I want to make the row scrollable on the horizontal axis to make it responsive, but after setting overflow-x: auto; on the container, I noticed that the cards now get clipped, making the hover effect look pretty bad.
I've tried setting overflow-y: visible; on the container but it has no effect. Is there any way I can keep my cards from clipping but still leave the container scrollable?? Thanks in advance for your help.
You should wrap the elements in 2 divs. The first and inner will have a width(for horizontal scroll) that is greater than the viewport. And the second and outer div, will have a width, that is exactly the same as the viewport. The second div will then have the property overflow-x: scroll; overflow-y: hidden and it should work.
Example:
body {
width: 100vw;
height: 100vh;
}
outer-wrapper {
width: 100vw;
height: max-content;
overflow-x: scroll;
overflow-y: hidden;
}
inner-wrapper {
width: 150vw;
height: 100px;
display: flex;
}
cards {
// what ever properties you want
}
Related
Here is the photo of the border of the body
As you can see the body is not at 100% height.
Here's the CSS codes of the HTML and Body
html{
height: 100%;
min-height: 100vh;
}
body{
height: 100%;
min-height: 100vh;
font-family: sans-serif;
min-width: 400px;
position: relative;
display: flex;
justify-content: center;
border: 5px solid black;
padding: 0;
margin: 0;
}
I tried putting the height of the html and body separately but it still didn't work. I tried searching and them saying make min-height and height at 100% or 100vh and so I did but it still didn't work. I think it is because those things that are over the body are overflowing from its container?
Edit: I forgot to add this but the reason why I want body to extend along with the overflow is because that left and right container is positioned as sticky. So I can't use overflow: hidden;
I can try putting the left and right container as position: fixed; but it does not take space so I have to resize everything and also I want to know what is happening so I can avoid this problem.
Here's the whole code
https://codepen.io/n01knowz/pen/qBpBapV
I'm new to CSS so I don't know if there's any writing problem there so please tell me what I can fix.
Update: Okay so the reason the body wasn't extending was because the container is overflowing and technically isn't getting any bigger and so the body isn't expanding because its child's height isn't expanding too. So that's the danger of using when you set the height of the container.
Solution: Just let the container's height be and let the child components of the container be the one to decide its height.
Add in the overflow attribute. Which can work more than one way.
If you want no scroll bar use hidden, if you want to keep the content you can use scroll.
body {
overflow: hidden; /*any content that would overflow would be hidden and there is no scroll bar, NOTE, this will not stop the containers from overflowing. */
overflow: scroll; /* this would place scroll bar once the content overflows */
overflow: auto; /*will only add the scroll bar only after content over flows but will not add if it the content does not overflow */
}
Here on this page I need to display the SPACIAL and RECOMMENDED section in in single line with horizontal-scroll.
My current css is
.box-product {
width: 100%;
overflow: auto;
}
I have tried like this
.box-product {
width: 100%;
height: 320px;
overflow-x: scroll;
overflow-y: hidden;
}
But it does not enable horizontal scroll, It still shows the vertical scroll.
Set width to .box-product equal to product width * product count. Nothing else.
Now, you have there width: 100%; (737px) and the default CSS behavior in this case is to break the content to another line. When you have there overflow: hidden, the second line is hidden.
Provide your box-product class width in pixel not in percentage. And than apply overflow:auto.
It will work.
Ex:
.box-product {
width: 100px;
overflow: auto;
}
And if you want only horizontal than add overflow-x:auto;
The easiest way to achieve this .box-product { width: max-content; } (modulo vendor prefixes).
Alternatively display: flex, since its children do not wrap by default.
Remove the width: 100% and make sure your content doesn't float.
I have two Elements horizontally aligned, and the left one is a list. If I add some items so that the list should start scrolling, the list just grows larger then my device height is and my second content on the right side scrolls away if I scroll the list downwards. So the list is more then 100% in height... Here is some code for you :
http://codepen.io/anon/pen/qhylB
As I have created this code I just noticed that my both divs don't scale to 100% of the device width. Could you explain me why?
It's because the scrollbar is on the body (or html for firefox I think). Instead you need to have the body's height fix to 100% and then move the scrollbar to the list container (33percent div):
http://codepen.io/jonigiuro/pen/JEkLH
html, body {
margin: 0px;
padding: 0px;
height: 100%;
max-height: 100%;
overflow: hidden;
}
.content33percent {
height: 100%;
max-height: 100%;
overflow: scroll;
}
i changed your 66% to a fixed position, now when you scroll down it looks like you are scrolling the list when you are actually scrolling the whole document, this way you can apply the scrolling over the complete document:
http://codepen.io/anon/pen/KLzvo
.content66percent {
background-color: blue;
height: 100%;
width: 66%;
position: fixed;
right: 5px;
also, i have removed the floating from both the 66%er and the 33%er and adjusted them a little. if you want them to touch each other, change 66% to 66.53%.
I would like to setup a horizontal container that holds multiple (smaller) columns within it. I have the following setup:
http://jsfiddle.net/f464W/1/
As you can see, when you resize the window, the .column containers just stack vertically when the width of the window is too small to contain them all.
Shouldn't
overflow-x: hidden
Stop the .column class from being displayed when they run off the side of .container?
Add white-space: no-wrap the .container
http://jsfiddle.net/feitla/f464W/17/
.container {
max-height: 600px;
width: 100%;
margin-top: 100px;
background: red;
padding: 0;
overflow-y: hidden;
overflow-x: hidden;
white-space: nowrap;
}
With overflow-x: hidden will hide what exceeds on the right of your div. But the natural behaviour of the divs are to wrap to the line below when they're out of space, therefore nothing exceeds.
You need to make the divs not wrap. if you add white-space: nowrap to your container CSS they will only stack horizontally.
You can add float: left; to .column and that should give you the desired effect. You'll then have to play with margin if you want to maintain the spacing you had between the columns.
I am trying to make a div featuring thumbnails to have a set width (330px) and set height (100px), and make it so the content is arranged horizontally, so that a horizontal scroll bar is used to view the content.
Please see the row of thumbnails in the bottom right corner of my website: http://stevenlloydarchitecture.co.nz/building.html
I want to make it so that only four of the thumbnails are visible, and you scroll horizontally to see the others.
However when I try to specify width the thumbnails get moved below each other (as is currently displayed). I tried making a parent Div (with id "slider" in my example) to set the width and height, and have tried as many combinations of specifying width,height and overflow to the divs on the hope of forcing a horizontal scroll but nothing has worked and I am completely stumped. Thanks in advance for any tips.
You can add the following styles to the #slider div to get only a horizontal scrollbar that scrolls through the images. Afterwards, its just sizing and positioning the div. The white-space: nowrap property tells the images not to wrap to next "lines".
#slider {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
#thumbset {
overflow: visible;
}
You can try the following css :
#slider {
width: 330px;
overflow-x: scroll;
overflow-y: hidden;
}
#thumbset {
width: 550px;// whatever width you want
}
Use this code:
<div style="width: 300px; height: 40px; border: 1px solid black; overflow: auto; white-space: nowrap; font-size: 14px">
Here's a random text .............
</div>
see how this code works in this fiddle, it's an easy way : add horizontal scroll bar