i want to achieve a responsive image banner look using div like this https://www.prabhukrishna.com/css_image.jpg
on the mobile devices all the images should be aligned vertically.
i have tried many tricks but no luck
<style>
.columns {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 5px 0;
}
.column {
flex: 1;
margin: 2px;
padding: 10px;
}
</style>
<section class="columns">
<div class="column">
<img src="image1.jpg" >
</div>
<div class="column">
<img src="image2.jpg" >
</div>
<div class="column">
<img src="image3.jpg" >
</div>
<div class="column">
<img src="image4.jpg" >
</div>
<div class="column">
<img src="image5.jpg" >
</div>
</section>
this will get you started:
<!DOCTYPE html>
<html>
<head>
<style>
.img {
min-height: 150px;
min-width: 150px;
background-image: url("https://via.placeholder.com/150");
background-size: cover;
}
.image1 {grid-area: image1;}
.image2 {grid-area: image2;}
.image3 {grid-area: image3;}
.image4 {grid-area: image4;}
.image5 {grid-area: image5;}
.grid-container {
display: grid;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
#media screen and (max-width: 500px) {
.grid-container {
grid-template-areas:
'image1'
'image2'
'image3'
'image4'
'image5';
}
}
#media screen and (min-width: 500px) {
.grid-container {
grid-template-areas:
'image1 image5 image2'
'image3 image5 image4';
}
}
</style>
</head>
<body>
<div class="grid-container">
<div class="img image1"></div>
<div class="img image2"></div>
<div class="img image3"></div>
<div class="img image4"></div>
<div class="img image5"></div>
</div>
</body>
</html>
I recommend you search more about css grid & media queries, they are the hot topics of the css world we are living in.
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 1 year ago.
how do I make the three images on the top not go outside the div while keeping them to be 100% width so that their size remains the same and will be resized based on the browser size?
PS: I need them to be in row form
The ideal result should be like this:
#main {
background-color: #666666;
padding: 60px;
width: 390px;
}
#second {
display: flex;
flex-direction: row;
width: 100%;
margin-bottom: 30px;
}
.img-child {
width: 100%;
margin-right: 30px;
}
.img-child:last-child {
margin-right: 0;
}
#img-parent {
width: 100%;
}
<div id=main>
<div id=second>
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>
you need to add a min-width to your image. flex needs this for whatever reason, otherwise it will not downscale the elements. I come across this every time i use flex :D
.img-child {
min-width: 0;
width: 100%;
margin-right: 30px;
}
Try this :
body
{
height:100vh;
justify-content:center;
align-items:center;
display:flex;
}
#main {
width:391px;
background-color: #666666;
}
#main .img
{
width:100px;
float:left;
margin:15px;
}
#main .img:nth-child(4)
{
width:360px;
}
img
{
max-width:100%;
}
<div id=main>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
</div>
You can use max-width for each img.
I have edited your code for calculate padding each image below...
#main {
background-color: #666666;
padding: 60px;
width: 390px;
}
#second > div {
flex-basis: 100%;
flex-grow:1;
flex-shrink: 1;
padding-left: 15px;
padding-right:15px;
max-width:100%;
}
.img-child {
max-width:100%;
}
#second {
display: flex;
flex-direction: row;
margin-bottom: 30px;
margin-left:-15px;
margin-right:-15px;
}
#img-parent {
width: 100%;
}
<div id=main>
<div id=second>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>
#second{
display: flex;
align-items: center;
justify-content: space-around;
}
.img-child{
width: 30%;
margin-top: 30px;
margin-bottom: 30px;
}
#img-parent{
width: 97%;
margin-left: 12px;
}
<div id=main>
<div id=second>
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>
* {
box-sizing: border-box;
}
.main {
background-color: #666666;
padding: 60px;
width: 100%;
}
.second {
background-color: #666666;
display: flex;
flex-direction: row;
margin-bottom: 10px;
}
.column {
float: left;
width: 33.3%;
padding: 5px;
}
.largep {
background-color: #666666;
display: flex;
flex-direction: row;
width: 100%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
<style>
</style>
</head>
<body>
<div class="row main">
<div class="column second">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column second">
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column second">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
<div class="largep">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
issue in the layout
I want the layout to be 100% of the page but apparently there is a small gap at the bottom
is there a way to make the layout 100% of the page unless i enter a rich content in one of the child grids then a scrollbar should appear.
there is a gap in the layout, even tho the parent grid is set to 100vh 100wh.
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
.grid {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 4.5% 95.5%;
grid-template-rows: 7% 89% 4%;
grid-template-areas:
"sidebar header"
"sidebar content"
"footer footer";
}
.header{
grid-area: header;
background-color: #EDEDED;
}
.sidebar{
grid-area: sidebar;
background-color: #EDEDED;
}
.content{
grid-area: content;
background-color: #f7f7f7;
display: grid;
width:100%;
height:100%;
}
.footer{
grid-area: footer;
background-color: green;
}
.img-circle {
width: 70%;
background: #fff;
margin-left: 15%;
z-index: 1000;
position: inherit;
margin-top: 20px;
border: 1px solid rgba(52,73,94,.44);
padding: 4px;
border-radius: 50%;
}
.sidebar{
padding-left: 0;
display: block;
margin-bottom: 0;
list-style: none;
}
.maintenance{
display:grid;
grid-template-rows: 15% 85%;
grid-template-areas:
"maintenance-nav"
"maintenance-info"
}
.maintenance-nav{
grid-area: maintenance-nav;
background-color: ##f7f7f7;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #25aaff;
}
.maintenance-info{
grid-area: maintenance-info;
background-color: blue;
}
.components{
display:grid;
grid-template-columns: 30% 70%;
grid-template-rows: 10% 90%;
grid-template-areas:
"components-name components-nav"
"components-name components-data";
width:100%;
height: 100%;
}
.components-name{
grid-area:components-name;
background-color: red;
}
.components-nav{
grid-area: components-nav;
background-color: blue;
display:flex;
justify-content: space-around;
align-items: center;
background-color: #f7f7f7;
}
.components-data{
grid-area: components-data;
background-color: yellow;
}
.maintenance-nav > div {
display: inline-block;
height: 60px;
background-color: white;
text-align: center;
margin: 30px;
border-radius: 10px;
width: 13%;
font-family: "Helvetica Neue",Roboto,Arial,"Droid Sans",sans-serif;
}
.components-nav-links li {
list-style: none;
display: inline-block;
padding: 0px 20px;
}
.components-nav-links li a{
transition: all 0.3s ease 0s;
}
.components-nav-links li a:hover {
color:#419C99;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/custom.css') }}">
<title></title>
</head>
<body>
<!--Layout grid -->
<div class="grid">
<!--header grid-->
<div class="header">Header</div>
<!--sidebar grid-->
<div class="sidebar">
<!--sidebar logo-->
<img src="{{ url_for('static', filename='images/fleet.png') }}" alt="..." class="img-circle profile_img"></div>
<!--nav list-->
<div>
</div>
<!--contenant grid-->
<div class="content">
<div class="maintenance">
<div class="maintenance-nav">
<div>Components</div>
<div>Worklist</div>
<div>Running Hours</div>
<div>Jobs Report</div>
<div>Cost Estimation</div>
<div>Logs</div>
</div>
<div class="maintenance-info">
<div class=components>
<div class="components-name"></div>
<div class="components-nav">
<nav>
<ul class="components-nav-links">
<li>Component Data</li>
<li>Jobs</li>
<li>Documents</li>
<li>Logs</li>
</ul>
</nav>
</div>
<div class="components-data">Components data</div>
</div>
</div>
</div>
</div>
</div>
<!--footer grid-->
<div class="footer">Footer</div>
</div>
</body>
</html>
Your .footer is outside the .grid element, because you have too many closing </div>'s.
Try this one:
<div class="grid">
<!--header grid-->
<div class="header">Header</div>
<!--sidebar grid-->
<div class="sidebar">
<!--sidebar logo-->
<img src="{{ url_for('static', filename='images/fleet.png') }}" alt="..." class="img-circle profile_img"></div>
<!--nav list-->
<div>
</div>
<!--contenant grid-->
<div class="content">
<div class="maintenance">
<div class="maintenance-nav">
<div>Components</div>
<div>Worklist</div>
<div>Running Hours</div>
<div>Jobs Report</div>
<div>Cost Estimation</div>
<div>Logs</div>
</div>
<div class="maintenance-info">
<div class=components>
<div class="components-name"></div>
<div class="components-nav">
<nav>
<ul class="components-nav-links">
<li>Component Data</li>
<li>Jobs</li>
<li>Documents</li>
<li>Logs</li>
</ul>
</nav>
</div>
<div class="components-data">Components data</div>
</div>
</div>
</div>
</div>
<!--footer grid-->
<div class="footer">Footer</div>
</div>
With this tool you can verify if your html structure is OK:
https://validator.w3.org/#validate_by_input
You have defined the display of the container .grid as grid and also have defined grid-template-areas within the container .grid. But, while writing markups in HTML file, you have put your .footer container outside the .grid parent container.
I'm trying to fill an area of web page of a certain, fixed size with an unknown number of images (max 10), maximising the size of the images without overflowing the area. To be mobile friendly, I want it to work both in landscape and portrait mode without needing scrolling.
I've been trying to use flexboxes to have the images wrap, but then they don't scale down and end up overflowing the area. If I use non-wrapping flexboxes, the images scale in landscape mode, but not in portrait. I feel there should be a nice, simple solution to this. Any ideas?
Update:
Here's the essence of the code I've got so far. I've been trying a lot of different things, but this is the cleanest.
html {
height: 100%;
}
body {
padding-top: 0;
padding-bottom: 0;
height: 100%;
}
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
text-align: center;
}
.above {
margin-bottom: 20px;
font-size: larger;
background-color: lightgrey;
}
.middle {
flex-grow: 1;
max-height: 100%;
}
.below {
margin-top: 20px;
background-color: lightgrey;
}
img {
border: 5px solid transparent;
height: 100%;
}
.images {
flex-direction: row;
justify-content: center;
display: flex;
flex-wrap: wrap;
height: 100%;
}
.image {
margin: 5px;
}
<html>
<body>
<div class="container">
<div class="above">
Some text about the images
</div>
<div class="middle">
<div class="images">
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
</div>
</div>
<div class="below">
<button>Ok</button>
<button>Cancel</button>
</div>
</div>
</body>
</html>
The point is to try to get the images to stay completely within the div called "middle", but scaled as large as possible. Here are a few wireframes.
Landscape, 10 images:
Portrait, 10 images:
Portrait, 4 images
I Think you need to consider flex property here, it's the short hand version of flex-grow, flex-shrink, and flex-basis properties. See if this is what you're looking for.
html,body{
padding: 0;
margin: 0;
width: 100vw;
box-sizing: border-box;
}
.container{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
}
.row{
display: flex;
width: 100%;
flex-direction: row;
}
.col{
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
}
.item{
display: flex;
max-width: 100%;
height: 150px;
background-color: #222;
margin: 1%;
flex: 1 1 15%;
}
#media only screen and (max-width: 600px) {
.item {
height: 100px;
flex: 1 1 45%;
max-width: 100%;
}
}
<div class="container">
<div class="row ">
<div class="col">
<h1>some text about images</h1>
</div>
</div>
<div class="row">
<div class="col">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="row">
<div class="col">
<p>Some other elements</p>
</div>
</div>
</div>
I have modular grid of cards with and without image, based on flexbox.
Normally cards without image are 50% of the width, cards with image are 100% of the width, and those cards without image that doesn't have a pair are also 100%.
----------------
[[ txt ][ img ]] – card with an image
----------------
[ txt ][ txt ] – 2 cards without image
----------------
[ txt ] – card without image
----------------
[[ txt ][ img ]] – card with an image
----------------
Is it possible to maintain ratio of the cards and its content while resize, and also maintain modularity with css?
Here's the code
that let me maintain ratio, but when I try to apply this technique to cards children everything breakes
<div class="wrapper">
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
</div>
.wrapper
display: flex
flex-wrap: wrap
justify-content: space-between
width: 620px
.card
height: 0
padding-bottom: 50%
display: flex
flex-direction: row
justify-content: space-between
flex: 1 1 300px
.has-card-image .card-text,
.has-card-image .card-image
height: 300px
width: 300px
I can see one way this could be done w/o script.
Either as in this case, using px values, or e.g. using vw, and the reason is that the card-text and card-image needs to know the wrapper's width to be able to size according to the expected output (which mean percent can't be used).
Fiddle demo
Stack snippet
.wrapper {
display: flex;
flex-wrap: wrap;
width: 600px;
}
.card {
display: flex;
flex: 1 300px;
}
.card .card-text,
.card .card-image {
height: 100px;
width: 300px;
}
.card .card-text:only-child {
flex: 1 300px;
}
/* demo styles */
.card .card-text, .card .card-image {
border: 1px solid;
box-sizing: border-box;
}
.card .card-text::before {
content: 'text';
}
.card .card-image::before {
content: 'image';
}
<div class="wrapper">
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
</div>
If you need the margin, you'll need an extra wrapper
Fiddle demo
Stack snippet
.wrapper {
width: 620px;
overflow: hidden;
}
.inner {
display: flex;
flex-wrap: wrap;
margin-left: -20px;
}
.card {
display: flex;
flex: 1 300px;
}
.card .card-text,
.card .card-image {
height: 100px;
width: 300px;
margin-left: 20px;
}
.card .card-text:only-child {
flex: 1 300px;
}
/* demo styles */
.card .card-text,
.card .card-image {
border: 1px solid;
box-sizing: border-box;
}
.card .card-text::before {
content: 'text';
}
.card .card-image::before {
content: 'image';
}
<div class="wrapper">
<div class="inner">
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
</div>
</div>
Updated
Here is a version using vw and margin, and is responsive.
Note, the make up for margin set on the wrapper can also be set on each item, though I found it simpler like this.
Fiddle demo
Stack snippet
.wrapper {
width: calc(80vw + 20px); /* 20px extra for margin */
margin: 0 auto;
overflow: hidden;
}
.inner {
display: flex;
flex-wrap: wrap;
margin-left: -20px;
}
.card {
display: flex;
flex: 1 40vw;
}
.card .card-text,
.card .card-image {
height: 100px;
width: 40vw;
margin-left: 20px;
}
.card .card-text:only-child {
flex: 1 40vw;
}
/* demo styles */
.card .card-text,
.card .card-image {
border: 1px solid;
box-sizing: border-box;
}
.card .card-text::before {
content: 'text';
}
.card .card-image::before {
content: 'image';
}
<div class="wrapper">
<div class="inner">
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
</div>
</div>
I tried switching one sandwich column and two columns by using flex. However, I could not do it without using two div tags and display: none;
Could you please give me any advice?
One column image
Two columns image
HTML
<div class="container">
<div class="category1">
<div class="timezone1">timezone1</div>
<div class="menu1">menu1</div>
<div class="timezone2">timezone2</div>
<div class="menu2">menu2</div>
<div class="timezone3">timezone3</div>
<div class="menu3">menu3</div>
</div>
</div>
<div class="pc-container">
<div class="pc-category1">
<div class="pc-timezone1">timezone1</div>
<div class="pc-timezone2">timezone2</div>
<div class="pc-timezone3">timezone3</div>
</div>
<div class="pc-category2">
<div class="pc-menu1">menu1</div>
<div class="pc-menu2">menu2</div>
<div class="pc-menu3">menu3</div>
</div>
</div>
CSS
.container {
display: flex;
flex-flow: column wrap;
}
.pc-container {
display: none;
}
#media screen and (min-width: 768px){
.container {
display: none;
}
.pc-container {
display: flex;
flex-flow: row wrap;
}
}
These images are added July 28.
Initial screen
Narrow to show smartphone screen
Re-large to show PC screen, but each column is not side by side.
Just switch from columns to wrapping rows....
.category1 {
display: inline-flex;
border: 1px solid grey;
padding: .5em;
flex-direction: column;
}
#media screen and (min-width: 500px) {
.category1 {
flex-direction: row;
flex-wrap: wrap;
}
.category1 > div {
white-space: nowrap;
flex: 0 1 50%;
}
.category1 > [class^="menu"] {
text-align: right;
}
}
<div class="container">
<div class="category1">
<div class="timezone1">timezone1</div>
<div class="menu1">menu1</div>
<div class="timezone2">timezone2</div>
<div class="menu2">menu2</div>
<div class="timezone3">timezone3</div>
<div class="menu3">menu3</div>
</div>
</div>
Codepen Demo
Here's another option: http://codepen.io/panchroma/pen/LkALXG/
HTML
<div class="container">
<div class="timezone">timezone1</div>
<div class="menu">menu1</div>
<div class="timezone">timezone2</div>
<div class="menu">menu2</div>
<div class="timezone">timezone3</div>
<div class="menu">menu3</div>
</div>
CSS
.timezone,
.menu{
width:50vw;
display:inline-block;
}
.menu{
float:right;
}
#media screen and (max-width: 767px){
.menu,
.timezone{
float:none;
display:block;
width:auto;
}
}
Good luck!