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
Related
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>
<section>
<style>
div.img {
border: 1px solid #ccc;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
#media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
<div class="responsive">
<div class="img">
<a target="_blank" href="img\aviary-image-1479454871589.jpeg">
<img src="/img/aviary-image-1479454871589.jpeg" alt="A Boeing 747-400 descending" width="300" height="200">
</a>
<div class="desc">A Boeing 747-400 descending</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img\Screenshot_2016-11-18-13-30-35-973.jpg">
<img src="/img/Screenshot_2016-11-18-13-30-35-973.jpg" alt="Boeing 787-9 touching down" width="600" height="400">
</a>
<div class="desc">Boeing 787-9 touching down</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img\Slack for iOS Upload.jpg">
<img src="/img/Slack for iOS Upload.jpg" alt="Boeing 777-200ER climbing" width="600" height="400">
</a>
<div class="desc">A Boeing 777-200ER climbing</div>
</div>
</div>
</section>
Please note, that this is only a section of the page, that is why there are no starting tags etc.
For some reason, my gallery is not loading. The images are uploaded, but none of the gallery is showing up on the site. You can look at the site here: https://britishairways.000webhostapp.com/photos.html
Anything I'm doing wrong?
Thank you!
Make your <section> in which your gallery items are located a flex container. Just like:
section {
display: flex;
}
Visual Reference:
The section holding the three gallery images has zero height. This, in turn, is because the gallery images have float:left, which takes them out of the layout flow and causes their parent not to use their size in calculating its height.
See How do you keep parents of floated elements from collapsing?
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
As you can see bottom I've two div inline/columbs (one-half - left of page, one half last - right of page). My goal is to float the 2° div (one half last) over the first when the page is resized.
Basically I want that the 1° div collapse under the 2°. Is there a way to do this?
The trouble is that I can only obtain the float left of 2° div under the 1°.
Advices?
<div>
<div class="one-half">
<h2>Title</h2>
<p style="text-align: justify;">Text</p>
<p style="text-align: justify;">Text.</p>
<p style="text-align: justify;">Text.</p>
</div>
<div class="one-half last">
<img src="#" class="shadow" alt="#" style="max-width: 455px;width: 100%;">
</div>
<div class="clearfix"></div>
</div>
.one-half {
width: 460px;
}
.last {
float: left;
}
Pure css and html way : for page resize detection, use media queries
#media screen and (max-device-width: 600px) {
.one-half {
display: none;
}
.last {
float: left;
}
}
EDIT
considering the comment, update css to
#media screen and (max-device-width: 600px) {
.one-half {
float:left;
}
.last {
float: left;
clear: left;
}
}