tips for incorporating margin without sacrificing responsiveness

Having an issue with three cards in a row, they are too close together without any margin. It doesn't look good, so I tried adding margin, but it messes up the responsiveness that Bootstrap provides. So, I decided to add padding only. Any suggestions or help would be greatly appreciated.

<div class="row">
  {% for all_episode in episode %}
    <div class="col-6 col-md-4 card" style="padding:20px">
      <a href="{% url 'episode_detail' slug=all_episode.slug %}">
        <img class="card-img-top" src='{{all_episode.image.url}}'>
      </a>
      <div class="card-body">
        <h5 class="card-title">
          <a href="{% url 'episode_detail' slug=all_episode.slug %}">{{ all_episode.title }}</a>
        </h5>
        <p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
      </div>

      <div class="card-footer">
        <small class="text-muted">
          <span class="h5">
            <a href="{% url 'series_detail' slug=all_episode.series.slug %}">{{ all_episode.series }}</a>
          </span> / 
          <span class="h6">
            <a href="{% url 'season_detail' slug=all_episode.season.slug %}">{{ all_episode.season }}
            </a>
          </span>
        </small>
      </div>
    </div>
  {% endfor %}
</div>

Answer №1

To make adjustments to the card, simply follow these steps:

<div class="row">
    {% for each_episode in episodes %}
    <div class="col-6 col-md-4">
        <div class="card" style="padding:20px">
            <a href="{% url 'episode_details' slug=each_episode.slug %}">
                <img class="card-img-top" src='{{each_episode.image.url}}'>
            </a>
            <div class="card-body">
                <h5 class="card-title">
          <a href="{% url 'episode_details' slug=each_episode.slug %}">{{ each_episode.title }}</a>
        </h5>
                <p class="card-text">{{ each_episode.story |slice:":100" }}...</p>
            </div>

            <div class="card-footer">
                <small class="text-muted">
          <span class="h5">
            <a href="{% url 'series_details' slug=each_episode.series.slug %}">{{ each_episode.series }}</a>
          </span> / 
          <span class="h6">
            <a href="{% url 'season_details' slug=each_episode.season.slug %}">{{ each_episode.season }}
            </a>
          </span>
        </small>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

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

Using PHP, eliminate all hyperlinks from the DOM HTML

I have a string called $processhtml that contains some HTML. My goal is to remove all link tags and their contents from the HTML using PHP. For example: "This is some text with <a href="#">link</a>" should become: "This is some text with" ...

Excessive image display | HTML and CSS synergize

I am having some trouble with my image gallery. Each image is displayed as a vertical column and has zooming effects when hovered over. Clicking on an image should show it in full screen with a caption. The problem arises when dealing with images that are ...

Update the text within a textarea by clicking with the power of jquery

Is there a way to clear the content of my textarea on click? Below is the code snippet: http://jsfiddle.net/QMfyP/ <textarea name="adventage" style="width:400px; border-radius: 3px; border-left: 4px solid #6C3" id="adventage" cols="45" rows="5">Sh ...

Learn how to incorporate a consistent header and footer across multiple pages on a website with Node.js, ExpressJS, and either hbs or ejs templates

Creating a common header (navbar) and footer page to be included in multiple/several pages of a website. I want to create a dynamic website using Node.js and Express.js. The code for the navbar and footer will be placed in a common file named header.html ...

Ways to resolve the issue of iOS Safari showcasing 'a' tag styling differently compared to other browsers

Here's a simple question for you. Take a look at the images below for reference. Check out the iOS Safari browser on my phone https://i.sstatic.net/o9jOe.jpg and compare it to my desktop browser, both screenshots were taken live from the server. ...

Retrieving plain text content from HTML while preserving both ordered and unordered lists in Node.js

My goal is to extract plain text from HTML code while preserving the numbering from ordered or unordered lists. However, existing libraries like node-html-parser and cheerio do not maintain this information. To clarify, consider the following HTML: < ...

Floating multiple block-level elements within an <li> tag in HTML allows for greater control over the layout and

I am facing a complex issue that requires attention. Let me explain the situation: There is an unordered list consisting of list items displayed vertically with alternating background colors, all having the same width within a fixed-width div. Some list i ...

Node.js causing issues with executing jQuery front-end code properly

I created an automatic image scroller div consisting of a ul with small images. The aim is to have a basic scroller that starts running once the page loads. It functions perfectly when I test the code (HTML, CSS, and a JS file with jQuery) locally in a bro ...

Angular animation not firing on exit

I am encountering an issue with my tooltip component's animations. The ":enter" animation is working as expected, but the ":leave" animation never seems to trigger. For reference, here is a link to stackblitz: https://stackblitz.com/edit/building-too ...

Customize the background color of highlighted text using HTML and jQuery

Recently, I modified an existing code to divide plain text into four classes by selecting a portion of the text and coloring it. Afterwards, I extracted the text of each class and stored it in my database. While this code works well, I am looking for a way ...

Django encountering issues while trying to load CSS styles and icons from a Next.js project

The issue at hand: django is encountering difficulties in loading css, svgs, and other files from the nextjs project Here is the error message: Not Found: /_next/static/css/app/layout.css Not Found: /vercel.svg [28/Jul/2023 16:31:55] "GET /_next/stat ...

I can't seem to find Django's admin read-only permission settings for models

After browsing through How can I MODIFY django to create "view" permission?, I discovered that Django 1.2 includes a read-only permission for admin models. Can anyone guide me on where to locate this option? It doesn't seem to be listed as a ...

The database powered by Postgresql performs flawlessly when it comes to updating data with accurate code execution. However, there seems to be an

Imagine a zoo with a postgresql database. To enable web access to this database, I am using php and javascript. Most of the web pages are working fine, but I am currently working on a page where clients can add or remove animals from existing exhibits. T ...

Enigmatic void appears above row upon removal of content from a single item

When I click on an item in my grid, the content of that item is moved to a modal. The modal functions properly, but I noticed that when the content is removed from the item, a space appears above it. I have found that using flexbox could solve this issue, ...

When my viewport's size is less than 998px, a blank space appears

While configuring media queries in my HTML and CSS project, everything seemed to be working well. However, I noticed that when I shrink the screen, there is an empty white space on the right side and a horizontal scroll bar appears at the bottom without an ...

Strategies for quickly landing in top Google search results

I run a website for classified ads... Whenever users post a new ad, it gets automatically included in our dynamic sitemap (xml). Our sitemaps were submitted to Google via Webmaster Tools about two months ago. While some of the ads are indexed, it is tak ...

What is the reason behind my button appearing beneath my links in React?

https://i.sstatic.net/Qmm4z.jpg Here is an image showcasing the current header render. The header consists of a HeaderMenu and 3 Links. While the links are functioning properly, the HeaderMenu is causing the links to be positioned below it. The HeaderMenu ...

Creating a unique icon using Jquery Mobile for a button in a PhoneGap application

Has anyone experienced issues with using a custom icon for a jQuery mobile button? I am having trouble as it is only showing a grey circle instead of the actual icon. The default icons work fine, though. Here is the code snippet from the index.html page: ...

Is there a way to display the output of jQuery in an input box rather than a span?

I need to display the result of this function in an input box instead of a span tag because I plan to utilize the result in the following form. function checkChange(){ $.ajax({ url: "ordercalculate.php", data: $('form').seria ...

Limit the character count in a textarea

My goal is to control the number of characters that can be entered into a textarea. While I am aware that I could simply use a substring to limit the characters, I prefer to visually inform the user when their text has reached the maximum length. The maxl ...