I struggle with an responsive attempt. I got two columns, where the width is based on VW. The bigger column contains am div element to close. This element should have always the same top and left margin, in relatives to the parent column. No matter if I resize the window.
Currently if I resize the distance between changes, either increase or shrinks to a point, where my close div get out of position c
body {
background: grey;
overflow: hidden;
}
.container-fluid {
width: 100%;
margin: auto;
display: flex;
flex-wrap: inherit;
align-items: center;
justify-content: space-between;
}
.col-lg-8 {
flex: 0 0 auto;
width: 66.666667%;
}
.col-lg-4 {
flex: 0 0 auto;
width: 33.333333%;
}
.card {
position: relative;
display: flex;
flex-direction: column;
height: 50vh;
background-color: #fff;
background-clip: border-box;
border: 0 solid rgba(0, 0, 0, 0.125);
border-radius: 1rem;
margin: 0.5em;
padding: 0.5em;
}
.title {
margin: 0.5em;
font-size: 3em;
float: left;
}
.close-btn {
position: absolute;
float: left;
cursor: pointer;
font-size: 2em;
left: 57vw;
top: 2vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Fixed Close Position</title>
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="col-lg-8">
<div class="card">
<div class="title">Headline</div>
<div class="close-btn"><i class="fa-solid fa-circle-xmark"></i></div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="title">News</div>
</div>
</div>
</div>
</body>
</html>
ompletely. I am stuck.
Try this,
body {
background: grey;
overflow: hidden;
}
.container-fluid {
width: 100%;
margin: auto;
display: flex;
flex-wrap: inherit;
align-items: center;
justify-content: space-between;
}
.col-lg-8 {
flex: 0 0 auto;
width: 66.666667%;
}
.col-lg-4 {
flex: 0 0 auto;
width: 33.333333%;
}
.card {
position: relative;
display: flex;
flex-direction: column;
height: 50vh;
background-color: #fff;
background-clip: border-box;
border: 0 solid rgba(0, 0, 0, 0.125);
border-radius: 1rem;
margin: 0.5em;
padding: 0.5em;
}
.title {
margin: 0.5em;
font-size: 3em;
float: left;
}
.close-btn {
position: absolute;
cursor: pointer;
font-size: 2em;
left: auto;
top: 2vh;
right: 2vh;
}
Related
When I resize the page the searchbox starts resizing after the padding of the parent if zero. I want to resize the div with class-"searchbox", with resizing the page not after the parent's padding is off. Here is the code I'll be glad if you correct me anywhere.
.site-wrapper {
max-width: 86.5rem;
min-height: 28rem;
padding: 0 4.3rem;
margin: 0 auto;
overflow: hidden;
}
.navbar {
display: flex;
justify-content: end;
padding-top: 2.7rem;
}
#hamburger-button {
position: relative;
width: 32px;
height: 32px;
border-radius: 4px;
cursor: pointer;
}
#hamburger-button:hover {
background-color: #0000001f;
}
#hamburger {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: none;
background-color: transparent;
background-image: url(/assets/menuicon.svg);
background-repeat: no-repeat;
background-size: contain;
padding: 9.2px;
margin: 0 auto;
cursor: pointer;
}
.header-content {
margin: 0 auto;
}
.header-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.header-content-logo {
margin-top: 5rem;
margin-bottom: 2.3rem;
}
.header-content-logo svg {
width: 12.6rem;
}
.searchbox {
display: flex;
align-items: center;
border-radius: 6px;
width: 100%;
max-width: 38.7rem;
height: 2.7rem;
background-color: #fff;
box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.searchbox:hover {
box-shadow: 0px 6px 20px 6px rgba(0, 0, 0, 0.1);
}
.searchbox input {
width: 92%;
border: none;
background-color: transparent;
font-size: 11.8pt;
font-family: inherit;
padding-left: 1rem;
}
.searchbox input:focus {
outline: none;
}
<div class="site-wrapper">
<div class="navbar">
<div id="hamburger-button">
<button id="hamburger"></button>
</div>
</div>
<div class="header-content">
<div class="header-content-logo">
<svg>
</div>
<div class="searchbox">
<input type="text" placeholder="Search without being tracked">
</div>
</div>
</div>
I have tried putting margin and even making another div before it and putting padding but seems that it didn't make it work. I am out of options.
I want to have the ability to move the .secDiv down when resizing the browser. Currently the coloured squares in the .boxes overlap the .secDiv when scaling the browser down.
Please assist.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.boxes {
position: relative;
width: 100%;
height: 300px;
border: 2px solid pink;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.red {
width: 300px;
background-color: red;
height: 150px;
margin: 15px;
}
.green {
width: 300px;
background-color: green;
height: 150px;
margin: 15px;
}
.blue {
width: 300px;
background-color: blue;
height: 150px;
margin: 15px;
}
.secDiv {
position: relative;
width: 100%;
height: 300px;
border: 2px solid yellow;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.red2 {
width: 300px;
background-color: red;
height: 150px;
margin: 15px;
}
.green2 {
width: 300px;
background-color: green;
height: 150px;
margin: 15px;
}
.blue2 {
width: 300px;
background-color: blue;
height: 150px;
margin: 15px;
}
<div class="boxes">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
<div class="secDiv">
<div class="red2"></div>
<div class="green2"></div>
<div class="blue2"></div>
</div>
I would suggest using dynamic heights such as % or vh. Because you have a fixed height of 300px. It will try to keep that height when resizing, and simply your content doesn't fit in a 300px height when you resize. You can use something simple like overflow-y: scroll if you want to use a fixed height, but I don't think that is what you're going for. I added width: 50% on your boxes and secDiv classes. You can use either 50%, 25% or whatever you desire for your end result. But I would stay away from using fixed units when looking for a responsive design.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.boxes {
position: relative;
width: 100%;
height: 50%;
border: 2px solid pink;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.red {
width: 300px;
background-color: red;
height: 150px;
margin: 15px;
}
.green {
width: 300px;
background-color: green;
height: 150px;
margin: 15px;
}
.blue {
width: 300px;
background-color: blue;
height: 150px;
margin: 15px;
}
.secDiv {
position: relative;
width: 100%;
height: 50%;
border: 2px solid yellow;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.red2 {
width: 300px;
background-color: red;
height: 150px;
margin: 15px;
}
.green2 {
width: 300px;
background-color: green;
height: 150px;
margin: 15px;
}
.blue2 {
width: 300px;
background-color: blue;
height: 150px;
margin: 15px;
}
<div class="boxes">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
<div class="secDiv">
<div class="red2"></div>
<div class="green2"></div>
<div class="blue2"></div>
</div>
I've added the #media query, so it changes responsively when the browser resizes, and the <div>'s break nicely under each other.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
}
.boxes {
position: relative;
width: 100%;
height: 300px;
border: 2px solid pink;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.red {
width: 300px;
background-color: red;
height: 150px;
margin: 15px;
}
.green {
width: 300px;
background-color: green;
height: 150px;
margin: 15px;
}
.blue {
width: 300px;
background-color: blue;
height: 150px;
margin: 15px;
}
.secDiv {
position: relative;
width: 100%;
height: 300px;
border: 2px solid yellow;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.red2 {
width: 300px;
background-color: red;
height: 150px;
margin: 15px;
}
.green2 {
width: 300px;
background-color: green;
height: 150px;
margin: 15px;
}
.blue2 {
width: 300px;
background-color: blue;
height: 150px;
margin: 15px;
}
#media(max-width: 994px) {
.secDiv, .boxes {
height: 600px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="boxes">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
<div class="secDiv">
<div class="red2"></div>
<div class="green2"></div>
<div class="blue2"></div>
</div>
</body>
</html>
I have a div filled with a an image contained within another div spanning the top and bellow it a p, I would like it so that the image portion('child') spans to the max-height available without pushing the text out of the div, is this possible?
example code:
Html:
<div className='parent'>
<div className='child'>
<img/>
<p></p>
</div>
</div>
Sass:
.parent{
position: absolute;
width: 85%;
height: 85%;
background: white;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.2);
margin-left: auto;
margin-right: auto;
margin-top: 20%;
left: 0;
right: 0;
text-align: center;
border-radius: 7px;
overflow: hidden;
background: #7510f7;
.child{
display: flex;
width: 100%;
background: #141c3a;
height: 40vh;
overflow: hidden;
img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: cover;
background-repeat: no-repeat;
margin: auto;
}
}
p{
text-align: left;
width: 95%;
margin: auto;
font-size: 0.9rem;
}
}
Currently as your child div has display: flex;, the img and p elements will be side-by side.
Adding flex-direction: column; to the child element might be what you want, see the below snippet (added border colours to tell elements apart)
.parent {
width: 85%;
height: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 20%;
text-align: center;
background: #7510f7;
border: red 1px solid;
}
.child {
display: flex;
width: 100%;
background: #141c3a;
height: 40vh;
border: orange 1px solid;
flex-direction: column;
}
img {
width: auto;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
margin: auto;
border: green 1px solid;
}
p {
text-align: left;
width: 95%;
margin: auto;
border: blue 1px solid;
}
<div class='parent'>
<div class='child'>
<img/>
<p>Lorem ipsum</p>
</div>
</div>
Update
Given your sandbox, here are the styles you need to add to get it how you want:
.Cards {
display: flex;
flex-direction: column;
.carousel-root{
flex:1;
}
.carousel, .slider-wrapper, .slider {
height: 100%;
}
.slide{
display: flex;
justify-content: center;
}
}
I have two side by side divs. The right div is set to expand on hover and display a message. I have set the z-index on the expanding div to be z-index: 1 and the left div and all its children to be z-index: 0, however the expanding div will only expand as far as the text in the div beside it.
I have read multiple questions here about z-index and flex items but can't work out what I am doing wrong. I have added a higher z-index to my first flex-item as described here Z-index doesn't work with flex elements? but that has not fixed it.
.container {
display: flex;
background-color: lightgray;
height: 48px;
width: 139px;
border-radius: 4px;
}
.container .inner {
height: 48px;
}
.container .inner > div {
display: flex;
z-index: 0;
}
.container .inner.left {
display: flex;
flex-direction: column;
flex: 1 0 auto;
padding-left: 10px;
justify-content: center;
}
.container .inner.right {
display: flex;
flex: 0 1 8px;
background-color: red;
border-radius: 0 4px 4px 0;
overflow: hidden;
transition: 0.3s;
cursor: pointer;
z-index: 1;
}
.container .inner.right .info-msg {
display: none;
transition: 0.3s;
}
.container .inner.right:hover {
flex: 0 1 150px;
}
.container .inner.right:hover .info-msg {
display: flex;
}
<div class="container">
<div class="inner left">
<div class="time">9:00am - 5:00pm</div>
<div class="name">Worker</div>
</div>
<div class="inner right">
<div class="info-msg">Message</div>
</div>
</div>
Z-Index is not the issue here. You can set the position to absolute so the right div goes over the left on hover.
This code works:
.container {
height: 48px;
width: 139px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
background-color: lightgray;
border-radius: 4px;
}
.inner {
padding-left: 10px;
}
.right {
height: 48px;
width: 8px;
position: absolute;
right: 0px;
display: flex;
align-items: center;
background-color: red;
border-radius: 0 4px 4px 0;
transition: 0.7s;
cursor: pointer;
}
.right:hover {
width: 129px;
border-radius: 4px;
}
.info-msg {
overflow: hidden;
}
This is not a z-index issue. It is a width issue. When the element expands the other element still occupies part of the width and therefore the expanding element stops.
You can add flex-shrink: 1 to the left element for the effect to take place. Also, you can set different position. Or you can use transform: translateX(-100%).
.container {
display: flex;
background-color: lightgray;
height: 48px;
width: 139px;
border-radius: 4px;
}
.container .inner {
height: 48px;
}
.container .inner>div {
display: flex;
z-index: 0;
}
.container .inner.left {
display: flex;
flex-direction: column;
flex: 1 0 auto;
padding-left: 10px;
justify-content: center;
/* Add flex shrink */
flex-shrink: 1;
}
.container .inner.right {
display: flex;
flex: 0 1 8px;
background-color: red;
border-radius: 0 4px 4px 0;
overflow: hidden;
transition: 0.3s;
cursor: pointer;
z-index: 1;
}
.container .inner.right .info-msg {
display: none;
transition: 0.3s;
}
.container .inner.right:hover {
flex: 0 1 150px;
}
.container .inner.right:hover .info-msg {
display: flex;
}
<div class="container">
<div class="inner left">
<div class="time">9:00am - 5:00pm</div>
<div class="name">Worker</div>
</div>
<div class="inner right">
<div class="info-msg">Message</div>
</div>
</div>
As mentioned in the comments above, you can make inner right div position: absolute with parent div position relative.
Check the snippet:
.container {
display: flex;
background-color: lightgray;
height: 48px;
width: 139px;
border-radius: 4px;
position: relative;
}
.container .inner {
height: 48px;
}
.container .inner > div {
display: flex;
z-index: 0;
}
.container .inner.left {
display: flex;
flex-direction: column;
flex: 1 0 auto;
padding-left: 10px;
justify-content: center;
}
.container .inner.right {
display: flex;
background-color: red;
border-radius: 0 4px 4px 0;
overflow: hidden;
transition: 0.3s;
cursor: pointer;
z-index: 1;
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: calc(100% - 8px);
width: 8px;
padding: 5px;
box-sizing: border-box;
}
.container .inner.right .info-msg {
display: none;
transition: 0.3s;
}
.container .inner.right:hover {
left: 0;
width: 100%;
border-radius: 4px;
}
.container .inner.right:hover .info-msg {
display: flex;
}
<div class="container">
<div class="inner left">
<div class="time">9:00am - 5:00pm</div>
<div class="name">Worker</div>
</div>
<div class="inner right">
<div class="info-msg">Message</div>
</div>
</div>
I am trying to build a layout with a menubar and a main container that includes a searchbar, left sidebar, and a results table.
I want the main container to always be as tall as possible for the window and the left sidebar and results table to also be as tall as possible within the main container.
This is how this would look with fixed heights on everything:
https://jsfiddle.net/m45cakne/1/
<div class="menubar"></div>
<div class="main-section">
<div class="searchbar">
</div>
<div class="section-content">
<div class="sidebar"></div>
<div class="results-table"></div>
</div>
</div>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
.menubar {
height: 50px;
border: 1px solid black;
}
.main-section {
border: 1px solid black;
margin-top: 20px;
height: 600px;
}
.searchbar {
border: 1px solid black;
margin: 20px;
height: 50px;
}
.section-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-right: 25px;
padding-left: 25px;
flex: 1;
}
.sidebar {
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
border: 1px solid black;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
height: 490px;
}
.results-table {
-webkit-box-flex: 0;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
position: relative;
width: 100%;
min-height: 1px;
border: 1px solid black;
height: 490px;
padding: 0px;
}
The menubar height can change as the page is viewed on different devices, and the searchbar height can also change as it is filled with search terms.
What would be the right method to build this responsive layout with CSS?
Just use flex properties all the way through:
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.menubar {
flex: 0 0 50px;
border: 1px solid black;
}
.main-section {
flex: 1;
display: flex;
flex-direction: column;
border: 1px solid black;
margin-top: 20px;
padding: 25px;
}
.searchbar {
flex: 0 0 50px;
margin-bottom: 20px;
border: 1px solid black;
}
.section-content {
flex: 1;
display: flex;
flex-wrap: wrap;
}
.sidebar {
flex: 0 0 25%;
border: 1px solid black;
}
.results-table {
flex: 1;
border: 1px solid black;
}
* {
box-sizing: border-box;
}
<div class="menubar">menu bar</div>
<div class="main-section">main container
<div class="searchbar">search bar</div>
<div class="section-content">
<div class="sidebar">side bar</div>
<div class="results-table">results table</div>
</div>
</div>
jsFiddle demo