Could you help me with HTML and CSS best practices like:
Thx!
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;
}
}
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
Had difficulties with mobile view. Will be glad if someone shows me proper solution.
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; }
I haven't made a landing page before using only plain CSS, so it was a good experience to learn a few new things.
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
