I need help to find a solution with a "grid" layout in css. I have 3 rown of images and I need the images to dynamically and automatically change with when the browser window gets smaller.
The layout can be found here:
I have set it up like this and it sort of works but I am not 100% atisfied so I wonder if someone can help me do it even more responsive and dynamic.
<!--HTML code-->
<div class="container">
<div class="box1"><img src="BILDER/Inkastare/slang.jpg" class="img slang" /></div>
<div class="box1"><img src="BILDER/Inkastare/olja.jpg" class="img olja" /></div>
<div class="box1"><img src="BILDER/Inkastare/slangpressar.jpg" class="img slangpressar" /></div>
<div style="clear: both;"></div>
<div class="box2"><img src="BILDER/Inkastare/filter.jpg" class="img filter" /></div>
<div class="box1"><img src="BILDER/Inkastare/sagmotorer.jpg" class="img sagmotorer" /></div>
<div style="clear: both;"></div>
<div class="box4"><img src="BILDER/Inkastare/givare.jpg" class="img givare" /></div>
<div class="box4"><img src="BILDER/Inkastare/packningar.jpg" class="img packningar" /></div>
<div class="box4"><img src="BILDER/Inkastare/matarhjul.jpg" class="img matarhjul" /></div>
<div class="box4"><img src="BILDER/Inkastare/cylindrar.jpg" class="img cylindrar" /></div>
</div>
/* CSS-Code */
.container {
width: 99%;
}
.img.slang, .img.olja, .img.slangpressar, .img.filter, .img.sagmotorer, .img.givare, .img.packningar, .img.matarhjul, .img.cylindrar {
margin-right: 19px;
margin-bottom: 19px;
float: left;
width: 100%;
}
.box1 {
width: 97%;
max-width: 410px;
min-width: 200px;
padding: 0;
float: left;
margin-right: 19px;
}
.box2 {
width: 97%;
max-width: 838px;
min-width: 200px;
padding: 0;
float: left;
margin-right: 19px;
}
.box4 {
width: 97%;
max-width: 303px;
min-width: 200px;
padding: 0;
float: left;
margin-right: 19px;
}
You may also use a grid system, alike bootstrap based on a 12 columns to dispatch your boxes :
example :
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
[class^="box"] {
background: white;
}
[class^="box"] img {
width: 100%;
height: 100%;
vertical-align: top;
ob-ject-fit: cover;
}
.box3 {
grid-column: span 3
}
.box4 {
grid-column: span 4
}
.box8 {
grid-column: span 8
}
/* makeup */
.container {
gap: 19px;
background: #DB545A;
width: 800px;
max-width: 99%;
margin: 1em auto;
border: solid;
}
<div class="container">
<div class="box4"><img src="https://picsum.photos/id/1/240/200" class="img slang" /></div>
<div class="box4"><img src="https://picsum.photos/id/1011/240/200" class="img olja" /></div>
<div class="box4"><img src="https://picsum.photos/id/1001/240/200" class="img slangpressar" /></div>
<div class="box8"><img src="https://picsum.photos/id/1016/500/200" class="img filter" /></div>
<div class="box4"><img src="https://picsum.photos/id/1002/240/200" class="img sagmotorer" /></div>
<div class="box3"><img src="https://picsum.photos/id/1008/200/200" class="img givare" /></div>
<div class="box3"><img src="https://picsum.photos/id/1020/200/200" class="img packningar" /></div>
<div class="box3"><img src="https://picsum.photos/id/106/200/200" class="img matarhjul" /></div>
<div class="box3"><img src="https://picsum.photos/id/108/200/200" class="img cylindrar" /></div>
</div>
useful ressource :
https://css-tricks.com/snippets/css/complete-guide-grid/
https://gridbyexample.com/
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
I would recommend to use css flex-box as it is responsive and flexible. You could do something like this:
.container{
display: flex;
flex-wrap: wrap;
}
I recommend you to read through the guide I linked above.
Related
In fact, I would like to put my elements towards the left as below:
On my second_text class, I added text-align: left; but I always have the same problem.
.second_text{
padding-top: 10px;
text-align: left;
}
It is possible to force the block to left?
body{
padding-top:200px;
}
.container{
width: 95%;
margin: 0 auto;
}
.row{
display: flex;
padding-left: 20px;
padding-bottom:50px;
padding-top: 50px;
margin-left: 10%;
}
.img-block{
width: 4%;
}
.wrapper{
display: flex;
flex-direction: column;
padding-left: 15px;
}
.title{
padding-bottom: 10px;
}
.vertical{
border-left: 1px solid black;
height: 60px;
margin-left: 20px;
}
.img-block {
height: 28px;
padding-left: 15px;
width: 50px;
display: inline-block;
}
.img-pic{
display: inline-block;
height: 20px;
}
.second_text{
padding-top: 10px;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
<div class="container">
<div class="row">
<img class="img-block" src="https://zupimages.net/up/20/21/mz4v.png" alt="image"/>
<div class="wrapper">
<div class="title">Phone</div>
<div class="second_text">Just For VIP Member</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/21/wgl0.png" alt="image"/>
<div class="wrapper">
<div class="title">Email Us</div>
<div class="second_text">admin#superbtc.biz</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/34/epbs.png" alt="image"/>
<div class="wrapper">
<div class="title">Follow us</div>
<div class="second_text">
<img class="img-pic" src="https://zupimages.net/up/20/34/pnpm.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/qgz1.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/gdph.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/alck.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/evtq.png" alt="image"/>
</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/34/txjb.png" alt="image"/>
<div class="wrapper">
<div class="title">Address</div>
<div class="second_text">2699 BORAMBOLA, New South Wales,Australia.</div>
</div>
</div>
</div>
</body>
</html>
Try using Negative Values to .second_text i.e Margin-left: -40px
Though this is not a best fix but can be a quick fix.
A simplified version. Restructure like this
.row {
display: flex;
}
.row .wrapper {
flex-grow: 1;
position: relative;
}
.row .wrapper .first-text {
display: flex;
align-items: center;
padding: 5px 15px;
}
.row .wrapper .second-text {
padding: 5px 15px;
}
.row .wrapper .first-text img {
margin-right: 15px;
}
.verticle {
background: black;
width: 1px;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
<div class="row">
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
</div>
A better solution would be to use position: relative and left: -40px on your .second_text.
I already have everything working on the desktop but now I just can't figure out why overflow-x won't work on iOs. I already tried to set the min-width to 0 of all children and also to work it out with table instead of flex.
In the end, it should be a horizontal scroll in the image-container div, that is showing all the images on x-scroll.
As already mentioned, it runs anywhere accept on the iPhone safari browser.
Here is the code so far:
sass:
#main-container {
#image-container {
height: 466px;
width: 95.47vw;
display: flex;
overflow: auto;
-webkit-overflow-scrolling: touch;
#images {
padding-top: 41px;
left: 0;
height: 466px;
width: 1399.8px;
display: flex;
align-items: flex-start;
justify-content: space-between;
border-spacing: 0;
.bodytext {
width: 296.46px;
}
.image {
padding-bottom: 0;
padding-right: 17.5px;
align-self: flex-end;
&:last-child {
padding-right: none;
}
img {
opacity: 100%;
width: 296.46px;
height: auto;
cursor: pointer;
}
img:hover {
opacity: 50%;
}
}
}
}
html:
<div id="main-container">
<div id="image-container">
<div id="images">
<div class="image" id="0-img">
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
</div>
<div class="image" id="1-img">
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
<div class="image" id="2-img">
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
</div>
<div class="image" id="3-img">
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
</div>
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
</div>
</div>
</div>
Thanks a lot!
This should be simple for you CSS gurus, but I really can't get this going. There are 4 boxes, example code:
<div id="wrapper">
<div id="firstPair">
<div style="width: 200px; float: left"></div>
<div style="width: 200px; float: left"></div>
</div>
<div id="secondPair">
<div style="width: 200px; float: left"></div>
<div style="width: 200px; float: left"></div>
</div>
</div>
When the window width is less than 800 only the rightmost div is moved, leaving them with 3 on top, and 1 on the next row.
I want the second two to go down the page as a pair. 2 on top, 2 on bottom, even if there is space for 3 next to eachother.
You need to set style for firstPair and secondPair elements
div[id$="Pair"] {
display: inline-block;
float: left;
}
<div id="wrapper">
<div id="firstPair">
<div style="width: 200px; float: left">s</div>
<div style="width: 200px; float: left">d</div>
</div>
<div id="secondPair">
<div style="width: 200px; float: left">f</div>
<div style="width: 200px; float: left">g</div>
</div>
</div>
And one more solution with shorten html, but some more use css
div[id$="Pair"] {
display: inline-block;
}
[id$="Pair"] > div {
width: 200px;
float: left;
background: lightgreen;
}
#wrapper {
text-align: center;
}
<div id="wrapper">
<div id="firstPair">
<div>s</div>
<div>d</div>
</div>
<div id="secondPair">
<div>f</div>
<div>g</div>
</div>
</div>
div[id$="Pair"] {
display: inline-block;
margin: 0;
}
[id$="Pair"] > div {
display: inline-block;
width: 200px;
margin: 2px 0;
background: lightgreen;
}
#wrapper {
text-align: center;
}
<div id="wrapper">
<div id="firstPair">
<div>1</div>
<div>2</div>
</div>
<div id="secondPair">
<div>3</div>
<div>4</div>
</div>
</div>
It is about BFC.
You might also float the containers :
#wrapper> div {
float:left;
}
<div id="wrapper">
<div id="firstPair">
<div style="width: 200px; float: left">1</div>
<div style="width: 200px; float: left">2</div>
</div>
<div id="secondPair">
<div style="width: 200px; float: left">3</div>
<div style="width: 200px; float: left">4</div>
</div>
</div>
Here's my solution. I tend to work in a fully responsive environment, so this will position them and be fully responsive on mobile. I also isolated the css, the inline colors are just for demo.
<style>
div#firstPair {
width: 100%;
max-width:400px;
float: left;
}
div#firstPair div{
width: 50%;
float: left;
}
div#secondPair {
width: 100%;
max-width: 400px;
float: left;
}
div#secondPair div{
width: 50%;
float: left;
}
</style>
<div id="wrapper">
<div id="firstPair">
<div style="background-color: blue;">first_1</div>
<div style="background-color: green;">first_2</div>
</div>
<div id="secondPair">
<div style="background-color: red;">second_1</div>
<div style="background-color: orange;">second_2</div>
</div>
<div style="clear: both;"></div>
</div>
I want to create a layout for an itemised list of content like below:
Each item is a container that has an image and block of text.
I have attempted to use nth-child and set different css float values based on if it is an odd or even child, but you can't set child properties using the nth-child selector.
HTML:
<div class="flex-container">
<div class="media-container ">
<img src="img/image.png">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
<div class="flex-container">
<div class="media-container ">
<img src="img/image.png">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
<div class="flex-container">
<div class="media-container ">
<img src="img/image.png">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
CSS:
.flex-container {
width: auto;
margin: 10px auto;
padding: 0 15px;
display: inline-flex;
}
.flex-container:nth-child(odd) {
.media-container {
float: left;
}
.text-container {
float: right;
}
}
.flex-container:nth-child(even) {
.media-container {
float: right;
}
.text-container {
float: left;
}
}
.media-container {
position: relative;
display: inline-block;
}
.media-container img {
width: 100%;
height: auto;
}
.text-container {
width: 30%;
margin: 0 10px;
align-self: center;
position: relative;
display: inline-block;
}
What is the easiest/neatest solution for creating this layout using CSS?
Something like this:
Use the nth-child on your "row" flex-containers and alternate the flex-direction.
.flex-container {
padding: 0 15px;
display: flex;
width: 80%;
border: 1px solid grey;
margin: 1em auto;
}
.flex-container:nth-child(odd) {
flex-direction: row;
}
.flex-container:nth-child(even) {
flex-direction: row-reverse;
}
.media-container img {
width: 100%;
height: auto;
}
.text-container {
width: 30%;
margin: 0 10px;
}
<div class="flex-container">
<div class="media-container ">
<img src="http://www.fillmurray.com/300/200">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
<div class="flex-container">
<div class="media-container ">
<img src="http://www.fillmurray.com/300/200">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
Take A Look At This:
.item {
width: 305px;
height: 70px;
background: black;
margin: 5px;
padding: 5px;
}
.item .title {
width: 200px;
height: 70px;
background: crimson;
}
.item .img {
width: 100px;
height: 70px;
background: #09f;
}
.item:nth-child(even) .img {
float: right;
}
.item:nth-child(even) .title {
float: left;
}
.item:nth-child(odd) .img {
float: left;
}
.item:nth-child(odd) .title {
float: right;
}
<div class='item'>
<div class='title'></div>
<div class='img'></div>
</div>
<div class='item'>
<div class='title'></div>
<div class='img'></div>
</div>
<div class='item'>
<div class='title'></div>
<div class='img'></div>
</div>
Is it necessary that it is display:inline-flex? If you change it to inline-block, I believe you'll get your intended display:
.flex-container {
display: inline-block;
...
}
https://jsfiddle.net/4rcdqy4f/
You can use the Javascript querySelectorAll() method. Then, loop through the list of your items and add the specific CSS property based on whether it is odd or even.
I'm trying to get a grid of 2 x 3 pictures to fill to 100% width using scaling images.
But for some reason there's a 12 or 13 px gap to the right of the images. Anyone know how to solve this?
I'm going crazy here!
body {
margin:0;
padding:0;
}
.header {
height:200px;
width:auto;
background:#22FF00;
}
.imageContainer {
position: relative;
width: 33%;
padding-bottom: 26%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
.clearfloats {
clear:both;
}
<div class="header">asd</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="clearfloats"></div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
Hashem beat me with his comment, but he's right, use
.imageContainer {
width: 33.333%;
}
to lose the gap.
See demo.
Your .imageContainer elements are set to have a width of 33%. 3 sets of 33% make 99%, meaning 1% of your width isn't accounted for. You can fix this by setting the width to 33.33% instead:
.imageContainer {
position: relative;
width: 33.33%;
padding-bottom: 26%;
float: left;
height: 0;
}
body {
margin:0;
padding:0;
}
.header {
height:200px;
width:auto;
background:#22FF00;
}
.imageContainer {
position: relative;
width: 33.33%;
padding-bottom: 26%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
.clearfloats {
clear:both;
}
<div class="header">asd</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="clearfloats"></div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>