I want to make cards responsive. but in django

user_14718426 0
Viewed 411

1 2

the cards goes horizontally i want it to go down vertically when the card goes off screen. This is a project of django so im looping over a div but the card is going off the screen horizontally i want it to go vertically when the card goes off the screen.

PYTHON CODE [HTML] `

<div class="container">
    {% for project in projects %}
    
        <div class="items">
            <h2>{{project}}</h2>

            <div class="purl">
                <p>{{project.description}}</p>
            </div>
            
            <div class="purl1">
                <a href='{{project.url}}'>{{project.url}}</a>
            </div>

            <div class='buttons'>
                <a class='btn' href='{% url "update" project.id %}'>Edit</a>
                <a style='background-color:#f25042' class='btn' href='{% url "delete" project.id %}'>Delete</a>
            </div>

        </div>
    {% endfor %}
</div>

`

CSS `

.container{
    display:flex;
    
}


.purl{
    text-overflow: hidden;
    padding-right:.1em;
}
.purl1{
    max-width:20em;
    margin-right:14px;
}
.items{
    
    border-radius: 8px;
    padding:1em 1.5em .5em 1.4em;
    box-shadow: 0px 0px 17px 0px black;
    margin:5% 1em 2em .5em;
    width:100%;
}
.items h2{
    color:#fffffe;
}
.items p{
    color:#94a1b2;
}
a{
    text-decoration: none;
    color:#7f5af0;
}
a:hover{
    text-decoration: none;
    color:#fffffe;
}
.buttons{
    display:flex;
}
.btn{
    float:left;
    text-align: center;
    font-size:17px;
    font-weight:bold;
    padding:.5em;
    margin:2em 1em .5em 1em ;
    width:3.5em;
    border:none;
    border-radius: 8px;
    background-color: #2cb67d;
    color:#fffffe;
    font-family: 'Noto Sans', sans-serif;
}
.btn:hover{
    background-color: #3dd696;
    cursor: pointer;
}

@media only screen and (max-width: 800px) {
    .container{
        margin-left:10%;
        display:block;
    }
    .items{
        width:60%;
    }
}

` this is the html and css of the code. I'm looping over html by python [ django ] so i want to make cards responsive

python-3.x django python
2 Answers

This has nothing to do with Django or Python, you will be able to achieve that only in CSS, whatever the backend is.

You should use CSS flexbox layout, even in your CSS media queries, by keeping your display:flex whatever the media query. Then use different flex-direction property in CSS depending on your media query / device, in order to order the inside elements horizontally or vertically.

More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

user_44175860

It is very simple, just use flex-wrap: wrap; to make the flexible items wrap if necessary:

Please add flex-wrap style to your container element in your CSS:

.container{
    display:flex;
    flex-wrap: wrap;
}
user_152273060
Related