Cannot integrate these 2 columns, with the sub-columns :
I am forced to use this structure :
<div class="custom_classes">
<div class="custom_classes">col1</div>
<div class="custom_classes">col2</div>
<div class="custom_classes">col 2.1</div>
<div class="custom_classes">col 2.2</div>
<div>
use CSS grid instead
the simplest way to do this is using CSS grid (and is also repsonsive)
...this css property grid-column
that is a shorthand for grid-column-start and grid-column-end
details: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
using the Firefox DevTools I click the grid button in the code, which makes appear me a grid visualizer...
in the paper, I start thinking about... and I find that the best way is creating a 4 columns grid-based.
here is the code if you want to learn it :)
body {
display: grid;
place-content: center;
height: 100vh;
}
.container {
display: grid;
gap: 0.5em;
height: 80vh;
width: 80vw;
}
.container .child {
background: lightblue;
display: grid;
place-content: center;
}
.child1 {
grid-column: 1/2;
grid-row: 1/3;
}
.child2 {
grid-column: 2/4;
}
.child3 {
grid-column: 2/3;
}
.child4 {
grid-column: 3/4;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="child child1">col1</div>
<div class="child child2">col2</div>
<div class="child child3">col 2.1</div>
<div class="child child4">col 2.2</div>
</div>
</body>
</html>
With Flexbox
.classes_container{
background: whitesmoke;
position: relative;
width: 100%;
height: 300px;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: 20px auto;
display: flex;
}
.item{
background: #d3f9d2;
padding: 5px;
margin: 5px;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.col1{
width: 60%;
height: 95%
}
.col2{
width: 40%;
height: 50%;
}
.col2_1{
width: 18%;
height: 39%;
margin-right: 10px;
}
.col2_2{
width: 18%;
height: 39%;
margin-left: 10px;
}
.col2_1 {
align-self: end;
position: absolute;
right: 19%;
}
.col2_2 {
align-self: end;
position: absolute;
right: 1px;
}
<div class="classes_container">
<div class="col1 item">col1</div>
<div class="col2 item">col2</div>
<div class="col2_1 item">col 2.1</div>
<div class="col2_2 item">col 2.2</div>
<div>
</div>
Related
In the following snippet I have a position: fixed div which is not part of the grid layout and I have a row-1 and main grid rows.
I would like the main to expand to the available space which I thought grid-template-rows: 6rem 1fr would do but it is not.
I'd also like there to be less of gap between the rows but grid-row-gap is not working in this example.
html {
scroll-behavior: smooth;
height: 100%;
}
body {
text-rendering: optimizeSpeed;
height: 100%;
}
#root {
height: 100%;
}
.container {
border: 10px solid green;
background: #f1f1f1;
display: grid;
align-items: center;
grid-template-areas:
"row-1"
"main";
grid-template-rows: 6rem 1fr;
grid-row-gap: 0;
}
.fixed {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
z-index: 10;
background: yellow;
height: 3rem;
}
.row-1 {
border: 10px solid blue;
grid-area: row-1;
}
.main {
border: 10px solid orange;
grid-area: main;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main id="root">
<div class="fixed">Fixed</div>
<div class="container">
<div class="row-1">Row 1</div>
<div class="main">main</div>
</div>
</main>
</body>
</html>
You could do it as below, and if you want .row-1 not covered by the fixed element, you could add for example padding-top:3rem to .container or to .row-1 itself.
body {
text-rendering: optimizeSpeed;
margin:0;
}
.fixed {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
z-index: 10;
background: yellow;
height: 3rem;
}
.container {
min-height: 100vh;
border: 10px solid green;
display: grid;
grid-template-rows: 6rem 1fr;
}
.row-1 {
border: 10px solid blue;
}
.main {
border: 10px solid orange;
}
<main id="root">
<div class="fixed">Fixed</div>
<div class="container">
<div class="row-1">Row 1</div>
<div class="main">main</div>
</div>
</main>
I have some squares and I want the smaller squares to stay in the bigger square when you make the screen smaller but so far all they do is overlap
HTML
<div id="Frame">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
<div id="box4">box4</div>
</div>
CSS
#Frame {
background-color: pink;
width: 90%;
height: 700px;
margin-left: 5%;
}
#box1 {
position: absolute;
background-color: blue;
width: 250px;
height: 300px;
margin-left: 5%;
margin-top: 20px;
}
#box2 {
position: absolute;
background-color: blue;
width: 250px;
height: 300px;
margin-left: 48%;
margin-top: 20px;
}
#box3 {
position: absolute;
background-color: blue;
width: 250px;
height: 300px;
margin-top: 350px;
margin-left: 5%;
}
#box4 {
position: absolute;
background-color: blue;
width: 250px;
height: 300px;
margin-left: 48%;
margin-top: 360px;
}
Here's a link to the jsfiddle with my code
These aren't actual squares, just boxes with auto widths but you can play with the dimensions. You could also add aspect-ratio: 1 / 1; to .grid div and it will give you squares but then it won't always fit every viewport perfectly (plus not sure all browsers support this). Anyway...this should get you started.
`
body {
font-family: sans-serif;
}
.grid {
background: #FFBDBD;
display: grid;
grid-template-columns: auto auto;
grid-row: auto auto;
grid-gap: 24px;
padding: 24px;
}
.grid div {
background: #7FB9D5;
color: #00537C;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
</head>
<body>
<div class="grid">
<div>box1</div>
<div>box2</div>
<div>box3</div>
<div>box4</div>
</div>
</body>
</html>
I did not have this issue before I attempted to switch to grid instead of manually placing everything. However, I am hoping someone can point out my issue. When I load the page my background.png is fine in the second container, but it bleeds from the first container to the top of the second, even though there is another section beneath it. Any tips are appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Iguana Removal</title>
<link href="https://fonts.googleapis.com/css2?family=Modak&family=Roboto+Slab&family=Six+Caps&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/iguanaremoval2.css">
</head>
<img class="BackgroundImage" src="images/iguanaBack.png" alt="Pixles Free to use picture of an iguana back.">
<header>
<section class="headerGrid">
<div class="headerHead"><h1>Our Removal Services</h1></div>
<div class="headerHome">Home</div>
<div class="headerIguanaRemoval">About</div>
<div class="headerRequests">Requests</div>
</section>
</header>
<body class="IRbody">
<section class="bodyGrid">
<div class="bodyHead">
<img src="images/background.png" class="textBackground">
<h2 class="underline">header</h2>
<div class="headText">
random text
</div>
</div>
<div class="companyFleet">
<img class="fleetImage" src="images/2015_team1.png" alt="picture of our 2015 team and fleet.">
</div>
<div class="body2">
<img src="images/background.png" class="textBackground">
<h2 class="underline IRBHead">header</h2>
<span>
random text
</span>
</div>
</section>
</body>
</html>
The CSS:
html{
background: black;
font-family: 'Roboto Slab', serif;
}
header{
background: navajowhite;
position: sticky;
text-align: center;
position: relative;
width: 95vw;
height: 10%;
left: 1%;
z-index: 40;
}
Body{
text-align: center;
grid-column: 25px;
grid-row-gap: 0;
}
/*img{
max-width: 100%;
max-height: 100%;
}*/
.BackgroundImage{
position: absolute;
width: 100%;
height: 100%;
left: 0;
z-index: -40;
}
/*******header********/
.headerGrid{
display: grid;
grid-column: 1fr 1fr 1fr;
grid-row: 1fr 1fr;
grid-template-areas:
". headerHead headerHead headerHead ."
". headerHome headerIguanaRemoval headerRequests .";
}
.blank{
grid-area: blank;
}
.headerHead{
grid-area: headerHead;
}
.headerHome{
grid-area: headerHome;
}
.headerIguanaRemoval{
grid-area: headerIguanaRemoval;
}
.headerRequests{
grid-area: headerRequests;
}
/*******Body********/
/*Images*/
.textBackground{
position: absolute;
height: 100%;
width: 100%;
left: 1%;
bottom: 0%;
z-index: -1;
}
.fleetImage{
width: 100%;
height: 100%;
left: 0%;
bottom: 0%;
}
/*mainbody*/
.bodyGrid{
display: grid;
grid-template-areas:
"bodyHead"
"companyFleet"
"body2";
}
.IRbody{
position: relative ;
width: 95vw;
}
.bodyHead{
grid-area: bodyHead;
}
.headText{
margin: 1px 1px;
}
.companyFleet{
grid-area: companyFleet;
width: 100%;
height: 75%;
}
.body2{
grid-area: body2;
}
* {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
.wrapper {
width: 1170px;
margin: auto;
}
.logo img {
width: 84px;
float: left;
padding-left: 5%;
padding-top: 2%;
}
<!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" /> <title>LoLstudy</title> <link rel="stylesheet" href="fstyle.css" /> </head> <body> <div class="container"> <div class="left"></div>
here is the html code.
what shoud i do?
You can change position: absolute on the .appbar class to position: fixed or just remove the position property depending on the layout you want.
* {
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
display: flex;
position: relative;
}
.appbar {
width: 100%;
height: 60px;
display: flex;
position: absolute;
align-items: center;
top: 0;
z-index: 999;
padding: 0 2rem;
}
.logo {
font-size: 20px;
}
.fragment {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.left {
background-color: cadetblue;
}
.right {
background-color: burlywood;
}
<div class="container">
<header class="appbar">
<a class="logo" href="#">LOGO</a>
</header>
<div class="fragment left">
<h2>Left</h2>
</div>
<div class="fragment right">
<h2>Right</h2>
</div>
</div>
I'm trying to make a layout design for my webpage, but it's a little complex to build that design responsive.
I have hidden the sidebar using media query but still struggling with flex-order.
in desktop, it looks like this, and I have achieved this design using flexbox
but I'm trying in mobo device it should look like this
How should I add a media query to rearrange items. I'm new to flexbox.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
width: 100%;
margin: 0;
}
.conatiner{
display: flex;
}
.sidebar{
max-width: 30%;
width: 100%;
height: 100vh;
background-color: blue;
}
.main{
max-width: 70%;
width: 100%;
background-color: black;
}
.wrapper{
display: flex;
flex-direction: column;
}
.wrapper-1{
display: flex;
}
.item-1{
background-color: blanchedalmond;
width: 70%;
height: 200px;
}
.item-2{
background-color: chartreuse;
width: 30%;
height: 200px;
}
.item-3{
background-color: darkcyan;
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div class="conatiner">
<div class="sidebar">
sidebar
</div>
<div class="main">
<div class="wrapper">
<div class="wrapper-1">
<div class="item-1">
1
</div>
<div class="item-2">
2
</div>
</div>
<div class="item-3">
3
</div>
</div>
</div>
</div>
</body>
</html>
i tweeked a little bit your code and it is probably solve yor problem
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
width: 100%;
margin: 0;
}
.conatiner {
display: flex;
height: 100vh;
}
.sidebar {
max-width: 30%;
width: 100%;
background-color: blue;
}
.main {
max-width: 70%;
width: 100%;
background-color: black;
}
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper-1 {
display: flex;
flex-wrap: wrap;
}
.item-1 {
background-color: blanchedalmond;
width: 70%;
height: 200px;
flex: 0 0 50%;
}
.item-2 {
background-color: chartreuse;
width: 30%;
height: 200px;
flex: 0 0 50%;
}
.item-3 {
background-color: darkcyan;
width: 100%;
height: 300px;
flex: 1;
}
#media only screen and (max-width: 480px) {
.sidebar {
display: none;
}
.wrapper-1 {
flex-direction: column;
}
.item-1 {
order: 1;
flex: 0 0 200px;
}
.item-2 {
order: 3;
flex: 0 0 200px;
}
.item-3 {
order: 2;
flex: 0 0 300px;
}
.item-1, .item-2, .item-3 {
width: 100%;
}
}
</style>
</head>
<body>
<div class="conatiner">
<div class="sidebar">
sidebar
</div>
<div class="main">
<div class="wrapper">
<div class="wrapper-1">
<div class="item-1">
1
</div>
<div class="item-2">
2
</div>
<div class="item-3">
3
</div>
</div>
</div>
</div>
</div>
</body>
</html>