As a newbie, I recently received training in HTML, CSS, and a bit of JavaScript. Currently, I am involved in a project where I display the latest news from an API. The technical aspects of fetching data from the API using JavaScript are handled by a senior colleague, while my task is to create an appealing user interface.
After referring to w3schools, I was able to design the UI as envisioned. However, I encountered a problem where the layout does not adapt well on certain screen sizes, resulting in empty spaces and misalignment issues. Can anyone offer suggestions to help me rectify this dilemma?
Attached below is an image showcasing my progress thus far along with the corresponding code. Any assistance provided would be greatly appreciated. Thank you!
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
The HTML code snippet below illustrates the structure utilized within a JavaScript loop to showcase each news item:
<div class="responsive">
<div class="gallery">
<img src={Image link here} alt="Link broken" width="600" height="400" />
<div class="desc">
{Post details here}
</div>
</div>
</div>