I'm trying to get a set of 8 images (all with same dimensions), to display in-line with equal spacing and respond to browser width.
Starting with 4 images over 2 rows then as the browser width decreases, for them to shrink to a certain point that they are still clearly legible, then move to 2 images over 4 rows. I've noticed that it does this without any styling but it also has a stage in between where it pushes one image down onto a new row, so 3-1-3-1. I want to avoid this.
Here's what I'm currently working with.
.features {
width: 100%;
display: block;
text-align: center;
}
.features img {
width: 220px;
margin: 10px;
}
<div class="features">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-lighweight-black.png?9028853389915552257">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-pocket-black.png?9028853389915552257">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-solar-black.png?9028853389915552257">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-battery-black.png?9028853389915552257">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-apple-black.png?9028853389915552257">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-compatible-black.png?9028853389915552257">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-connector-black.png?9028853389915552257">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-led-black.png?9028853389915552257">
</div>
Hope that makes sense. I'd like to do this just using CSS and HTML assuming that's possible.
A grid system using media queries to set the breakpoints for where you want the columns to change width is what you want. https://codepen.io/anon/pen/EmXrMm
CSS tricks has a good article on rolling your own grids here https://css-tricks.com/dont-overthink-it-grids/.
Or you could do the same using flexbox depending on the support constraints.
Note: border box stops the padding declaration adding additional width to the columns. cf is a clearfix, makes the container grow in size relative to the floated elements inside. Rest is pretty straight forward.
* {
box-sizing: border-box;
}
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.features__col {
width: 100%;
float: left;
padding: 15px;
}
.features__col img {
width: 100%;
}
#media (min-width: 400px) {
.features__col {
width: 50%;
}
}
#media (min-width: 800px) {
.features__col {
width: 25%;
}
}
<div class="features cf">
<div class="features__col">
<img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" />
</div>
<div class="features__col">
<img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" />
</div>
<div class="features__col">
<img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" />
</div>
<div class="features__col">
<img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" />
</div>
</div>
</div>
if you want the images to shrink you'll need to set some breakpoints with media queries and try using flexbox
.features{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.features img {
padding: 10px;
width: 310px;
height: 381px;
}
#media all and (max-width: 600px) {
.features img {
width: 50%;
height: 50%;
}
Try This :
.col {
width: 25%;
float: left;
text-align: center;
box-sizing: border-box;
}
#media screen and (max-width: 1285px) {
.col {
width: 50%;
float: left;
}
}
#media screen and (max-width: 670px) {
.col {
width: auto;
float: none;
}
img {
min-width: 220px;
}
}
#media screen and (max-width: 365px) {
img {
width:100%;
}
}
<div class="features">
<div class="col">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-lighweight-black.png?9028853389915552257">
</div>
<div class="col">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-pocket-black.png?9028853389915552257">
</div>
<div class="col">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-solar-black.png?9028853389915552257">
</div>
<div class="col">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-battery-black.png?9028853389915552257">
</div>
<div class="col">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-apple-black.png?9028853389915552257">
</div>
<div class="col">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-compatible-black.png?9028853389915552257">
</div>
<div class="col">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-connector-black.png?9028853389915552257">
</div>
<div class="col">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-led-
black.png?9028853389915552257">
</div>
</div>
Related
How do I create a responsive two column layout using divs instead of tables?
The left div will have text and a call to action. The right div will have an image or is it better to have a transparent background and a png image?
I want both divs to be aligned and responsive. The divs should also stack on top of each other at different screen resolutions.
Below is what I've done so far. It's not perfect. Is there a way of cleaning this up so that I don't run into issues across multiple browsers.
Thank you.
<style type="text/css">*{
box-sizing: border-box;
padding: 10px;
}
.column {
float: left;
width: 300px;
}
.center {
padding: 50px 0;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
</style>
<div class="row">
<div class="column" style="background-color:#e0e620;">
<div class="center">
<p style="font-size:18px; ">The Information is now available as an audiobook.<br />
<a class="link-button-green" href="" title="Info guide">Listen now</a></p>
</div>
</div>
<div class="column" style="background-color:#E5E5E5;">
<img src="https://www.w3schools.com/css/img_forest.jpg">
</div>
You can use flex instead of float to put the columns next to each other. In your #media query, you can remove flex for smaller screens so that the columns are displayed under each other.
The image width should be 100% of the flex column. The CSS doesn't have to be inline.
HTML
<div class="row">
<div class="column left">
<div>The Information is now available as an audiobook.<br />
<a class="link-button-green" href="" title="Info guide">Listen now</a>
</div>
</div>
<div class="column right" >
<img src="https://www.w3schools.com/css/img_forest.jpg">
</div>
</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.row {
display: flex;
}
.column {
flex:1;
}
.left {
background-color:#e0e620;
padding:20px;
}
.right {
background-color:#E5E5E5;
}
img {
width:100%;
}
#media screen and (max-width: 400px) {
.row {
width: 100vw;
display:block;
}
}
See this jsfiddle: https://jsfiddle.net/tLubao5d/1/
I'm trying to place links on images in one row so that different images have different links. I'm also having this div to shrink to fit certain media screen sizes. However, the images didn't resize according to the wrapper requirements. Please help.
Here's the HTML:
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 768px;
margin: 0 auto;
background-color: #fff;
}
}
#media screen and (min-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 500px;
margin: 0 auto;
background-color: #fff;
}
<div id="wrapper">
<div class="box">
<img src="image/pea.jpg">
</div>
<div class="box">
<img src="image/pea_01.jpg">
<img src="image/pea_02.jpg">
<img src="image/pea_03.jpg">
<img src="image/pea_04.jpg">
<img src="image/pea_05.jpg">
</div>
<!-- main issue here -->
<div class="box">
<img src="image/pea_footer.jpg">
</div>
</div>
Here's a screenshot of the line up (desktop). Mobile seems to look ok after adding display:inline-block;
width:auto; to .box:
I reckon remove any static widths because you only need to detect when the viewport is a certain size and then change the img width then, as I have done here. I set each image to display block to remove any margin or padding around them. You might prefer to not do this, but I like setting this as default.
This way you can pick different breakpoints that suit you rather than setting static widths at each breakpoint. This is the beauty of responsive development. Stay flexible rather than controlling what happens to containing divs; let the content run things. Run this snippet below in Full Screen mode to see the full desktop styling (each img goes to 20% instead of 50%):
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
img {
display: block;
width: 20%;
float: left;
}
#media screen and (max-width: 767px) {
img {
width: 50%;
}
}
<div id="wrapper">
<div class="box">
<img src="http://placehold.it/100x100">
</div>
<div class="box">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
</div>
<!-- main issue here -->
<div class="box">
<img src="http://placehold.it/100x100">
</div>
</div>
Your .box could be in display:flex
.box {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
Keep in mind that your 5 <img> should be the icons, not containing your background (the clouds).
And I think the following code would be correct for your images:
.box img {
max-width: 20%;
}
I think it's better to not apply an explicit width or height to the image tag.
Please try:
max-width:100%;
max-height:100%;
Just use percentage based layouts rather than pixels or other measurements.
For example:
<img width="50%">: that will fill half of the containing element, at any size
<img width="500px">: that will always fill exactly 500 pixels, if it's too big or if it's too small.
I have the following problem. I have a block split in two div's left and right, the left contain image with 640x461 and the right one split also in two div's
one contains text and beneath it an image 640x342. on the mobile site these are underneath each other image(640x461),text block then image(640x342), but given different screen size using media e.g #media (min-device-width: 568px) the right div(text+img) should float next to left div, but the problem is that the height of my left image still smaller than the height of right div. What should i do here?
HTML:
<div class="block_acc">
<div class="lp-bild-left">
<a>
<img src="640x461.jpg" />
</a>
</div>
<div class="lp_column">
<div class="lp_description">
<div class="lp_textbox_wrapper">
<span class="headline">text</span>
</div>
</div>
<div class="lp-bild-right">
<img src="640x342.jpg" />
</div>
</div>
</div>
CSS:
#media (min-device-width: 568px) {
.lp-bild-left{
float: left;
width: 50%;
}
.lp_column {
float: left;
width: 50%;
}
}
OK, check this code:
<div class="block_acc">
<div class="lp-bild-left">
<a href="#">
<img src="http://planeon.net/wp-content/uploads/hot-air-balloon.jpg" />
</a>
</div>
<div class="lp_column">
<div class="lp_description">
<div class="lp_textbox_wrapper">
<span class="headline">text</span>
</div>
</div>
<div class="lp-bild-right">
<img src="http://www.whudat.de/images/Albuquerque-Balloon-Fiesta_4.jpg" />
</div>
</div>
</div>
CSS...
.block_acc {
display: block;
overflow: hidden;
}
#media (min-device-width: 568px) {
.lp-bild-left {
float: left;
width: 50%;
}
.lp-bild-left img {
height: auto;
width: 100%;
}
.lp_column {
float: left;
width: 50%;
}
.lp_column .lp-bild-right {
max-width: 100%;
}
.lp_column .lp_textbox_wrapper {
line-height: 0;
}
.lp_column .lp_textbox_wrapper .headline {
font-size: 1vw;
line-height: normal;
}
.lp_column .lp-bild-right img {
width: 130%;
}
}
https://fiddle.jshell.net/jonathanzuniga/at57emmd/
I am trying to create a page with two images side by side on desktop, then have those images stack for mobile. I am making my browser window smaller to simulate a smaller screen. The images are not stacking on mobile. Here's my html:
<div class="container-lp">
<div class="col-2-lp">
<h4>Interior Decorating</h4>
<div class="overlay">
<img src="http://pjstagingdecorating.com/wp-content/uploads/2015/07/Interior-Decorating-Level-1B.jpg" alt="" />
</div>
<div class="overlay"></div>
</div>
<div class="col-2-lp last-lp">
<h4 class="landing-page">Home Staging</h4>
<div class="overlay">
<img src="http://pjstagingdecorating.com/wp-content/uploads/2015/07/Home-Staging-Level-1B.jpg" alt="" />
</div>
</div>
</div>
Here is my CSS for desktop:
.container-lp {
width: 100%;
max-width: 1280px;
min-width: 320px;
margin: 0 auto;
clear: both;
}
.col-2-lp {
float: left;
width: 45%;
margin-right: 5%;
}
.last-lp {
margin-right: 0;
}
.col-2-lp img {
width: 100%;
}
And my media query:
#media only screen and (min-device-width: 320px) and (max-device-width: 600px) {
.col-2-lp {
width: 100%;
float: none;
margin: auto;
}
.last-lp {
margin-right: auto;
}
}
There is no problem in your code. You cannot test device media queries on pc browser try this instead
#media only screen and (min-width : 320px) and (max-width : 600px) {
}
if this functionality is all you need, I would suggest looking up bootstrap. You can achieve the same thing without touching the CSS like this:
<div class="container">
<div class="row">
<div class="col-sm-6"><img src="#"></div>
<div class="col-sm-6"><img src="#"></div>
</div>
</div>
Here's an example:
Set everything to be 100%, then above a certain width set it 50%, then it should go side by side.
.image {
width: 100%;
}
#media screen and (min-width: 780px) {
.image {
width: 50%;
}
}
Here's a jsfiddle that shows a simple example
I am currently working on my website located over at www.a1cleaningservicesnw.com on my services page I have the following code.
<div class="container">
<div class="column-center" align="center"><h1>Carpet and upholstery cleaning</h1><br><br>
<div align="center"> <img src="upholstery-cleaning.jpg" alt="Carpet and upholstery cleaning" width="200" height="150"></div><br><br>
Read More...
</div>
<div class="column-left" align="center"><h1>End of tenancy cleans</h1><br><br>
<div align="center"> <img src="End-of-tenancy.jpg" alt="End of tenancy" width="200" height="150"></div><br><br>
Read More...
</div>
<div class="column-right" align="center"><h1>Rug cleaning</h1><br><br>
<div align="center"> <img src="rug-cleaning.jpg" alt="Rug cleaning" width="200" height="150"></div><br><br>
Read More...
</div>
</div>
<div style="clear:both"></div>
<hr>
With this css
.column-left{ float: left; width: 33%; } .column-right{ float: right; width: 33%; 4}.column-center{ display: inline-block; width: 33%; }
What I was wondering is this: instead of it showing 3 columns on All versions and devices. When the screen size gets too small for a 3 column layout. How do I get it to display it as a single column instead? One under the other? I do not want to wright it all out again without the column tags.
Please help
Thank you.
Kevin.
You could add a media query to change columns width to 100% for the specified screen width range.
#media (max-width: 700px) {
.column-left,
.column-center,
.column-right {
width: 100%;
}
}
Reference: CSS media queries
responsive for below ipad
.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }
#media (max-width: 767px) {
.column-left{ float: left; width: 100%; }
.column-right{ float: right; width: 100%; }
.column-center{ display: inline-block; width: 100%; }
}
<div class="container">
<div class="column-center" align="center"><h1>Carpet and upholstery cleaning</h1><br><br>
<div align="center"> <img src="upholstery-cleaning.jpg" alt="Carpet and upholstery cleaning" width="200" height="150"></div><br><br>
Read More...
</div>
<div class="column-left" align="center"><h1>End of tenancy cleans</h1><br><br>
<div align="center"> <img src="End-of-tenancy.jpg" alt="End of tenancy" width="200" height="150"></div><br><br>
Read More...
</div>
<div class="column-right" align="center"><h1>Rug cleaning</h1><br><br>
<div align="center"> <img src="rug-cleaning.jpg" alt="Rug cleaning" width="200" height="150"></div><br><br>
Read More...
</div>
</div>
<div style="clear:both"></div>
<hr>
#media only screen and ( max-width: 479px ) {
.column-left, .column-center, .column-right {
width: 100%;
}
}
#media only screen and ( max-width: 768px) {
.column-left, .column-center, .column-right {
width: 100%;
}
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
.column-left, .column-center, .column-right {
width: 100%;
}
}
Hope this was helpfull
You should try Bootstrap grid system. I have been working with Bootstrap last two years and its very easy to learn/use. No more headache with responsive columns :)
http://getbootstrap.com/css/#grid