I wanna create a hexagon be created with pure CSS3, as shown below.
As you see in the image, there is a b-g image on the background.
i have tried to create the hexagon but the text within the hexagon is not displaying properly( category1, category3 etc). its not transparent.
somehow am not able to get the actual image, my manager is asking for.
when I ran this code, am getting the hexagon with filled-in color.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<title>hexagon-tiles</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style> li.hex-row {
margin-top: -10vw;
}
li.hex-row:nth-child(2n) .hexagon {
transform: translateX(50%) rotate(120deg);
}
ul#hexagonContainer {
margin: 0;
list-style: none;
padding: 0;
margin-top: 10vw;
}
.hexagon {
width: 18vw;
background: transparent;
height: 9vw;
display: inline-block;
transform: rotate(120deg);
overflow: hidden;
visibility: hidden;
margin-bottom: 7vw;
position: relative;
}
li.hex-row {
white-space: nowrap;
//filter: drop-shadow(0.5vw 2vw 0.5vw black);
}
.hexagon .hex-inner {
width: 100%;
height: 100%;
background: rebeccapurple;
transform: rotate(-60deg);
overflow: hidden;
position: relative;
}
.hexagon .hex-img {
width: 100%;
height: 100%;
transform: rotate(-60deg);
visibility: visible;
box-shadow: 1px 0px 0px 0px;
background-color: #6B8E23;
}
.hexagon .hex-img:after {
position: absolute;
width: 100%;
content: '';
z-index: 1;
height: 100%;
//background-image:
url(https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg);
background-position: center center;
background-repeat: no-repeat;
}
.hex-img.hide {
visibility: hidden;
}
.text{
position: absolute;
//z-index: 1000;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<br/>
<ul id="hexagonContainer">
<!-- First row. -->
<li class="hex-row">
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img">
<div class="text">
<p>My Overall<br/> Score</p>
</div>
</div>
</div>
</div>
</li>
<!-- Second row. -->
<li class="hex-row">
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
</li>
<!-- Seventh row. -->
</ul> </div> </body> </html>
Here's a possible solution.
Instead of the current green background that you're setting to the hexagon, try a radial-gradient.
background: radial-gradient(circle, transparent 0%, #6B8E23 60%);
Edit: This is the solution to the anchor tag, I used flex so the tag will use the entire w & h of the container and center the text.
HTML:
<div class="text">
My overall score
</div>
CSS:
.text {
position: absolute;
z-index: 10;
width: 100%;
text-align: center;
height: 100%;
}
.text a {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
Hope this helps.
Related
I'm using this border animation https://codepen.io/FlorinCornea/pen/KKpvRYo but I'm trying to make it responsive by wrapping it in bootstrap however now its sticking to the left and I cant seem to center it
This is my DEMO:
.circle-wrapper {
position: relative;
width: 110px;
height: 110px;
}
.icon {
position: absolute;
color: #fff;
font-size: 55px;
top: 55px;
left: 55px;
transform: translate(-50%, -50%);
}
.circle {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
padding: 2.5px;
background-clip: content-box;
animation: spin 10s linear infinite;
}
.circle-wrapper:active .circle {
animation: spin 2s linear infinite;
}
.success {
background-color: #2e3192;
border: 2.5px dashed #2e3192;
}
.error {
background-color: #CA0B00;
border: 2.5px dashed #CA0B00;
}
.warning {
background-color: #F0D500;
border: 2.5px dashed #F0D500;
}
#keyframes spin {
100% {
transform: rotateZ(360deg);
}
}
.page-wrapper {
background-color: #eee;
align-items: center;
justify-content: center;
}
<link rel="stylesheet" id="bootstrap-css" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css?ver=6.0" type="text/css" media="all">
<div class="our-process center-align tinted-bg">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Our Process</h2>
</div>
<div class="row">
<div class="page-wrapper d-md-flex">
<div class="col-md-3 text-center">
<div class="circle-wrapper mx-auto">
<div class="success circle"></div>
<div class="icon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
<h5>Assessor's Visit</h5>
</div>
<div class="col-md-3 text-center">
<div class="circle-wrapper mx-auto">
<div class="success circle"></div>
<div class="icon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
<h5>Surveyor's Visit</h5>
</div>
<div class="col-md-3 text-center">
<div class="circle-wrapper mx-auto">
<div class="success circle"></div>
<div class="icon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
<h5>installation</h5>
</div>
<div class="col-md-3 text-center">
<div class="circle-wrapper mx-auto">
<div class="success circle"></div>
<div class="icon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
<h5>Post Inspection Visit</h5>
</div>
</div>
</div>
</div>
</div>
</div>
I have bootstrap linked to my site so that's not the issue
Here's an image of what it looks like now i am trying to center align the blue circles with the text that's below them:
For Bootstrap 4:
As you use bootstrap, I add 3 bootstrap classes:
d-md-flex (= display:flex on medium screen) on your page-wrapper
text-center on your col-md-3
mx-center (= margin horizontal auto) on your circle-wrapper
The d-md-flex could be replace by row mx-0
For bootstrap 3:
You just need to create the missing css classes:
#media (min-width: 768px){
.d-md-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
}
.mx-auto{
margin-right:auto !important;
margin-left:auto !important;
}
Check that on large screen and it should be centered.
.circle-wrapper {
position: relative;
width: 110px;
height: 110px;
}
.icon {
position: absolute;
color: #fff;
font-size: 55px;
top: 55px;
left: 55px;
transform: translate(-50%, -50%);
}
.circle {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
padding: 2.5px;
background-clip: content-box;
animation: spin 10s linear infinite;
}
.circle-wrapper:active .circle {
animation: spin 2s linear infinite;
}
.success {
background-color: #2e3192;
border: 2.5px dashed #2e3192;
}
.error {
background-color: #CA0B00;
border: 2.5px dashed #CA0B00;
}
.warning {
background-color: #F0D500;
border: 2.5px dashed #F0D500;
}
#keyframes spin {
100% {
transform: rotateZ(360deg);
}
}
.page-wrapper {
background-color: #eee;
align-items: center;
justify-content: center;
}
/************************************/
/** BOOTSTRAP 4 CSS ADDED **/
/************************************/
#media (min-width: 768px){
.d-md-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
}
.mx-auto{
margin-right:auto !important;
margin-left:auto !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha512-6MXa8B6uaO18Hid6blRMetEIoPqHf7Ux1tnyIQdpt9qI5OACx7C+O3IVTr98vwGnlcg0LOLa02i9Y1HpVhlfiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="page-wrapper d-md-flex">
<div class="col-md-3 text-center">
<div class="circle-wrapper mx-auto">
<div class="success circle"></div>
<div class="icon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
<h5>Assessor's Visit</h5>
</div>
<div class="col-md-3 text-center">
<div class="circle-wrapper mx-auto">
<div class="success circle"></div>
<div class="icon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
<h5>Surveyor's Visit</h5>
</div>
<div class="col-md-3 text-center">
<div class="circle-wrapper mx-auto">
<div class="success circle"></div>
<div class="icon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
<h5>installation</h5>
</div>
<div class="col-md-3 text-center">
<div class="circle-wrapper mx-auto">
<div class="success circle"></div>
<div class="icon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
<h5>Post Inspection Visit</h5>
</div>
</div>
I made the changes as you described but when I check to see how it would look on the phone the blue box and the pink box are separated which I want to be together. I have attached a screenshot of how it looks and I want it to look similar to the desktop version.
I am not sure which entity might be causing this issue.
--EDIT--
Just to provide more clarity here is a screenshot of how the container_tag and container_box should look in the mobile screen (365px).
Should look like this
Is looking like this
.side_feedback{
background-color: pink;
padding: 10px;
height: 300px;
width: 180px;
border-radius: 10%;
margin-left: 17px;
}
.container_tag{
background-color: royalblue;
min-height: 200px;
max-width: 2rem;
border: 6px solid royalblue;
float: left;
}
.tag{
transform: rotate(-90deg);
position: relative;
top: 8rem;
}
.container_box{
background-color: pink;
min-height: 200px;
border-left: 6px solid white;
width: 95%;
position: relative;
float: left;
}
<div class="container-fluid">
<div class="row mb-4 g-5">
<div class="order-2 order-sm-1 col-lg-2 col-md-2 col-xs-10">
<div class="col-md">
<div class="side_feedback">
<p>Give us feedback!</p>
</div>
</div>
</div>
<div class="order-1 order-sm-2 col-10">
<div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 row-cols-lg-1 row-cols-auto g-4">
<div class="col-12">
<div class="container_tag">
<h3 class="tag">TEXT</h3>
</div>
<div class="container_box">
</div>
</div>
<div class="col-12">
<div class="container_tag">
<h3 class="tag">TEXT</h3>
</div>
<div class="container_box">
</div>
</div>
<div class="col-12">
<div class="container_tag">
<h3 class="tag">TEXT</h3>
</div>
<div class="container_box">
</div>
</div>
</div>
</div>
</div>
If you’re referencing the large vertical white space below the two pink blocks, that’s there because you’re using position: relative on the pink container_box. position: relative positions the element normally (below your container_tag div) and then moves the element to the new position — the original space remains.
To get rid of the white space, add float: left to the styles for both of your containers.
.container_tag {
background-color: royalblue;
min-height: 180px;
width: 9%;
max-width: 3.2rem;
float: left;
position: relative;
}
.tag {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%) rotate(-90deg)
}
.container_box {
background-color: pink;
min-height: 180px;
border-left: 6px solid white;
width: 91%;
position: relative;
float: left;
}
#media (min-width:768px) {
.container_box {
width: calc(100% - 3.2rem);
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-sm-10 px-0">
<div class="row gx-0">
<div class="col-12 mb-3">
<div class="container_tag">
<h3 class="tag">Text</h3>
</div>
<div class="container_box">
</div>
</div>
<div class="col-12 mb-3">
<div class="container_tag">
<h3 class="tag">Text</h3>
</div>
<div class="container_box">
</div>
</div>
</div>
</div>
</div>
</div>
One other note - you don't need to give the same column class for different breakpoints (col-lg-10 col-md-10 col-xs-10). Just use col-10 and that will apply to all of the following breakpoints. And BS-5 doesn't use xs - that was for Bootstrap 3.
I would like to simulate a slider using CSS. This code pen shows a minimum working example.
The left property of the slider can be set using javascript or, as in the code pen example, by setting a CSS variable from 0 to 100.
At 0% the slider should sit on the left of its parent. At 100% the slider should sit flush with the right.
The parent is a flex child with its width set by flex-grow, and it shares its row with another flex child.
In the image below, the parent of the slider is yellow, and the slider itself is teal. A neighbouring flex child is shown in orange:
When the CSS variable (or Javascript variable) reaches 100%, the slider's right-hand edge should sit flush with the right-hand edge of the yellow box, but currently it moves like this:
I thought I could calculate the left property using something like:
calc((100% - 40px) / 100%)
But as MDN states, the right-hand side of a division must be a number.
Am I missing something obvious?
.full {
display: flex;
height: 50px;
max-width: 600px;
}
.full p {
float: left;
padding-left: 10px;
}
.left {
flex-grow: 8;
background-color: yellow;
padding: 5px 0;
}
.right {
flex-grow: 2;
background-color: orange;
}
.slider {
height: 100%;
width: 40px;
background-color: steelblue;
opacity: 0.9;
}
.slider {
position: relative;
--complete: 100%;
left: calc(var(--complete));
}
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
You can adjust the calculation and remove the percentage from --complete:
--complete:80;
left: calc( var(--complete) * 1% - var(--complete) * (40px/100));
Full code:
.full {
display: flex;
height: 50px;
max-width: 600px;
}
.full p {
float: left;
padding-left: 10px;
}
.left {
flex-grow: 8;
background-color: yellow;
padding: 5px 0;
}
.right {
flex-grow: 2;
background-color: orange;
}
.slider {
height: 100%;
width: 40px;
background-color: steelblue;
opacity: 0.9;
}
.slider {
position: relative;
--complete:80;
left: calc( var(--complete) * 1% - var(--complete) * (40px/100));
}
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider" style="--complete:100">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider" style="--complete:0">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider" style="--complete:50">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider" style="--complete:20">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
Or combine it with transform and use it like this:
--complete: 80%;
left: calc(var(--complete));
transform: translateX(calc(-1 * var(--complete)));
.full {
display: flex;
height: 50px;
max-width: 600px;
}
.full p {
float: left;
padding-left: 10px;
}
.left {
flex-grow: 8;
background-color: yellow;
padding: 5px 0;
}
.right {
flex-grow: 2;
background-color: orange;
}
.slider {
height: 100%;
width: 40px;
background-color: steelblue;
opacity: 0.9;
}
.slider {
position: relative;
--complete: 80%;
left: calc(var(--complete));
transform: translateX(calc(-1 * var(--complete)));
}
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider" style="--complete:100%">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider" style="--complete:0%">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider" style="--complete:50%">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider" style="--complete:20%">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
Thanks to a useful tip-off from Temani Afif about using translateX as well as left, I have managed to put together a solution which isn't pretty, but works.
I'm still open to more 'attractive' solutions.
.slider {
position: relative;
--complete: 100;
left: calc(1% * var(--complete));
transform: translateX(calc(-40px * var(--complete) / 100));
}
I have several square items inside a scrollable area. Each item increases in scale by 10% when rolled over. When the group of items is either significantly taller or shorter than the scroll area, everything works fine.
The problem occurs when the height of the items is only slightly shorter than the height of the scrollable area. This only occurs in Chrome. What I think is happening is that when an item increases in size by 10%, the entire div containing the items also increases to larger than the height of the scroll area, at which point the scrollbar flashes on and off.
Gif of scrollbar flashing on and off
Is there anything I can do to prevent this from happening?
Here's a CodePen example: http://codepen.io/anon/pen/VPzoPK?editors=1100#0
And the associated code:
CSS
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.scrollable {
width: 300px;
background-color: white;
overflow-y: auto;
max-height: 495px;
}
.grid__col {
display: inline-block;
width: 25%;
margin: 10px;
background-color: blue;
}
.square_image {
background-color: red;
width: 100%;
padding-bottom: 100%;
border: 2px solid black;
}
.square_image:hover {
transform: scale(1.1);
}
HTML
<div class="scrollable">
<div class="grid">
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
</div>
</div>
Thanks for your help!
Edit: Mentioned that this is a chrome issue
To disable scrolling:
div {
overflow-y: hidden;
}
To force scrolling:
div {
overflow-y: scroll;
}
Fixed css:
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.scrollable {
overflow-y: auto;
width: 300px;
background-color: white;
max-height: 495px;
}
.grid__col {
display: inline-block;
width: 25%;
margin: 10px;
background-color: blue;
}
.square_image {
background-color: red;
width: 100%;
padding-bottom: 100%;
border: 2px solid black;
}
.square_image:hover {
transform: scale(1.1);
}
For this to work, add additional 2 boxes to your div ;)
<div class="grid__col">
<div class="square_image"></div>
</div>
I think you have two differents approaches to take:
1- Hide your scroll using overflow-y: hidden
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.scrollable {
width: 300px;
background-color: white;
overflow-y: hidden;
max-height: 495px;
}
.grid__col {
display: inline-block;
width: 25%;
margin: 10px;
background-color: blue;
}
.square_image {
background-color: red;
width: 100%;
padding-bottom: 100%;
border: 2px solid black;
}
.square_image:hover {
transform: scale(1.1);
}
<div class="scrollable">
<div class="grid">
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
</div>
</div>
2- Force the scroll to appear always using overflow: scroll
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.scrollable {
width: 300px;
background-color: white;
overflow-y: scroll;
max-height: 495px;
}
.grid__col {
display: inline-block;
width: 25%;
margin: 10px;
background-color: blue;
}
.square_image {
background-color: red;
width: 100%;
padding-bottom: 100%;
border: 2px solid black;
}
.square_image:hover {
transform: scale(1.1);
}
<div class="scrollable">
<div class="grid">
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
</div>
</div>
But you should keep a relation between the effect and the size, still when you are not seeing the undesired effect it is still happening.
There is a problem related to the design and the way it looks like in this case.
I Hope to help you.
Either give the .scrollable div more width, to account for the scrollbar appearing:
.scrollable {
width: 330px;
}
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.scrollable {
width: 330px; /* changed from '300px' */
background-color: white;
overflow-y: auto;
max-height: 495px;
}
.grid__col {
display: inline-block;
width: 25%;
margin: 10px;
background-color: blue;
}
.square_image {
background-color: red;
width: 100%;
padding-bottom: 100%;
border: 2px solid black;
}
.square_image:hover {
transform: scale(1.1);
}
<div class="scrollable">
<div class="grid">
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
</div>
</div>
Or simply force the scrollbar to be always visible:
.scrollable {
overflow-y: scroll;
}
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.scrollable {
width: 300px;
background-color: white;
overflow-y: scroll; /* changed from 'auto' */
max-height: 495px;
}
.grid__col {
display: inline-block;
width: 25%;
margin: 10px;
background-color: blue;
}
.square_image {
background-color: red;
width: 100%;
padding-bottom: 100%;
border: 2px solid black;
}
.square_image:hover {
transform: scale(1.1);
}
<div class="scrollable">
<div class="grid">
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
</div>
</div>
I have a CSS menu using the checkbox:checked trick here
But my issue is that when the menu is open, the content overflows off the side of the parent div - How do I make the divs fluid so that that wrap around to the next row and push each other along?
I have looked at Flexible Boxes, I have never used them before, but feel this could be the right track.
I have created a JSFiddle that illustrates what I am trying to do.
Thank you :)
EDIT
I've done some experimenting and it is the magic combination of padding and box-sizing - I've also just stumbled upon this useful post => International box-sizing Awareness Day
EDIT
HTML:
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
</div>
</div>
CSS:
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container {
transition: left 1s;
left: 250px;
}
#container {
position: relative;
transition: left 1s;
left: 0px;
width: 100%;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
The problem is that you are moving the left value of offset menu, which moves the menu item to left 250px. Similar thing will occur if you use margin-left property, because of width:100%.
instead, if you increase the padding, which will cause the increment inwards and reduce width of parent container, causing the item elements to fall on next life if no space is found.
Check the below snippet, where i am changing the padding value
* {
box-sizing: border-box;
}
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container {
transition: padding 1s;
padding-left: 250px;
}
#container {
position: relative;
transition: padding 1s;
left: 0px;
width: 100%;
padding-left: 0;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
</div>
</div>
The problem is that you're moving the whole container so everything inside it moves too.
What you actually want to do is move the first .item.
input[type="checkbox"]:checked ~ #container .item:first-child {
transition: margin-left 1s;
margin-left: 250px;
}
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container .item:first-child {
transition: margin-left 1s;
margin-left: 250px;
}
#container {
position: relative;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
</div>
</div>
As per your JSFiddle example you have to change few properties :
HTML : one line has to added for clear the floating
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div style="clear:both"></div>
</div>
</div>
And the CSS would be :
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container {
transition: margin-left 1s;
margin-left: 250px;
}
#container {
position: relative;
transition: margin-left 1s;
margin-left: 0px;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}