@Leo-Zubiri
@Paulo-Dandrea
Submitted
Could you help me with HTML and CSS best practices like:
Thx!
@Leo-Zubiri
Posted
Hi, nice solution. If you want to have the same space between sections in the card you can use flex: 1 in each container. Also you can use grid (I prefer it for this cases):
.card{
display: grid;
grid-template-columns: repeat(2,1fr);
}
Just verify in the card are two main sections
<div class="card">
<div> </div>
<div> </div>
</card>
You can change the column size in grid, for example 3 columns:
grid-template-columns: 1fr 2fr 1fr;
In case of media queries:
A common config:
@media(min-width: 480px){
/* From a cell phone to a bigger screen*/
}
@media(min-width: 768px){
/*From a tablet to a larger screen*/
}
@media(min-width: 1140px){
/* From a laptop to a larger screen */
}
@media(min-width: 1400px){
/* more...*/
}
You always focus in mobile view and use a break point(media querie) to change the distribution, example:
.product_card{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
@media screen and (min-width: 480px){
.product_card{
grid-template-columns: 1fr 1fr;
}
}
Marked as helpful
@nathan-bark
Submitted
@Leo-Zubiri
Posted
Hi, nice solution. If you want to have the same space between sections in the card you can use flex: 1 in each container. Also you can use grid:
.card{
display: grid;
grid-template-columns: repeat(2,1fr);
}
Just verify in the card are two main sections
<div class="card">
<div> </div>
<div> </div>
</card>
You can change the column size in grid
grid-template-columns: 1fr 2fr 1fr
@Jejemar
Submitted
Had difficulties with mobile view. Will be glad if someone shows me proper solution.
@Leo-Zubiri
Posted
Hi, nice solution. In my case applied grid to set equality between the image and contain. 1 fraction to each side (img and product details) .product_card{ background-color: white; max-width: 600px; min-height: 300px; ... display: grid; grid-template-columns: 1fr 1fr; }
So, responsively, it´s only one column and two rows with 1 fraction of the container @media screen and (max-width: 800px){ .product_card{ ... grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
Marked as helpful
@urlunaticguy
Submitted
I haven't made a landing page before using only plain CSS, so it was a good experience to learn a few new things.
@Leo-Zubiri
Posted
Hi Bro, nice!. You should use the propertie border-radius, in your image and container of the product. Sometimes especific radius in some corners for example, with border-top-left-radius
