Having trouble displaying several thumbnails side by side

I am looking to display thumbnails in a row, but they are currently showing up in a single column. I have tried correcting the row class in the HTML template provided, but it is not displaying as desired.

Here is how it looks like now

     {% extends "base.html" %}
     {% load static %}

     {{% block content %}
          <!-- ##### Listing Content Wrapper Area Start ##### -->
          <section class="listings-content-wrapper section-padding-100">
          <div class="container">
          <div class="row">
          <div class="col-12">
          <div class="listings-top-meta d-flex justify-content-between mb-100">
              <div class="view-area d-flex align-items-center">
                  <span>View as:</span>
                  <div class="grid_view ml-15"><a href="#" class="active"><i class="fa fa-th" aria-hidden="true"></i></a></div>
                  <div class="list_view ml-15"><a href="#"><i class="fa fa-th-list" aria-hidden="true"></i></a></div>
              </div>
              <div class="order-by-area d-flex align-items-center">
                  <span class="mr-15">Order by:</span>
                  <select>
                    <option selected>Default</option>
                    <option value="1">Newest</option>
                    <option value="2">Sales</option>
                    <option value="3">Ratings</option>
                    <option value="3">Popularity</option>
                  </select>
              </div>
          </div>
          </div>
          </div>
          
          {% if listings %}
          {% for listing in listings %}

          <div class="row">
          <!-- Single Featured Property -->

            <div class="col-x-6 col-md-4">
              <div class="single-featured-property mb-50">
              <!-- Property Thumbnail -->
              <div class="property-thumb">
                  <img src="{{listing.photo_main.url}}" alt="">
                  <div class="tag">
                    <span>For Sale</span>
                  </div>
                  <div class="list-price">
                      <p>₹{{listing.price}}</p>
                  </div>
              </div>
              <!-- Property Content -->
              <div class="property-content">
                  <h5>{{listing.title}}</h5>
                  <p class="location"><img src="{% static 'img/icons/location.png'%}" alt="">{{listing.adderss}}</p>
                  <p>{{listing.description}}</p>
                  <div class="property-meta-data d-flex align-items-end justify-content-between">
                      <div class="new-tag">
                          <img src="{% static 'img/icons/new.png'%}" alt="">
                      </div>
                      <div class="bathroom">
                          <img src="{% static 'img/icons/bathtub.png'%}" alt="">
                          <span>{{listing.bathrooms}}</span>
                      </div>
                      <div class="garage">
                          <img src="{% static 'img/icons/garage.png'%}" alt="">
                          <span>{{listing.garage}}</span>
                      </div>
                      <div class="space">
                          <img src="{% static 'img/icons/space.png'%}" alt="">
                          <span>{{listing.sqft}} sq ft</span>
                      </div>
                  </div>
              </div>
          </div>
          </div>
          </div>
          {% endfor %}

          {% endif %}

          <div class="row">
          <div class="col-12">
          <div class="south-pagination d-flex justify-content-end">
              <nav aria-label="Page navigation">
                  <ul class="pagination">
                      <li class="page-item"><a class="page-link active" href="#">01</a></li>
                      <li class="page-item"><a class="page-link" href="#">02</a></li>
                      <li class="page-item"><a class="page-link" href="#">03</a></li>
                  </ul>
              </nav>
          </div>
          </div>
          </div>
          </div>
          </section>
          <!-- ##### Listing Content Wrapper Area End ##### -->
{% endblock %}}

I am aiming to have 3 thumbnails displayed side by side, utilizing CSS styles from a stock template file. The property listings should be shown as per the database.

Desired layout can be seen here

cssdjangodjango-templates

Answer №1

To display the listings without generating a row for each one, you should iterate over the listings and avoid creating a row for each listing. Here's how you can achieve that:

{% if listings %}
{% for listing in listings %}

{% if forloop.counter0|divisibleby:3 %}<div class="row">{% endif %}

