Mobile View
I have upload my desktop and mobile view depective picture. I have given numbers to the div. I want to change the order of div as given in the below image.
Expected Behaviour
Can anyone please help me here to change the order of divs in mobile view?
Use bootstraps visible-xs hidden-xs classes to define html for both desktop and mobile views
You can do that by using media queries and css order property
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div[class^="d"]{
border: 3px solid black;
width: 100px;
height: 80px;
margin: 5px auto;
}
.ld{
border: 0;
width: 100px;
height: 90vh;
display: flex;
flex-wrap: wrap;
text-align: center;
margin: 0 auto;
font-size: 1.5em;
}
#media screen and (max-width:400px){
.d2{
order: 2;
}
.d3{
order: 4;
}
.d4{
order: 1;
}
.d5{
order: 3;
}
.d6{
order: 5;
}
}
</style>
</head>
<body>
<div class="ld">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
<div class="d6">6</div>
</div>
</body>
</html>
Related
I am trying to put together a diagram in CSS of a flow chart. I have attached below a picture. Is there a simple way to do this? I've been Googling around quite a bit looking for examples, but I don't know what to call this.
Can you please let me know how to do this? Or if this is something common, what I can Google to find more information.
By using CSS Flex you could achieve something like:
body {font: 16px/1.4 sans-serif;}
.chart-row,
.chart-col {
display: flex;
gap: 1em;
}
.chart-row {
flex-direction: row;
}
.chart-col {
flex-direction: column;
}
.chart-pill,
.chart-rect{
padding: 1em;
text-align: center;
border: 2px solid #999;
}
.chart-pill {
flex: 1;
border-radius: 1em;
border-style: dashed;
}
.chart-rect{
flex: 0;
margin: auto 0;
background: #eee;
}
.chart-line-h {
height: 2px;
min-width: 3em;
background: #999;
margin: auto -1em;
}
<div class="chart-row">
<div class="chart-pill chart-col">
<div class="chart-rect">alpha</div>
</div>
<div class="chart-line-h"></div>
<div class="chart-pill chart-col">
<div class="chart-rect">beta</div>
<div class="chart-rect">gamma</div>
<div class="chart-rect">delta</div>
</div>
<div class="chart-line-h"></div>
<div class="chart-pill chart-col">
<div class="chart-rect">gamma</div>
</div>
</div>
I'll just add an answer because I can't write any comments yet, although I'm not new at CSS...
Yes, you can use Flexbox but I will also add CSS Grid, as the combination of both can give you more flexibility if you're planning on making bigger charts...
Once you get it working, it's pretty easy to use...
Copy and paste this code in your code editor and display it in your browser.
( if you use VSCode you can use the liveServer extension)
Then go to the dev tools inside your browser (Ctrl+Shift+i) and click the icon to select an element (the one on top at the very left hand side).
Then, inside the first div, you will see a label with the word grid, click it and you'll see the grid on your screen.
Finally, you just have to fill the rows and columns with the figures as in one of those old battleship games, or a 2D Cartesian Coordinate System.
Keep in mind that when placing your items on the Grid, it's better to use the lines instead of the areas of the rows and columns, as it's much easier to understand it this way.
So for instance, in this case, connector1 goes from vertical line 9 to vertical line 10, or the first figure fills the space between line 5 and line 9, and so on.
Hope it helps!
By the way, I changed colours as it's easier for the explanation..
HTML :
<!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="styles.css">
<title>Document</title>
</head>
<body>
<!-- GRID FLOWCHART -->
<div class="flowchart">
<!-- FIRST FIGURE -->
<div class="set" id="set1">
<div class="box"><p>alpha</p></div>
</div>
<!-- FIRST CONNECTOR -->
<div class="connector" id="connector1"></div>
<!-- SECOND FIGURE -->
<div class="set" id="set2">
<div class="box"><p>beta</p></div>
<div class="box"><p>gamma</p></div>
<div class="box"><p>delta</p></div>
</div>
<!-- SECOND CONNECTOR -->
<div class="connector" id="connector2"></div>
<!-- THIRD FIGURE -->
<div class="set" id="set3">
<div class="box"><p>gamma</p></div>
</div>
</div>
</body>
</html>
CSS :
body {
width: 100vw;
height: 100vh;
background-color: #d3d3d3;
}
/* ****** GENERIC SHAPES : ********** */
.flowchart {
display: grid;
grid-template-columns: repeat(24, 1fr);
grid-template-rows: repeat(12, 1fr);
width: fit-content;
height: fit-content;
grid-gap: 2px;
}
.set {
min-width: 100px;
min-height: 100px;
border: 2px dashed blue;
border-radius: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box {
width: 80%;
height: 15%;
background-color: rgb(255, 255, 255);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 4%;
padding: 6%;
border: 1px solid black;
/* border-radius: 5px; */
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 0.9em;
}
.connector {
width: 120%;
max-height: 3px;
background-color: black;
transform: translateX(-6%);
}
/* ************* FIGURES : ************* */
#set1 {
grid-column: 5/9;
grid-row: 5/12;
}
#set2 {
grid-column: 10/14;
grid-row: 5/12;
}
#set3 {
grid-column:15/19;
grid-row: 5/12;
}
/* ******** CONNECTORS : *********** */
#connector1 {
grid-column: 9/10;
grid-row: 8/9;
}
#connector2 {
grid-column: 14/15;
grid-row: 8/9;
}
I am trying to achieve a layout with multiple elements of different height stacked on mobile screens and some elements forming a sidebar for desktop, roughly looking like this:
My first idea was to achieve it via CSS grid, defining one row with two columns and then assigning the grid-area depending on the class (orange vs gray):
Codepen
.layout {
display: grid;
max-width: 860px;
margin: 0 auto;
gap: 20px;
}
#media(min-width: 860px) {
.layout {
grid-template-areas: 'main sidebar';
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: main;
}
Problem: as multiple sidebar elements now occupy the same grid cell, they overlap instead of just flow on top of each other. I've been trying to wrap my head around alternative solutions for a few days now, but I couldn't find any so far that did not involve reordering the dom with JavaScript. Am I missing the obvious?
EDIT
Flexbox as stated in the answers does not solve this problem (if the position of elements within the list would be known upfront maybe, but this is not the case). Some elements go in the sidebar, some go in the main bar while having a fixed order in the mobile layout.
Use Flexbox, then you can easily do this.
Refer following code,
.layout {
display: flex;
flex-wrap: wrap;
max-width: 860px;
margin: 0 auto;
gap: 20px;
}
set correct order of div (containers) as you need, (the following code is sample one)
<div id="main">
<div style="background-color:coral;" id="myRedDIV"></div>
<div style="background-color:lightblue;" id="myBlueDIV"></div>
<div style="background-color:lightgreen;" id="myGreenDIV"></div>
<div style="background-color:pink;" id="myPinkDIV"></div>
</div>
#main {
width: 100%;
height: 150px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
}
#main div {
width: 70px;
height: 70px;
}
/* Standard syntax */
div#myRedDIV {order: 1;}
div#myBlueDIV {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV {order: 2;}
Refer following links for more about Order in Flexbox
Link1 --> About Flexbox Order
Link2 --> About Flexbox Order
Why don't you try with flexbox. you can do it using display:flex, for more about the flex refer below sample.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>
</body>
</html>
This might not be the answer to your question! (cause I've changed the grid layout into FlexBox)
In this example I'm changing flex-direction via screen breakouts.
More Information on CSS Flex box Direction
Code:
* {
border: 1px solid coral;
padding: 12px;
margin: 12px;
}
.layout {
display: flex;
flex-direction: column;
align-items: center;
}
.layout>* {
display: flex;
flex-direction: row;
}
.sidebar {
background-color: yellow;
}
.content {
background-color: grey;
}
#media(max-width: 860px) {
.layout {
display: flex;
flex-direction: column;
align-items: center;
}
.layout>* {
display: flex;
flex-direction: column;
}
.sidebar {
background-color: yellow;
}
.content {
background-color: grey;
}
.content {
background-color: green;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="layout">
<div>
<div class="content big">
Here's some text
</div>
<div class="sidebar small">
Sidebar Item
</div>
</div>
<div>
<div class="content big">
More Text
</div>
<div class="sidebar small">
another sidebar Item
</div>
</div>
</div>
</body>
</html>
I'm relatively new to web development and I can't quite figure out why I am getting overflow with a height set to 100% using flexbox. I would like to have the columns fill the entire height of the container but not overflow. Any help would be much appreciated. Also, I'm certain this is super simple.
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
.leftCol{
background-color: gray;
text-align: center;
padding-right: 10px;
flex: 25%;
}
.rightCol{
background-color: lightblue;
text-align: center;
flex: 75%;
}
.row {
display: flex;
flex-wrap: nowrap;
margin: 0;
}
.canvas{
border:1px solid #000000;
width: 100%;
height: 100%;
margin: 0%;
}
</style>
</head>
<body >
<div class="row">
<div class="leftCol">
Col1
<canvas class="canvas" id="architectureCanvas"></canvas>
</div>
<div class="rightCol">
Col2
<canvas class="canvas" id="architectureCanvas"></canvas>
</div>
</div>
</body>
</html>
https://jsfiddle.net/jp64mqr7/2/
The reason why you have overflow is that you set canvas height to 100% and also you have some text above that takes some space as well, and as a result, you got overflow because you need more space than you have.
To fix it, you should probably:
On the leftCol and the righCol you should add:
display: flex;
flex-direction: column;
Also, on .canvas you should add:
height: auto;
flex-grow: 1;
JSFiddle link: https://jsfiddle.net/velid/6eo45ycj/8/
I've got an issue on my webpage that involves margins popping up next to flexboxes when the site is viewed on mobile. I've distilled the issue down to some pretty simple code.
HTML Code
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- When you remove this period, issue goes away -->
.
<div class="smallboxes">
<div class="smallbox1">
</div>
<div class="smallbox2">
</div>
</div>
<div class="bigbox">
</div>
</div>
</body>
</html>
CSS code
.container {
display: flex;
height: 100px;
}
.bigbox {
flex: 2;
background-color: #6e6e6e;
display: flex;
}
.smallboxes {
flex: 1;
display: flex;
flex-direction: column;
}
.smallbox1 {
flex: 2;
background-color: #6e6e6e;
}
.smallbox2 {
flex: 1;
}
When you run the code in Chrome, right-click, click "Inspect", view as IPad Pro in horizontal mode and change the view to 75% or 125%. You'll see a white line between the two boxes. This is showing up on my Note 5 as well. There should be no line between the two grey boxes.
As I mention in the code, when you remove the period, the issue goes away.
Thanks a ton for the help!
P.S. I'm new to SO and can't seem to figure out how insert the "run codepen on this code" button. I'm including a link to the codepen version of this as well.
http://codepen.io/jasonhoward64/pen/XMpYXJ
edit: new answer based on comments of author
I've been playing with your Codepen and the problem is because of the use of "Flex: 1". Flex creates the needed space inside your "container". if you give ".bigBox" flex:2; and ".smallBoxes" flex:1; it will divide ".container" into 3 parts where bigBox will take up 2. When you add an item inside the container without giving it a flex-value, it will try to calculate the needed space.
Try placing the dot inside a span or div (or other element) and give it a flex-value. This will solve your problem.
.container {
display: flex;
height: 100px;
background: red
}
.bigbox {
flex: 5;
background-color: #6e6e6e;
display: flex;
}
.testBox {
background: yellow;
flex: 1;
}
.smallboxes {
flex: 3;
display: flex;
flex-direction: column;
}
.smallbox1 {
flex: 2;
background-color: #6e6e6e;
}
.smallbox2 {
flex: 1
}
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- When you remove this period, issue goes away --> <span class="testBox">test</span>
<div class="smallboxes">
<div class="smallbox1">
</div>
<div class="smallbox2">
</div>
</div>
<div class="bigbox">
</div>
</div>
</body>
</html>
You're code works, but when you add margin of 0 to the body, it breaks again. Do you know why?
body {
margin: 0;
}
.container {
display: flex;
height: 100px;
background: red
}
.bigbox {
flex: 5;
background-color: #6e6e6e;
display: flex;
}
.testBox {
background: yellow;
flex: 1;
}
.smallboxes {
flex: 3;
display: flex;
flex-direction: column;
}
.smallbox1 {
flex: 2;
background-color: #6e6e6e;
}
.smallbox2 {
flex: 1
}
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- When you remove this period, issue goes away --> <span class="testBox">test</span>
<div class="smallboxes">
<div class="smallbox1">
</div>
<div class="smallbox2">
</div>
</div>
<div class="bigbox">
</div>
</div>
</body>
</html>
I'm new to HTML5 and CSS3 and developing my first site/app for college. Ideally I need it to display on mobile phone image (which I haven't yet mastered) but for now all I'm trying to do it show flexible box working. As you will see text wraps when I adjust window size but logo remains unchanged. It was suggested that I could set image as background to a div which would adjust according to window size but not sure how to do this.
!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<!-- CSS -->
<link rel="stylesheet" href="preposting.css">
<title>Title goes here</title>
</head>
<body>
<div id="container">
<header id="top_header">
<div id="logo">
<img class="logo_image" src="logo.gif" alt="" />
</div>
<div id="welcome">
<h1>Text wraps when I adjust window size but image doesn't. It was suggested that I should set image as background to div and that way it would adjust but not sure how to do this.</h1>
</div>
</header>
</div>
</body>
</html>
#container
{
text-align:left;
border: 10px solid black;
margin: 20px auto;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header
{
border:30px solid green;
padding:20px;
background:yellow;
display:-webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-flex: 1;
}
#img.logo_image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
I see that you are using the old flexible box model: -webkit-box;
the new one is basically only called flex; You would type: display: -webkit-flex;
They have great examples of it here: http://www.w3.org/TR/css3-flexbox/
css:
#main { display: flex; }
#main > article { flex:1; order: 2; }
#main > nav { width: 200px; order: 1; }
#main > aside { width: 200px; order: 3; }
#media all and (max-width: 600px) {
/* Too narrow to support three columns */
#main { flex-flow: column; }
#main > article, #main > nav, #main > aside {
/* Return them to document order */
order: 0; width: auto;
}
}