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>
Related
No css expert here. I want to create nested columns. Many sources show that to create columns, do this:
.row:after {
content: "";
display: table;
clear: both;
}
.col-6 {
float: left;
width: 50%;
}
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
This creates two columns of equal width.
Now I want to create equal columns within each of the columns again:
.row:after {
content: "";
display: table;
clear: both;
}
.col-6 {
float: left;
width: 50%;
}
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
</div>
I cannot use flexbox or css grid.
When I implement that, the css makes everything go wonky.
Can you tell what exactly do you mean by CSS going wonky? Here's a JS fiddle with your code. I added background color for visualization.
It looks okay to me, so can you check and elaborate how exactly did you want it to look?
https://jsfiddle.net/zdhov31c/
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-6">c1, row-c1</div>
<div class="col-6">c1, row-c2</div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-6">c2, row-c1</div>
<div class="col-6">c2, row-c2</div>
</div>
</div>
</div>
.row:after {
content: "";
display: table;
clear: both;
}
.col-6 {
float: left;
width: 50%;
background:pink;
}
I hope this will help you :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Columns</title>
<style>
.row{
width: 100%;
padding: 10px;
}
.col-6{
width: 50%;
background-color: yellow;
}
content{
padding: 20px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-6" style="float: left;">
<p><content>hello world</content></p>
</div>
<div class="col-6" style="float: right;">
<p><content>hello world</content></p>
</div>
</div>
</body>
</html>
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 am attempting to implement three images horizontally into a HTML website. However when i format it using CSS nothing is happening, I am very confused as it should theoretically work. I would greatly appreciate if anyone could help me out, thank you.
HTML page image part:
</p>
<div class="row">
<div class="column">
<img src="gosportSunset.jpg" alt="Sunset" style="width:33%">
</div>
<div class="column">
<img src="gosport.jpg" alt="Gosport" style="width:33%">
</div>
<div class="column">
<img src="gosportRace.jpg" alt="Race" style="width:33%">
</div>
</div>
</p>
CSS image formatting part:
/* Three image containers */
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
If the grid is not working try to add box-sizing: border-box; in .column
.column {
float: left;
width: 33.33%;
padding: 5px;
box-sizing:border-box; // important
}
Instead of using div structure you can try something with ul & li, also make use of "column-count" property using which you can define the number of columns you want in a horizontal row.
Refer link for more understanding about "column-count" property:
https://www.w3schools.com/cssref/css3_pr_column-count.asp
<!DOCTYPE html>
<html>
<head>
<style>
ul {
column-count: 3;
list-style: none;
}
</style>
</head>
<body>
<div class="row">
<ul>
<li>
<img src="gosportSunset.jpg" alt="Sunset "/>
</li>
<li>
<img src="gosport.jpg" alt="Gosport" />
</li>
<li>
<img src="gosportRace.jpg" alt="Race" />
</li>
</ul>
</div>
</body>
</html>
I have a div with 5 rows and with multiple images in it. The Html looks something like this:
<div id="row3" class="row">
<div id="im15" class="column">
<img src="img/img15.jpg" alt="movie">
</div>
<div id="im16" class="column">
<img src="img/img16.jpg" alt="movie">
</div>
<div id="im17" class="column">
<img src="img/img17.jpg" alt="movie">
</div>
<div id="im18" class="column">
<img src="img/img18.jpg" alt="movie">
</div>
<div id="im19" class="column">
<img src="img/img19.jpg" alt="movie">
</div>
<div id="im20" class="column">
<img src="img/img20.jpg" alt="movie">
</div>
<div id="im21" class="column">
<img src="img/img21.jpg" alt="movie">
</div>
</div>
I have them side by side and my css looks like this:
html, body {
background-color: #222222;
overflow: hidden;
}
.column {
float: left;
}
.column img {
width: 200px;
height: 300px;
padding: 1px;
}
.images {
opacity: 0.4;
}
.row {
clear: both;
display: table;
}
It works and displays all images properly stacked with no left space in my screen size laptops, but for bigger screens this fails.
I am not able to understand how can I resize these many images to fit and leave no space for any screen size.
I would appreciate any help.
Try to use grid system.
grid-template-columns defines how many columns you want to divide, in the flowing example I divide 3 columns with the value 1fr 1fr 1fr.
grid-gap defines the gaps between each grids.
More information about css grid system, you can refer to this Youtube video:
https://www.youtube.com/watch?v=jV8B24rSN5o&t=1325s&frags=pl%2Cwn
It's very useful when doing some layouts with CSS.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1em;
}
.box {
border: 1px solid teal;
}
.box img {
width: 100%;
height: 100%;
}
<div class="container">
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
</div>
Note : This is code for 3 images side by side horizontally
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
I want to make a responsive design with different images, for example:
<div id="home" class="page">
<div id="home_1" class="section"><!-- Page 1 -->
<div id="home_1_1" class="full">
<img src="images/home/home_1/home_1.png" class="full-image"></img>
</div>
</div>
<div id="home_2" class="section"><!-- Page 2 -->
<div id="home_2_1" class="full">
<img src="images/home/home_2/home_2_block1.png" class="full-image"></img>
</div>
<div id="home_2_2" class="full">
<img src="images/home/home_2/home_2_block2.png" class="full-image"></img>
</div>
</div>
<div id="home_3" class="section"><!-- Page 3 -->
<div id="home_3_1" class="full">
<img src="images/home/home_3/home_3_block1.png" class="full-image"></img>
</div>
<div id="home_3_2" class="full">
<img src="images/home/home_3/home_3_block2.png" class="full-image"></img>
</div>
</div>
</div>
home_1, home_2 and home_3 are seperate image blocks. but home_2_1 home_2_2 should have the same top position and they also should be below home_1.
this is my css:
#home{
width: 100%;
text-wrap: none;
white-space: nowrap;
}
.section{
position: relative;
display: inline-block;
width: 100%;
}
.full{
position: absolute;
top:0;
left:0;
}
.full-image{
width: 100%;
display: block;
}
The problem is that I see only one image, the others don't floats beside each other.
I hope somebody can help me with this.
I'm not quite sure what you mean, but have you tried just using floats?
Check this fiddle: http://jsfiddle.net/9Ryby/
.section {
clear: both;
}
.full-image {
width: 50%;
float: left;
}