Let's say I have a Flex-Box #X in which i want to arrange 4 Flex-Items #Y1 ... #Y4 as follows:
For an output medium smaller than 60em the flex-items should be positioned like this:
I know what i have to do for the HTML part, but what do i have to do for the css part?
You mean like this? The example works with media query and flex-direction: column-reverse;.
.flex {
display: flex;
background: gray;
justify-content: space-between;
gap:10px;
flex-wrap: wrap;
padding:10px;
max-width: 900px;
}
.item {
margin: 0 auto;
width:100%;
max-width:400px;
background-color: lightgreen;
height:100px;
}
#media only screen and (max-width: 800px) {
.flex {
flex-direction: column-reverse;
}
}
<div class="flex">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
</div>
Related
I am fiddling with this simple layout for a while now.
The goal is to utilize flexbox to center 2 images that resize when the screen gets to small because the images themself are rather large.
Desktop:
Mobile:
Also the body itself stays above the Footer element, but the content in the body overlaps the footer, do someone knows how to fix this maybe?
The HTML looks like this:
<div class="row">
<div class="imagecontainer">
<img class="prijsimage" src="../../assets/images/example1.png">
<img class="prijsimage" src="../../assets/images/example2.png">
</div>
</div>
The CSS looks like this:
.imagecontainer{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
I also tried this code:
<div class="row">
<div class="imagecontainer">
<img class="prijsimage" src="../../assets/images/prijslijst_noback.png">
</div>
<div class="imagecontainer">
<img class="prijsimage" src="../../assets/images/pijslijst_noback_wax.png">
</div>
</div>
.imagecontainer{
flex: 50%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 5%;
}
.prijsimage{
max-height: 100%;
vertical-align: bottom;
}
.row{
display: flex;
flex-direction: row;
}
#media (max-width: 480px) {
.row {
flex-direction: row;
}
.imagecontainer {
height: auto;
width: 100%;
}
.prijsimage {
width: 100%;
max-height: 75vh;
min-width: 0;
}
}
I really hopes that brings clarity of my issue. Can someone help me out on this one?
You need to set the flex-direction: column; to the container in your media query. I cleaned up your code and made it as vanilla as possible so you can copy and paste into your project.
.block {
width: 100%
}
.container {
display: flex;
flex-wrap: wrap;
}
.container>div {
padding: 1em;
flex: 0 50%;
box-sizing: border-box;
border: red solid;
}
/* Changed the max-width for testing purposes */
#media (max-width: 600px) {
.container {
flex-direction: column;
}
}
<div class="container">
<div class="block">content 1</div>
<div class="block">content 2</div>
<div class="block">content 3</div>
<div class="block">content 4</div>
</div>
I am creating an Layout for my project and I am working with Flexbox (see image and css style). Well it seems to be working but not for mobile. For example if I resise the screen then the columns will be resize but the right column (Map) is not jumping below the content. How can I do it?
HTML
<div class="container">
<div class="header"><h1>HEADER</h1></div>
<div class="main">
<div class="leftSide">
<div class="menuItem">Menu Item</div>
<div class="secondItem">Content</div>
</div>
<div class="rightSide">
<div class="thirdItem">Map</div>
</div>
</div>
</div>
CSS
// Layout start page
.container {
display: flex;
flex-direction: column;
}
.header{
border: 5px solid yellowgreen;
}
.main{
display: flex;
flex-wrap: wrap;
}
.leftSide{
flex:0 0 65%;
border: 5px solid red;
}
.rightSide{
flex: 1;
border: 5px solid black;
}
.menuItem {
border: 5px solid purple;
}
Add this to your CSS, change the width to whatever you need.
#media (max-width: 600px) {
.main{
display: flex;
flex-wrap: wrap;
flex-direction: column
}
}
Codepen: https://codepen.io/anon/pen/XPmMdQ
I'm trying to master the grid layout in CSS3. I want to write some HTML/CSS that enable the my 3x1 grid to stack when viewed on mobile. For now, the squares just keep shrinking until they're small. I've been able to work with mobile CSS before, but working with grids are new to me. Can anyone offer some pointers or suggestions?
Here's my code:
HTML:
<div class="container">
<div class="grid">
<div class="cell">
<img src="https://www.easycalculation.com/area/images/big-square.gif">
</div>
<div class="cell">
<img src="https://www.easycalculation.com/area/images/big-square.gif">
</div>
<div class="cell">
<img src="https://www.easycalculation.com/area/images/big-square.gif">
</div>
</div>
CSS:
.container {
width: 100%;
margin: 0 auto;
}
.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.cell {
flex: 0 0 32%;
margin-bottom: 5px;
}
img {
max-width: 100%;
height: auto;
}
body {
background-color: #dedede;
}
Here's a CodePen link as well: https://codepen.io/anfperez/pen/QrEBLZ
Try this CSS:
(codepen https://codepen.io/bonniemellott/pen/ELypzm)
.container {
width: 100%;
margin: 0 auto;
}
.grid {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.cell {
//removed flex attribute
margin-bottom: 5px;
}
img {
max-width: 100%;
height: auto;
}
body {
background-color: #dedede;
}
Add this to your css
You will have to use media query for stacking the boxes.
The way u can do this is by setting the flex-direction:column on smaller devices
#media (max-width: 768px) { /*You can decrese this number if you want only on small devices*/
.grid {
flex-direction: column;
}
}
Here is the updated codepen link
I successfully created two separate divs: one that floats left and one that floats right. Both of them are in the same section.
I would like the div to appear above the second div when the page is resized to about 600px.
Here is the code
.wrapper {
display: flex;
}
#left {
float: left;
}
#me {
width: auto;
height: auto;
max-width: 50%;
}
#right {
float: right;
}
<section class="wrapper">
<div id="left">
<img id="me" src="https://upload.wikimedia.org/wikipedia/en/thumb/4/47/Spongebob-squarepants.svg/1200px-Spongebob-squarepants.svg.png">
</div>
<div id="right">
<h1>Heading</h1>
<p>Text</p>
</div>
</section>
You can add a media query to get this layout. You just have to add flex-flow: row wrap; in media query for .wrapper.
When you are using flex property for an element, you don't have to
give float property for it's child element.
Here is the working Sinppet
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
#me {
width: auto;
height: auto;
max-width: 50%;
}
#media only screen and (max-width: 576px) {
.wrapper {
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
}
<section class="wrapper">
<div id="left">
<img id="me" src="https://upload.wikimedia.org/wikipedia/en/thumb/4/47/Spongebob-squarepants.svg/1200px-Spongebob-squarepants.svg.png">
</div>
<div id="right">
<h1>Heading</h1>
<p>Text</p>
</div>
</section>
You have already set display: flex; to your .wrapper so floating the nested elements is redundant. You can use media queries to achieve what you're after.
.wrapper {
display: flex;
}
#me {
width:auto;
height:auto;
max-width:50%;
}
#media all and (max-width: 600px) {
.wrapper {
display: block;
}
}
<section class="wrapper">
<div id="left">
<img id="me" src="https://upload.wikimedia.org/wikipedia/en/thumb/4/47/Spongebob-squarepants.svg/1200px-Spongebob-squarepants.svg.png">
</div>
<div id="right">
<h1>Heading</h1>
<p>Text</p>
</div>
</section>
the issue I am having is that when I change my browser size to tablet and mobile my quotes and testimonials named Jerry and Michelle go outside of the color background which makes me think that they aren't nested correctly. However, I looked at it and I believe it should work but somehow it isn't. The easiest way to see this since I just isolated this code and my whole site isn't pushing it out of the background colored box, is if you make the code snippet full-sized and put the browser to the smallest width. You will see the quotes outside of the colored box. If anyone could spot the issue and let me know it would be greatly appreciated! Thank you!
#colorbk{
background-color: #1DA0A3;
}
.container {
display: flex;
background-color: #1DA0A3;
flex-flow: row wrap;
max-width:1700px;
margin: 0 auto;
}
#qwrapper {
display: flex;
height: 100%;
width: 100%;
align-items:center;
justify-content:center;
margin:10px;
background-color:#1DA0A3;
}
.row {
flex: 0 auto;
height: 100px;
margin:0;
}
#lighticon{
padding-bottom:30px;
}
#jerry{
width:400px;
}
#michelle{
width:400px;
}
.italic{
font-style:italic;
}
.right{
float:right;
}
#media (max-width: 800px) {
#qwrapper {
flex-direction: column;
align-items: center;
}
}
#media screen and (max-width:480px) {
#qwrapper {
flex-wrap: wrap;
}
.row {
}
}
#media only screen and (min-width: 760px) {
#qwrapper{
justify-content: space-around;
margin:10px;
}
}
<div id="colorbk">
<div class="container">
<div id="qwrapper">
<h3 id="michelle" class="row" ><div class="italic">"She always thinks of her clients."</div>
<br>
<div class="right" id="connect">-Michelle Houle Conn. FSE</div>
</h3>
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" class="row" alt="" id="lighticon"/>
<h3 id="jerry" class="row"><div class="italic">"Very smart, creative person, problem solver."</div>
<br>
<div class="right">-Jerry Nygard C2P</div>
</h3>
</div>
</div>
</div>
You can simply solve the issue by removing width:400px from inner texts:
#jerry{
/*width:400px;*/
}
#michelle{
/*width:400px;*/
}
as in following snippet:
#colorbk{
background-color: #1DA0A3;
}
.container {
display: flex;
background-color: #1DA0A3;
flex-flow: row wrap;
max-width:1700px;
margin: 0 auto;
}
#qwrapper {
display: flex;
height: 100%;
width: 100%;
align-items:center;
justify-content:center;
margin:10px;
background-color:#1DA0A3;
}
.row {
flex: 0 auto;
height: 100px;
margin:0;
}
#lighticon{
padding-bottom:30px;
}
#jerry{
/*width:400px;*/
}
#michelle{
/*width:400px;*/
}
.italic{
font-style:italic;
}
.right{
float:right;
}
#media (max-width: 800px) {
#qwrapper {
flex-direction: column;
align-items: center;
}
}
#media screen and (max-width:480px) {
#qwrapper {
flex-wrap: wrap;
}
.row {
}
}
#media only screen and (min-width: 760px) {
#qwrapper{
justify-content: space-around;
margin:10px;
}
}
<div id="colorbk">
<div class="container">
<div id="qwrapper">
<h3 id="michelle" class="row" ><div class="italic">"She always thinks of her clients."</div>
<br>
<div class="right" id="connect">-Michelle Houle Conn. FSE</div>
</h3>
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" class="row" alt="" id="lighticon"/>
<h3 id="jerry" class="row"><div class="italic">"Very smart, creative person, problem solver."</div>
<br>
<div class="right">-Jerry Nygard C2P</div>
</h3>
</div>
</div>
</div>
Edit:
for your jsFiddle, i modify it as following:
jsfiddle.net/81d8trag/2
remove height:100px from .row class. also as the last icon has set its size with that row class, i add width:100px to it in #lighticon css:
.row {
flex: 0 auto;
/*height: 100px;*/
margin:0;
}
#lighticon{
width:100px;
padding-bottom:30px;
}
that's because you are fixing the width of
#jerry {
width: 400px;
}
#michelle {
width: 400px;
}
to 400px, so no matter how large or small your screen size is, it is fixed to 400px. if you want to make it responsive you have to use %.