CODEWITHSUNDEEP
htmlcssdjangofrontendgrid
kurac
kurac

Reputation: 28

I can't place text and video in same grid in django with css

I have application which includes 3 videos(eventually it will include more). I have created a model in models.py and passed courses to template with context in my view. I want my title to be in border below the video but it makes some weird pose. weird pose.

I left some space under image for title.

html

<div class="next">
        {% for course in courses %}
            {{ course.title }}
            <video src="/media/{{ course.videofile }}" controls=controls type="video" class="video">{{ course.title }}</video>
        {% endfor %}
</div>

css

.next{
    margin-top: 8em;
    display: grid;
    grid-template-columns: .1fr .1fr .1fr;
    gap: 1em;
}
.video{
    max-width: 15em;
    border: 1px solid black;
    padding-bottom: 2em;
}

If I place for loop in another div it works better but titles are above videos.

html

<div class="next">
        {% for course in courses %}
            <div class="div">
                {{ course.title }}
                <video src="/media/{{ course.videofile }}" controls=controls type="video" class="video">{{ course.title }}</video>
            </div>
        {% endfor %}
    </div>

(css is the same)

enter image description here

Upvotes: 0

Views: 72

Answers (1)

Ankit Tiwari
Ankit Tiwari

Reputation: 4700

If I place for loop in another div it works better but titles are above videos. - Update your CSS like this

.next{
    margin-top: 8em;
    display: grid;
    grid-template-columns: .1fr .1fr .1fr;
    gap: 1em;
}
.video{
    min-width: 15em;
    max-width: 15em;
    border: 1px solid black;
    padding-bottom: 2em;
}
.video *{
    width: 100%;
}

and HTML will look like this

<div class="next">
  {% for course in courses %}
     <div class="video">
            {{ course.title }}
            <video src="/media/{{ course.videofile }}" controls=controls type="video" >{{ course.title }}</video>
        </div>
 {% endfor %}
</div>

Working example

.next{
    margin-top: 8em;
    display: grid;
    grid-template-columns: .1fr .1fr .1fr;
    gap: 1em;
}
.video{
    min-width: 15em;
    max-width: 15em;
    border: 1px solid black;
    padding-bottom: 2em;
}
.video *{
    width: 100%;
}
<div class="next">
  
  <div class="video">
   <video src="https://www.w3schools.com/html/mov_bbb.mp4" controls=controls type="video"></video>
   Big Buck Bunny
  </div>
  
  <div class="video">
   <video src="https://www.w3schools.com/html/mov_bbb.mp4" controls=controls type="video"></video>
   Big Buck Bunny
  </div>

</div>

Upvotes: 1

Related Questions