I have two container. Outer container is wrapping inner container.And in inner container is wrapping two dives. For inner container CSS is display flex. For small screen size I mention display block using media quire which is not working.What I am doing wrong.For small screen two div should stacking up.Why media quire not working? When I should give max-width to image?
.row2{
display: flex;
padding:2em 3em;
}
.outercontainer{
background-color: darkgray;
}
#media (min-device-width: 426px) and (max-device-width: 764px) and (-webkit-min-device-pixel-ratio: 2) {
.row2{
display: block;
padding: 0.1em;
}
.image2{
width: 100%;
}
}
<div class="outercontainer">
<div class="innercontainer row2">
<div class="col text">
<h3>title text</h3>
<p>This is simple test text This is simple test text This is simple test text This is simple test text This is simple test text This is simple test text</p>
</div>
<div class="col image">
<img class="image2" src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8bmF0dXJlfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" />
</div>
</div>
</div>
Adding flex-direction: column to the Flexbox container .row2 inside your media query creates a stacked "column" layout at smaller viewports so the image appears underneath the text. The media query max-width value might need to bumped up a bit to around 1000px so the flex-direction column layout happens sooner and the text next to the image doesn't appear squished. Try this out.
Also, the device-width media feature is deprecated and no longer recommended. Use min-width and max-width for length values in your media queries instead.
.row2 {
display: flex;
padding:2em 3em;
}
.outercontainer {
background-color: darkgray;
}
/* 764px max-width makes the image squish the text, try around 1000px */
#media (min-width: 426px) and (max-width: 1000px) and (-webkit-min-device-pixel-ratio: 2) {
.row2 {
display: flex;
flex-direction: column;
padding: 0.1em;
}
.image2 {
width: 100%;
}
}
<div class="outercontainer">
<div class="innercontainer row2">
<div class="col text">
<h3>title text</h3>
<p>This is simple test text This is simple test text This is simple test text This is simple test text This is simple test text This is simple test text</p>
</div>
<div class="col image">
<img class="image2" src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8bmF0dXJlfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" />
</div>
</div>
</div>
Related
I have 2 blocks that are wrapped in flex container. I specified so that flex-row will wrap, but is there any way to clearly indicate when should elements wrap? I want to resize content inside flex-items until some breakpoint and only then wrap them.
Code looks like that:
.flex-row{
display:flex;
flex-wrap:wrap;
}
<div class='flex-row'>
<div class="block1">
<h2>Some title</h2>
<p>Some text</p>
</div>
<div class="block2">
<img src="img"/>
</div>
</div>
Appreciate your help. Thank you in advance.
Without the flex-wrap property it wont wrap so you can use media querys to exactly define when to wrap the elements. But you also have to set the width for the flex-items.
.flex-row {
display: flex;
}
/* Wrap */
#media only screen and (max-width: 1023px) {
.flex-row {
flex-wrap: wrap;
}
.block1,
.block2 {
width: 100%;
}
}
<div class='flex-row'>
<div class="block1">
<h2>Some title</h2>
<p>Some text</p>
</div>
<div class="block2">
<img src="http://via.placeholder.com/350x350"/>
</div>
</div>
You could use min-width on the blocks. This means they will fully stretch, but when the screen size limits them to being 200px in this example, that breakpoint will lead them to wrap, and their width will never go below 200px.
Another option is to just apply flex-wrap: wrap; on that specific breakpoint you want with a media-query.
For further control, you could also look into flex-basis: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
EDIT: Responsive image
Genereally it's good to include this line of code on most images: max-width: 100%; height: auto; as this will make images auto-responsive. max-width: 100%; forces the image to never overflow from its container, and height: auto; adjusts the images height so its aspect ratio is correct. Try dragging the screen size and you will see its effect :)
.flex-row {
display: flex;
flex-wrap: wrap;
}
.block1,
.block2 {
min-width: 200px;
}
.block2 img {
max-width: 100%;
height: auto;
}
<div class='flex-row'>
<div class="block1">
<h2>Some title</h2>
<p>Some text</p>
</div>
<div class="block2">
<img src="http://via.placeholder.com/350x350" />
</div>
</div>
I'm trying to arrange my containers with Flexbox (not Grid!) to look like this image
With the following HTML:
<div class="container">
<div class="sub-container">
<div class="top-sub-container">
<div class="box box-1">
<img src="yourChoice.png" />
<div class="box-text">
This is the text of the box 1
</div>
</div>
<div class="box box-2">
<img src="yourChoice.png" />
<div class="box-text">
This is the text of the box 2
</div>
</div>
</div>
<div class="box box-3">
<img src="yourChoice.png" />
<div class="box-text">
This is the text of the box 3
</div>
</div>
</div>
<div class="box box-4">
<img src="yourChoice.png" />
<div class="box-text">
This is the text of the box 4
</div>
</div>
</div>
And this CSS:
.container {
display: flex;
gap: 1rem;
height: 25rem;
width: 25rem;
padding: 1rem;
background: pink;
}
.top-sub-container {
flex: 1 1 auto;
display: flex;
gap: 1rem;
}
.sub-container {
flex: 1 1 auto;
display: flex;
gap: 1rem;
flex-direction: column;
}
.box {
display: flex;
flex: 1 1 auto;
flex-direction: column;
border: 1px solid black;
}
However I am getting stuck with my media queries and making this design responsive. Is it because I'm not using calc to evenly divide my flex items within the container? Or does calc have nothing to do with this problem?
If calc is irrelevant, how do I make this layout suitable for a media query with a max-width of 800px? When I test it out on different screen sizes using Dev Tools, there are large gaps.
I am trying to fix it by creating different media query outcomes, but now I'm wondering if there is a maximum amount of media queries I should be creating.
Your advice is gratefully appreciated.
You don't need to many containers, one parent div should be enough for the ".box" classed elements. With one parent, media queries would be much easier to control with different screen sizes.
Having trouble conceptualizing how to go about making this set of boxes. They need to be horizontal and centered, but stack on a smaller screen size. Also need to center the image and two types of text. Appreciate your thoughts!
What I have so far:
Need to start with a main container and hold all 4 boxes inside of it. Not sure how to get the horizontal display or the stacking feature on smaller screens. Also unsure how to center the content inside of each box - not sure if I should use static or dynamic formatting inside the boxes.
I'd recommend using flex and media queries if you don't want to go down the bootstrap (or other grid layout) route.
HTML:
<div class="wrapper">
<div class="box">
<div class="image">Image</div>
<h1>Title Text</h1>
<div>detailed text that explains what the title means</div>
</div>
<div class="box">
<div class="image">Image</div>
<h1>Title Text</h1>
<div>detailed text that explains what the title means</div>
</div>
<div class="box">
<div class="image">Image</div>
<h1>Title Text</h1>
<div>detailed text that explains what the title means</div>
</div>
<div class="box">
<div class="image">Image</div>
<h1>Title Text</h1>
<div>detailed text that explains what the title means</div>
</div>
</div>
CSS:
.wrapper {
display: flex;
flex-direction: column;
}
.box {
width: 100%;
padding: 10px;
text-align: center;
border: 1px solid black;
}
.image {
display: inline-block;
background: black;
color: white;
padding: 10px;
}
#media (min-width: 600px) {
.wrapper {
flex-direction: row;
}
.box {
width: auto;
flex-grow: 1;
}
}
https://codepen.io/anon/pen/GvMPQe
Check out bootstrap. It is a responsive plugin used in many websites including Twitter. Highly recommend and great for designing multiplatform websites.
I have a 3 column layout in my HTML which looks like this
[ [leftdiv] [centerdiv] [rightdiv] ]
I'm not really a UI guy so I need help to deal with this stuff in css
for responsive design. The HTML layout below represents the above sketch.
<div class="container">
<div class="leftdiv" style="width:25%;height:auto;float:left; background-color:white">
</div>
<div class="centerdiv" style="width:50%;height:auto;float:left; background-color:white">
</div>
<div class="rightdiv" style="width:25%;height:auto;float:right;background-color:white;margin-top:15px">
</div>
</div>
I need to make my 3 column divs to be responsive based on the screen width of the browser. So let's say if I resize
my browser's width to a lesser width like a screen width of a smart phones or tablet, the 3 divs should realign themselves
relatively like this below
[
[leftdiv]
[centerdiv]
[rightdiv]
]
How do I achieve this? Thanks
With a #media query
.col {
width: 25%;
height: auto;
float: left;
background: white;
}
.centerdiv {
width: 50%;
}
.rightdiv {
float: right;
margin-top: 15px
}
#media (max-width: 640px) {
.col {
float: none;
width: auto;
}
}
<div class="container">
<div class="leftdiv col">left
</div>
<div class="centerdiv col">center
</div>
<div class="rightdiv col">right
</div>
</div>
To do this in bootstrap, just utilize the grid column classes.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-3">left</div>
<div class="col-sm-6">center</div>
<div class="col-sm-3">right</div>
</div>
</div>
They're called #media queries and they are the underlying principle of responsive design. They are basically wrappers around CSS delarations applying only if the #media query condition is true.
.leftdiv, rightdiv, centerdiv {
background-color: white;
}
.right-div {
margin-top:15px
}
#media (min-width: 600px) {
.leftdiv {
width:25%;
float:left;
}
.centerdiv {
width:50%;
float:left;
}
.rightdiv {
width:25%;
float:right;
}
}
<div class="container">
<div class="leftdiv">Left div</div>
<div class="centerdiv">Right div</div>
<div class="rightdiv">Center div</div>
</div>
I've placed your inline styles in CSS, where they belong (you can't use media queries without either a <style> tag or a stylesheet - .css file); I also streamlined them a bit.
Since what you want is default <div> behavior, I only placed the rules making them behave like columns (floats and widths) in a media query that applies on devices wider than 600px (CSS pixels).
Of course, you can change 600px to whatever you like and you can have as many #media queries as you like.
You can also use display:flex with media queries to adjust the layout.
See fiddle: https://jsfiddle.net/xdr9fhh1/
html
<div class="container">
<div class="leftdiv">left</div>
<div class="centerdiv">center</div>
<div class="rightdiv">right</div>
</div>
css
.container{
display: flex;
justify-content: space-between;
}
.leftdiv, .rightdiv{
flex-grow: 1;
background-color: red;
}
.centerdiv{
flex-grow: 2;
}
#media (max-width: 800px) {
.container{
flex-direction: column;
}
}
I am writing a plugin for WordPress. The layout is as following, displayed in a horizontal row:
<div class="row">
<div class="thumbnail">
<div class="information">
</div>
The PHP-function alternates the divs so every other row is the opposite order, like so:
<div class="row">
<div class="information">
<div class="thumbnail">
</div>
This is all working out in a fullscreen page, but on smaller screen I would like to get the "row" displayed vertically non-alternating.
So I'd like to get the thumbnail displayed first, then the information for every row.
When adding the #media statements for the div to pop down, I get the wrong order due to the alternating divs like so:
1st thumbnail
1st information
2nd information
2nd thumbnail
So I wonder if it's even possible to change through CSS? Been trying a lot of different floats and n-th childs but I end up with the same results.
Here is a jsbin to show the layout I am using:
JSBIN
You can use order with a mediaquery or with a min-width to set a break point .
.row {
margin: 0;
padding: 0;
height: 100%;
display: flex;
flex-wrap:wrap;
}
.information {
flex: 1;
padding: 5%;
min-width:250px;/* set a breakpoint at 500px where thumb is set at 50% */
}
.thumbnail {
flex: 1;
min-width: 50%;/* min-width will allow to spray on the whole line when alone */
background: teal;
}
#media screen and (max-width: 640px) {
.row:nth-child(odd) .thumbnail {
order:1;
}
}
<div class="row">
<div class="thumbnail">thumb</div>
<div class="information">information goes here</div>
</div>
<div class="row">
<div class="information">information goes here</div>
<div class="thumbnail">thumb</div>
</div>
<div class="row">
<div class="thumbnail">thumb</div>
<div class="information">information goes here</div>
</div>
min-width + order http://jsbin.com/xupurikuxu/1/edit?html,css,output
mediaquerie http://jsbin.com/senobugubi/1/edit?html,css,output