While working on my website layout, I encountered a problem with inserting three image columns in the body section. The images turned out to be too large and extended beyond the footer. Moreover, the third image was larger than expected, dominating the webpage width. Despite my efforts, adjusting the height of the images proved challenging, and I could only modify the width of the first two images. To view my code, visit: https://github.com/moseskbalunywa/Stackoverflow
I tried to implement three image columns in the body section but found all images to be oversized. While I managed to alter the width of two images, their height remained unchanged. The last image posed a bigger challenge as it didn't respond to size adjustments. My main resources for this task were ChatGPT, W3Schools, and Stack Overflow. I encountered issues with the following sources: https://www.w3schools.com/howto/howto_css_three_columns.asp How do I create 3 columns with responsive text and images? Chatgpt:
<!-- Your existing code for header and navbar -->
<div class="row">
<div class="column">
<img src="images/Castle.jpg">
</div>
<div class="column">
<img src="images/Mascottes.jpg">
</div>
<div class="column">
<img src="images/Crush's Coaster Nemo Attractie afb van een schildpad.jpg">
</div>
</div>
<!-- Your existing code for footer -->
</body>
</html>
/* Remove any existing styling for .row and .column */
.row {
display: flex;
justify-content: space-between;
}
.column {
flex: 1;
padding: 10px;
}
/* Rest of your CSS styles remain the same */
.column img {
width: auto;
height: 100px;
/* You can also use max-height to maintain aspect ratio */
/* max-height: 100px; */
}
.column img {
max-width: 100%;
max-height: 100vh; /* Stel de maximale hoogte in op de hoogte van de viewport (zichtbare pagina) */
}