Display two data product when entering 600px media query by two column

Question

Hello guys anyone can heelp me about my problem in my webpage i could not display my product by two colmn ia row on CSS/Bootrap im using bootstrap 4 and iwant to customize my product display here is the image sample that i want to do on my product list when entering 600px media query

output

And this is my work now that i want to display like that on the Picture
image2 image3

Answer 1

Mark I worked on a similar project using bootstrap 4. First I'm going to assume you're using the bootstrap img-fluid class for your image in your card class. Next, in your css for your card class in the media query you need to set a min-height that covers the maximum height of any card, so their even. For example min-height: 350px; Next you need to set a width in the 600px media query for your card class. I recommend you use the mobile responsiveness mode in google chrome and set it to 600px wide and then just test different pixel widths until you get it right. If you have not used the google mobile tool, right click on your google chrome browser and select inspect. In the inspect window, click on the icon next to Elements at the top left. Now your in mobile view. In mobile view on the left, click on the drop down that tells you the type of phone and select Reponsive. Set the max width to 600. Here is the code.

@media only screen and (max-width: 600px) {
    .card {
        width: 48%;
        min-height: 200px;
}