I would like to create a responsive card in HTML and CSS without using bootstrap like this:
It'd be better to use flex like this:
* {
padding: 0;
margin: 0;
}
.container {
display: flex;
flex-direction: row;
justify-content: center;
height: 100vh;
flex-wrap: no-wrap;
}
.container div {
width: 50%;
height: 200px;
}
.picture {
background: #4451c2;
}
.text {
background: #f451c2;
}
#media (max-width: 600px) {
.container {
flex-direction: column;
}
.container div {
width: 100%;
}
}
<div class="container">
<div class="picture">picture</div>
<div class="text">Some text is here</div>
</div>
With #media rule where we will change width to 100% and flex-order to column.
P.S.: don't pay attention to the blocks's height, this is just for example how to solve your problem with screen size.
Related
I am new to responsive styling and couldnt find a solution to my problem elsewhere:
I have two horizontally aligned tiles on Desktop viewport. One is a div that contains text, the other is an image.
My code for this:
.tile-image{
width: 70%;
}
.tile-text{
width: 30%;
background-color: #d9b886;
color: white !important;
font-size: 2vh;
display: table;
word-wrap: break-word;
white-space: normal;
}
.tile-text-inner{
display: table-cell;
vertical-align: middle;
padding: 20px;
}
.container{
display: flex;
flex-direction: row;
}
<div class="container">
<div class="tile-text">
<div class="tile-text-inner">
TEXT
</div>
</div>
<div class="tile-image">
<img src="https://test-shop.tt-gmbh.de/media/a9/b8/4c/1638172501/13811-AdobeStock_294559939_New-Africa.jpg">
</div>
</div>
On mobile viewport I want to display both tiles vertically with the image on top and the text tile below. Like in the image below:
How can I achieve this?
You can use media queries
#media screen and (max-width: 600px) {
.container {
flex-direction: column-reverse;
}
.tile-text{width: 100vw}
}
.tile-image{
width: 70%;
}
.tile-text{
width: 30%;
background-color: #d9b886;
color: white !important;
font-size: 2vh;
display: table;
word-wrap: break-word;
white-space: normal;
}
.tile-text-inner{
display: table-cell;
vertical-align: middle;
padding: 20px;
}
.container{
display: flex;
flex-direction: row;
}
#media screen and (max-width: 600px) {
.container {
flex-direction: column-reverse;
}
.tile-text{width: 100vw}
}
<div class="container">
<div class="tile-text">
<div class="tile-text-inner">
TEXT
</div>
</div>
<div class="tile-image">
<img src="https://test-shop.tt-gmbh.de/media/a9/b8/4c/1638172501/13811-AdobeStock_294559939_New-Africa.jpg">
</div>
</div>
In comments they were saying truth you have to use flex-direction: column but it won't work because what you had written css isn't responsive friendly code so I re-created new one, use media-queries for responsive, and please avoid using a lot div wrapping it makes lots of complexity
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
position: relative;
width: 100%;
height: 100vh;
}
.container img {
width: 100%;
height: 100%;
position: absolute;
}
.container .tile-text{
display: flex;
justify-content: center;
align-items: center;
width: 30%;
z-index: 9;
height: 100%;
background: #d9b886;
}
.container .tile-text .tile-text-inner{
color: #FFF;
}
#media screen and (max-width: 761px){
.container{
flex-direction: column-reverse;
}
.container .tile-text{
width: 100%;
height: 30%;
}
}
<div class="container">
<div class="tile-text">
<div class="tile-text-inner">
Marry Christmas
</div>
</div>
<img src="https://test-shop.tt-gmbh.de/media/a9/b8/4c/1638172501/13811-AdobeStock_294559939_New-Africa.jpg">
</div>
I am trying to make my app responsive. The original css looks like this :
.footer-container {
width: 100%;
min-height: 260px;
height: auto;
background: black;
color: white;
display: flex;
justify-content: center;
flex-wrap: wrap;
position: absolute;
}
The output is this :
But when the screen width reaches 1020px i want them to be underneath eachother.
I tried making the display:flex display:block :
#media only screen and (max-width: 1020px) {
.footer-container {
width: 100%;
min-height: 260px;
height: auto;
background: black;
color: white;
display: block;
text-align: center;
justify-content: center;
position: absolute;
}
}
But that turns out like :
I also tried flex-direction: row but that didn't work either, it practically didnt change a single thing.
Using basic HTML below a solution using a media query. Mobile first and when the screen size exceeds 1024 pixels the media query kicks in.
.footer-container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.contact,
.subscribe,
.follow {
width: 100%;
display: flex;
justify-content: center;
}
#media (min-width: 1024px) {
.footer-container {
flex-wrap: no-wrap;
justify-content: center;
}
.contact,
.subscribe,
.follow {
width: auto;
}
}
<div class="footer-container">
<div class="contact">Contact us</div>
<div class="subscribe">Subscribe</div>
<div class="follow">Follow us</div>
</div>
I'm trying to create an element that will hold various images that should be responsive (width AND height). So far using flexbox has been successful except for one thing. Every time I reduce the width of my window, at a certain point, the flex items overflow the parent container and spill out beyond the containers width.
nav {
position: fixed;
top: 0;
left: 0;
height: 80px;
line-height: 80px;
background: black;
color: #fff;
width: 100%;
text-align: center;
}
body, p {
margin: 0;
padding: 0;
width: 100vw;
}
.wrapper {
height: 100vh;
margin: 100px auto;
min-width: 0;
}
.flex {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: 100%;
min-width: 200px;
flex-wrap: nowrap;
}
img {
max-height: 100%;
max-width: 100%;
}
.txt-rt {
text-align: right;
}
.footer {
background: darkgray;
height: 300px;
text-align: center;
}
<nav>This is a Navbar</nav>
<div class="wrapper">
<div class="flex">
<p>hello</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" alt="">
<p class="txt-rt">world</p>
</div>
</div>
<div class="footer">
<h3 class="footer">Footer content</h3>
</div>
In this CodePen example, each time the window width is <560px or so and the height is at least 600px, the image is no longer responsive in width and the content overflows outside the screen.
All the other functionality looks like it's working as expected, but once I reduce my window width to a certain point the image will not shrink down. This prevents all 3 flex items being viewable in the width of the screen. Is there code I should be adding - not media queries since various sizes of images will be used - to make sure the image is responsive no matter the size of the window? Note: I don't want the items to wrap down to a second line.
You can use this code
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
text-align: center;
}
#main {
display: flex;
flex: 1;
flex-direction: column;
}
#main>article {
flex: 1;
text-align: center;
}
#main>nav,
#main>aside {
background: beige;
}
#main>nav {
order: -1;
}
header,
footer {
background: yellowgreen;
height: 20vh;
}
header,
footer,
article,
nav,
aside {
padding: 1em;
}
#media screen and (min-width: 576px) {
#main {
flex-direction: row;
}
#main>nav,
#main>aside {
flex: 0 0 20vw;
}
}
<header>This is a Navbar</header>
<div id="main">
<article><img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" alt=""></article>
<nav>hello</nav>
<aside>world</aside>
</div>
<footer>Footer content</footer>
.flex {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: 100%;
min-width: 200px;
flex-wrap: wrap; // this will move your content to new line if there is less space
}
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 have a small layout of sections
.collection {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.collection section {
width: 50%;
}
<div class="collection">
<section>
<h2>bar</h2>
</section>
<section>
<h3>baz</h3>
</section>
<section>
<h1>FOO</h1>
</section>
</div>
Then everything is positioned in one column. I'd expect such a layout
___________
| h2 | |
|____| h1 |
|_h3_|____|
I know that the layout would wrap if I set max-width. But I don't know the div size in advance. My intent is to wrap in such a way that both columns have equal height.
How can I achieve it?
By giving the h1 section a 100% height, it will be forced into a new column.
* {
margin: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.collection {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100%;
}
.collection section {
width: 50%;
flex: 1;
border: 1px dashed black;
}
.collection section:last-child {
flex-basis: 100%;
}
#media ( max-width: 700px ) {
.collection section { width: 100%; }
.collection section:last-child { flex-basis: auto; }
}
<div class="collection">
<section><h2>bar</h2></section>
<section><h3>baz</h3></section>
<section><h1>FOO</h1></section>
</div>
jsFiddle