<!-- Single Featured Property -->

  <div class="col-x-6 col-md-4">
    <div class="single-featured-property mb-50">
    <!-- Property Thumbnail -->
    <div class="property-thumb">
        <img src="{{listing.photo_main.url}}" alt="">
        <div class="tag">
          <span>For Sale</span>
        </div>
        <div class="list-price">
            <p>₹{{listing.price}}</p>
        </div>
    </div>
    <!-- Property Content -->
    <div class="property-content">
        <h5>{{listing.title}}</h5>
        <p class="location"><img src="{% static 'img/icons/location.png'%}" alt="">{{listing.adderss}}</p>
        <p>{{listing.description}}</p>
        <div class="property-meta-data d-flex align-items-end justify-content-between">
            <div class="new-tag">
                <img src="{% static 'img/icons/new.png'%}" alt="">
            </div>
            <div class="bathroom">
                <img src="{% static 'img/icons/bathtub.png'%}" alt="">
                <span>{{listing.bathrooms}}</span>
            </div>
            <div class="garage">
                <img src="{% static 'img/icons/garage.png'%}" alt="">
                <span>{{listing.garage}}</span>
            </div>
            <div class="space">
                <img src="{% static 'img/icons/space.png'%}" alt="">
                <span>{{listing.sqft}} sq ft</span>
            </div>
        </div>
    </div>
</div>
</div>
{% endfor %}
</div>

{% endif %}

If you prefer to group the listings into rows of three, you can modify the code like this:

{% if listings %}
<div class="row">
{% for listing in listings %}

<!-- Single Featured Property -->

  <div class="col-x-6 col-md-4">
    <div class="single-featured-property mb-50">
    <!-- Property Thumbnail -->
    <div class="property-thumb">
        <img src="{{listing.photo_main.url}}" alt="">
        <div class="tag">
          <span>For Sale</span>
        </div>
        <div class="list-price">
            <p>₹{{listing.price}}</p>
        </div>
    </div>
    <!-- Property Content -->
    <div class="property-content">
        <h5>{{listing.title}}</h5>
        <p class="location"><img src="{% static 'img/icons/location.png'%}" alt="">{{listing.adderss}}</p>
        <p>{{listing.description}}</p>
        <div class="property-meta-data d-flex align-items-end justify-content-between">
            <div class="new-tag">
                <img src="{% static 'img/icons/new.png'%}" alt="">
            </div>
            <div class="bathroom">
                <img src="{% static 'img/icons/bathtub.png'%}" alt="">
                <span>{{listing.bathrooms}}</span>
            </div>
            <div class="garage">
                <img src="{% static 'img/icons/garage.png'%}" alt="">
                <span>{{listing.garage}}</span>
            </div>
            <div class="space">
                <img src="{% static 'img/icons/space.png'%}" alt="">
                <span>{{listing.sqft}} sq ft</span>
            </div>
        </div>
    </div>
</div>
</div>
{% if forloop.counter0|divisibleby:3 %}</div>{% endif %}
{% endfor %}

{% endif %}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript code for Tree not functioning correctly on Internet Explorer

Seeking assistance to fix a bug in my JavaScript program. The code works perfectly on Google Chrome and Firefox, however it encounters an error in Internet Explorer 8 as indicated below. Any suggestions on how to resolve this issue would be greatly appreci ...

javascriptjqueryhtmlcsslist

What is the best way to limit the top margin for a fixed element?

