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>
Related
I'm designing a webpage in html that should have three side by side images that link to individual websites, followed by three more images beneath them. The code used to work well, but now all the images appear very small when viewed in the web browser. I have no idea why this is happening.
I have this code within a rich text field in knack, if that's at all relevant.
What you'll also notice is that the last image in each row is stretched unlike the others, I've always had this problem. Any solutions would be much appreciated.
Here's what the images are supposed to look like
Here's what the images actually look like
Here's my code:
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="imageExample.com" style="width:500px" "height=300px">
</div>
<div class="column">
<img src="imageExample.com" style="width:500px" "height=300px">
</div>
<div class="column">
<img src="imageExample.com" style="width:500px" "height=300px">
</div>
</div>
</body>
</html><html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="imageExample.com" style="width:500px" "height=300px">
</div>
<div class="column">
<img src="imageExample.com" style="width:500px" "height=300px">
</div>
<div class="column">
<img src="imageExample.com" style="width:500px" "height=300px">
</div>
</div>
</body>
</html>
I tried re-writing the code and forcing the images to be a certain width and height. Not sure where to go from here.
images must be of width: 100%.
NB: if you want to add more images, you don't have to copy the whole html page! only the div you want to copy in this case its <div class="row">
.column{
float: left;
width: 33.33%;
padding: 5px;
}
.column img {
width:100%
}
.row::after {
content: "";
clear: both;
display: table;
}
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="https://gratisography.com/wp-content/uploads/2023/02/gratisography-candy-tea-free-stock-photo-1167x780.jpg" >
</div>
<div class="column">
<img src="https://gratisography.com/wp-content/uploads/2023/02/gratisography-candy-tea-free-stock-photo-1167x780.jpg" >
</div>
<div class="column">
<img src="https://gratisography.com/wp-content/uploads/2023/02/gratisography-candy-tea-free-stock-photo-1167x780.jpg" >
</div>
</div>
<div class="row">
<div class="column">
<img src="https://gratisography.com/wp-content/uploads/2023/02/gratisography-candy-tea-free-stock-photo-1167x780.jpg" >
</div>
<div class="column">
<img src="https://gratisography.com/wp-content/uploads/2023/02/gratisography-candy-tea-free-stock-photo-1167x780.jpg" >
</div>
<div class="column">
<img src="https://gratisography.com/wp-content/uploads/2023/02/gratisography-candy-tea-free-stock-photo-1167x780.jpg" >
</div>
</div>
</body>
</html>
I'm going to re-ask this question in a more simple way:
I am using the following code from W3school, but I need to change the images to 50% which creates a huge gap between the columns. Is there a way to align the left column to the right so that the images are close together?
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>
<div class="row">
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
</div>
</body>
</html>
So I think I "fixed" your issue with flexbox but I would suggest reordering your code structure. You can see the fix below. Also, I wrote an article on CSS references that you should check out. There are several links that I use almost daily when designing UI. Heres the link...
https://medium.com/#hunter.campbell843/css-references-for-new-developers-and-old-6e3dbead437f
.column {
float: left;
display: flex; //These are the only
justify-content: center; //things i added
width: 50%;
padding: 5px;
background-color: aqua;
}
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 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%;
}
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">