I have the following code
<section id="cuerpo">
<h3>ÚLTIMAS OFERTAS</h3>
<article> <img class="img-responsive" src="img/piso.png">
<div class="iconos-articulos">
<img class="img-responsive" src="img/wifi.png">
<img class="img-responsive" src="img/bater.png">
<img class="img-responsive" src="img/fumar.png">
<img class="img-responsive" src="img/mascota.png">
</div>
</article>
...
And I have a background color and does not come down to me, only I get to the end of H2
so the background gets me to the end I have to put him in the css height: 10000px to section. Then when I change screen contents are not many spaces as there are resolutions calling me less height
Try this
Add clearfix class
html
<section id="cuerpo" class="clearfix"> --------- </section>
CSS
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Related
I am trying to place two banner images (1024 x 609) side by side.
Website width is 1803px.
However It keeps showing one image in a row like:
image1
image2
I wanted to make it like:
image1image2
This is what I tried (Copied from w3schools.com)
<style>
* {
box-sizing: border-box;
}
.column {
flex: 50%;
padding: 0px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
<div class="row">
<div class="column">
<img src="https://cdn.shopify.com/s/files/1/1352/5175/files/sample.jpg?v=1611329566" alt="Sample" style="width:100%">
</div>
<div class="column">
<img src="https://cdn.shopify.com/s/files/1/1352/5175/files/sample.jpg?v=1611329566" alt="Sample" style="width:100%">
</div>
</div>
after change .row section in CSS
to
.row {
display: flex;
}
it works like I intended
Here is another responsive solution!
* {
box-sizing: border-box;
}
.column {
margin: 2%;
width: 45%;
}
.column {
float: left;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="column">
<img src="https://cdn.shopify.com/s/files/1/1352/5175/files/sample.jpg?v=1611329566" alt="Sample" style="width:100%">
</div>
<div class="column">
<img src="https://cdn.shopify.com/s/files/1/1352/5175/files/sample.jpg?v=1611329566" alt="Sample" style="width:100%">
</div>
</div>
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>
I want to arrange the two images in my HTML page side by side.
I want the images to stay side by side even if the page size changes.
I also want the second image to span the entire header of the page ie. all the space left after the first image. The images here are of different size.
For now, I have arranged two images side by side, but when I change the size of the page, the image wraps and comes in the next line after the first image.
Here is my code sample and the CSS:
.header {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 120px;
}
<img class="header" src="http://www.placehold.it/160X120" style="float: left;" alt="CCM Logo">
<img class="header" src="http://www.placehold.it/543X120/0000FF" alt="CCM Banner">
Here is a Fiddle.
Use white-space: nowrap to prevent wrapping.
.header {
margin: 0 auto; max-width: 800px; /*centering header*/
height: 120px; position: relative; /*scale header images to 120px*/
white-space: nowrap; /*keep one-line*/
overflow: hidden; /*hide excess images parts on small screens*/
}
.header>img { height: 100%;}
<body>
<div class="header">
<img src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" alt="CCM Logo">
<img src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner">
</div>
</body>
.header {
display: inline-block;
margin-left: auto;
margin-right: auto;
max-width: 50%;
height:120px;
}
HTML:
<body>
<img class="header" src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" style="float: left;" alt="CCM Logo">
<img class="header" src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner">
</body>
Give style
.header {
display: block;
float:left;
height: 120px;
}
to both images
Apply below style:
.header {
display: inline-block;
height: 120px;
width: 50%;
}
Try with max-width Demo
.header {
max-width:50%;
}
Try this -
<div class="imgclass">
<div class="img1">
your img here
</div>
</div>
<div class="imgclass">
<div class="img2">
your img here
</div>
</div>
On your css file or between <style>here</style> this -
.imgclass {
display: table-cell;
}
I've been using this sample to create a "zoomable" content:
http://code.msdn.microsoft.com/windowsapps/Scrolling-panning-and-47d70d4c
My HTML:
<div id="zoomElement" class="zoomElement ManipulationContainer">
<img id="zoomContent" class="zoomContent" alt="" src="sample.jpg" />
</div>
My CSS:
.zoomElement {
overflow: auto;
-ms-content-zooming: zoom;
-ms-scroll-rails: none;
-ms-content-zoom-limit-min: 20%;
-ms-content-zoom-limit-max: 500%;
}
Now, no matter what, I've been unable to center the img in its container when it's unzoomed.
How would you make the following html fall into a table-like structure where each div.comment_column falls horizontally next to one another? I prefer to use CSS and not tables:
<div class="comments_div">
<div class="comment_column">
<div id="comment_title_23" class="comment_title">
What do you think of the lyrics?
x
</div>
<div class="comment" id="comment_4">
Great lyrics!
</div>
</div>
<div class="comment_column">
<div id="comment_title_25" class="comment_title">
What should my next song be?
x
</div>
<div class="comment" id="comment_4">
Nice job! Do a another song next.
</div>
</div>
<div class="comment_column">
<div id="comment_title_26" class="comment_title">
Feedback
x
</div>
<div class="comment" id="comment_4">
Awesome stuff... next time rap a little more than sing but still great job.
</div>
</div>
</div>
Add these to your css :
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
.comment_colum {
float: left;
/* width: 200px; <-- can set a width here */
}
And change :
<div class="comments_div">
to :
<div class="comments_div clearfix">