0

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">
        <a href="linkExample.com"><img src="imageExample.com" style="width:500px" "height=300px"></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="imageExample.com" style="width:500px" "height=300px"></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="imageExample.com" style="width:500px" "height=300px"></a>
    </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">
        <a href="linkExample.com"><img src="imageExample.com" style="width:500px" "height=300px"></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="imageExample.com" style="width:500px" "height=300px"></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="imageExample.com" style="width:500px" "height=300px"></a>
    </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.

GanjaBurn
  • 1
  • 1
  • Your markup is completely invalid. YOu can only have 1 HTML, head, and body element. And then, you should not add inline-style to the images. If you ant to preset a w width then sue the `width-attribute`, not the property so you can overwrite it with CSS. – tacoshy Feb 20 '23 at 09:55

2 Answers2

0

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">
        <a href="linkExample.com"><img src="https://gratisography.com/wp-content/uploads/2023/02/gratisography-candy-tea-free-stock-photo-1167x780.jpg" ></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="https://gratisography.com/wp-content/uploads/2023/02/gratisography-candy-tea-free-stock-photo-1167x780.jpg" ></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="https://gratisography.com/wp-content/uploads/2023/02/gratisography-candy-tea-free-stock-photo-1167x780.jpg" ></a>
    </div>
</div>
<div class="row">
    <div class="column">
        <a href="linkExample.com"><img src="https://gratisography.com/wp-content/uploads/2023/02/gratisography-candy-tea-free-stock-photo-1167x780.jpg" ></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="https://gratisography.com/wp-content/uploads/2023/02/gratisography-candy-tea-free-stock-photo-1167x780.jpg" ></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="https://gratisography.com/wp-content/uploads/2023/02/gratisography-candy-tea-free-stock-photo-1167x780.jpg" ></a>
    </div>
</div>
</body>
</html>
SelVazi
  • 10,028
  • 2
  • 13
  • 29
  • I made all these changes to no avail, I think the application I'm using it for might be the problem? Not sure what else could be causing this. – GanjaBurn Feb 24 '23 at 12:31
  • Can you take the code of my answer and work on it in your local, the only update you will have to do is changing image src – SelVazi Feb 24 '23 at 13:09
0

So turns out that the site I'm using - knack - doesn't really allow users to implement custom webpages with their own html code. The images will always appear off no matter what I do.

Thanks a lot for the clean code and tips though!

GanjaBurn
  • 1
  • 1