Recently, I came across this code snippet: jQuery(document).ready(function($){ $( window ).scroll(function() { var current_top = $(document).scrollTop(); var heights = window.innerHeight; document.getElementById("sHome").styl ...

jquerycssscrollfixed

Row in Internet Explorer 7

I have a function that reveals hidden rows in a table, which works perfectly in all tested browsers except for IE7. The function is written using Prototype.js. function showInactives(){ var row_list = $$('tr.inactive'); var ck =$('inactive_ ...

javascriptcssinternet-explorer-7

In IE8, a border is applied to the max-width property when the width is set to

I'm attempting to design a box that adjusts in size according to the parent container, utilizing a mix of max-width and width:100%. With this setup, the box's width is determined by the max-width property, ensuring it shrinks within its boundari ...

htmlinternet-explorer-8css

How can I update the color of a list item when it is clicked within a foreach loop using knockout js?

Currently, I am encountering an issue with changing the color when a user clicks on a list item using the latest version of knockout js. My goal is to change the color of a list item when it is clicked and maintain that color until another item is clicked, ...

javascriptjquerycssknockout.jsknockout-3.0

Issue with Jquery's .addClass and .removeClass functions

I'm having trouble implementing a dynamic menu on my webpage using jQuery. I've tried writing the code myself but it doesn't seem to be working as expected. The structure involves three classes: .dead, which sets display: none; in CSS, .hea ...

jqueryhtmlcsstwitter-bootstrap

Tips for adding an icon to an image using PHP and CSS

My goal is to create a responsive image gallery where each image has an icon or text that allows me to delete it if necessary. Here is my HTML and PHP code: <?php $sqlimage = "SELECT * FROM images where `id_user` = '".$customer_id."'"; ...

phphtmlcsstwitter-bootstrapbootstrap-5

Having a slight hiccup with pixel alignment and browser compatibility in my jQuery animation

To emphasize a specific paragraph element, I developed a JavaScript function that displays it above a darkened background. My approach involved using jQuery to generate an overlay and then duplicating the targeted paragraph element while positioning it ab ...

javascriptjquerycssxhtml

Getting the most recent class variable value in Django

I'm struggling to obtain the updated value of a class variable. After executing the p_request function, when ConnectTestAPI is called, the class variables result and orderNo should be updated in the post function. My intention is to retrieve the upd ...

pythondjangowhile-loopclass-variablesmember-variables

Position a button and input element in alignment

I recently decided to challenge myself by recreating the Netflix registration page as a practice project. Using the flexbox model on the webpage, I encountered an issue with aligning the email input and the "Get Started" button. Despite trying different me ...

htmlcssflexbox

React Card with Overflowing TableCell Texts

I am facing an issue with a table inside a table card where the TableCell is overflowing horizontally when the word is too long. How can I break it to the next line? Please refer to the "code" section for details. For more information, please visit my cod ...

cssreactjsmaterial-uijss

How can I create a menu navigation in Bootstrap 4 similar to the one on the components website

Greetings! I am not a native English speaker, so please excuse any typos in my message. I am attempting to create a menu that functions exactly like the one on the Bootstrap components page, but with the distinction of appearing on the RIGHT SIDE: http:// ...

htmlcsstwitter-bootstrapbootstrap-4navbar

What is the most effective way to extract information from a .txt file and showcase a random line of it using HTML?

As a newbie in HTML, my knowledge is limited to finding a solution in C#. I am attempting to extract each line from a .txt file so that I can randomly display them when a button is clicked. Instead of using a typical submit button, I plan to create a custo ...

javascriptjqueryhtmlcss

Is it possible to submit a form through a JavaScript hotkey?

Here's the current code that I'm working with: <select tabindex="2" id="resolvedformsel" name="resolved"> <option selected="selected" value="yes">resolved</option> <option value="no">not resolved</option> ...

javascripthtmlcssforms

Detecting whether a browser is capable of supporting dark mode

One method to determine if dark mode is active is by using prefers-color-scheme: dark: const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; Is there a way to detect if a browser supports dark mode as well? (By "supports ...

javascriptcssbrowserdarkmode

Prevent users from selecting elements on the mobile site

Hey there! I'm currently working on preventing users from selecting items on my mobile site. While I've been successful in doing so on a regular website using the CSS class below .unselectable { -moz-user-select: -moz-none; -khtml-user-s ...

javascriptcssangularjs

What is the best way to ensure that a navbar dropdown appears above all other elements on

I'm having trouble creating a navbar dropdown with material design. The dropdown is working fine, but the issue I'm facing is that other elements are floating above it. https://i.stack.imgur.com/aJ0BH.png What I want is for the dropdown to floa ...

javascripthtmlcssmaterial-ui

Uncovering the source of glitchy Angular Animations - could it be caused by CSS, code, or ng-directives? Plus, a bonus XKCD comic for some light-hearted humor

Just finished creating an XKCD app for a MEAN stack class I'm enrolled in, and I'm almost done with it. However, there's this annoying visual bug that's bothering me, especially with the angular animations. Here is the link to my deploy ...

javascriptcssangularjsuiviewanimationangularjs-digest

Crafting an innovative horizontal CSS spotlight using conic-gradient styling

Seeking advice: I need to implement three spotlights on a webpage One shining directly downwards One angled from the left to the upper-top One angled from the right to the upper-top I managed to create a vertical spotlight using CSS conic-gradient, but I ...

htmlcsslinear-gradientsconic-gradients

Can CSS3 animations be executed sequentially for each child element?

Have you ever tried creating a CSS3 animation in HTML? You can check out an example here. <div class="parent"> <a href="#">First</a> <a href="#">Second</a> <a href="#">Third</a> </div> With the ...

cssanimationcss-transitions