Issue
I was interested about how could I make a product listing like Amazon's tried but failed.
Solution
You make something like this with HTML and CSS - in most cases. Elements in HTML are represented as boxes - so, just draw the boxes out - and then pick out the appropriate elements and write the HTML to define the content (a list) - and then the CSS to suggest how it should behave visually
https://developer.mozilla.org/en-US/docs/Web/HTML/Element && https://developer.mozilla.org/en-US/docs/Web/CSS/Reference are the toolboxes
/* SETUP */
* {
box-sizing: border-box;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
picture {
display: block;
margin: 0;
}
img {
display: block;
width: 100%;
height: auto;
}
.thing-list {
border: 5px solid lime;
}
.thing-list .thing {
border: 5px solid red;
}
.thing-list .thing:not(:first-of-type) {
margin-top: 20px;
}
.thing-list .image {
max-width: 300px;
border: 5px solid blue;
}
.thing-list .info {
border: 5px solid orange;
}
.thing-list .info * {
border: 5px solid #ff0066;
}
@media (min-width: 500px) {
.thing-list .thing {
display: flex;
flex-direction: row;
}
.thing-list .info {
flex-grow: 1; /* yes */
}
}
<ul class="thing-list">
<li class="thing">
<picture class="image">
<img src="https://placehold.it/600">
</picture>
<div class="info">
<h2 class="title">Thing title</h2>
<p class="description">Thing description</p>
</div>
</li>
<li class="thing">
<picture class="image">
<img src="https://placehold.it/600">
</picture>
<div class="info">
<h2 class="title">Thing title</h2>
<p class="description">Thing description</p>
</div>
</li>
</ul>
Answered By - sheriffderek
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.