"Flooding the page with flex wrap is causing everything to

Having trouble with the scraping of some divs as they are not wrapping properly within my container

Your HTML:

<div class="anime-list">
            {% for anime in response_data %}
                <div class="anime-item">
                    <div class="anime-cover" style="background-image: url({{ anime['cover'] }});" alt="">
                </div>
            {% endfor %}
        </div>

Here is your CSS:

.anime-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background-color: #eee;
}

.anime-item {
    background-color: #000;
}

.anime-item div {
    width: 208px;
    height: 296px;
    border-radius: 10px;
    border-color: white;
    border-style: solid;
    background-size: cover;
}

The final result looks like this:

<div class="anime-list">
            
                <div class="anime-item">
                    <div class="anime-cover" style="background-image: url(https://cdn.animeapi.com/images/anime/4991.jpg);" alt="">
                </div>
            
                <div class="anime-item">
                    <div class="anime-cover" style="background-image: url(https://cdn.animeapi.com/images/anime/4937.jpg);" alt="">
                </div>
            
                <div class="anime-item">
                    <div class="anime-cover" style="background-image: url(https://cdn.animeapi.com/images/anime/5009.jpg);" alt="">
                </div>
            
        </div>

However, it seems distorted and not aligned correctly like shown in this image https://i.sstatic.net/w6sHPm.jpg

Do you have any suggestions on how to fix this issue? I have already tried using flex-direction: row;, flex: 1 1 0;, display: inline-flex;. While using an img tag works, I need to maintain the image in a div to avoid distortion when resizing.

Answer №1

The format of your template is incorrect because you are failing to properly close your div elements with the class "anime-cover". By correcting this issue, the flex functionality should operate as expected.

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

Prevent the ability to capture photos using the HTML input file feature within an iOS application

Is there a way to restrict users from taking photos within an iOS app that is WKWebView based, and instead only allow them to select photos from their library or iCloud? Currently, I am aware of the ability to force users to utilize the camera with the ca ...

What is the best way to open a browser window at a quarter of its default size?

Is there a way to open a window at 25% of its default device browser window size? I attempted the code below, which worked. However, it only accepts pixel inputs and not relative % values. This makes it non-scalable across various devices. window.resizeT ...

Add a .handlebars or .hbs file to an HTML document

When visiting the emberjs.com homepage, you will find an example of a todo list using Ember.js and Handlebars.js. Within the todo list, there is an extension for a .hbs file. I am curious - what exactly is a .hbs file? And how can I include a .hbs script ...

Differences between Firefox and Webkit browsers when it comes to scrolling - How side navigation, text truncation, and

Scrollbar appearance is causing an issue across different browsers. The truncated text in my side-navigation component is not displaying correctly on Firefox and IE browsers. View this fiddle on both Chrome and Firefox: https://jsfiddle.net/d84b9m49/10/ ...

Using scope in ng-style to manipulate a portion of a CSS property value in Angular

I've been attempting to add a border using ng-style, but I'm struggling to figure out how to concatenate the value from the scope variable. None of the methods below seem to be working for me: <div ng-style="{'border-top' :'1p ...

Iterating through HTML table data using a JQuery for each loop

Currently, I have an HTML table that is structured in the following way: <div class="timecard"> <h3>tommytest</h3> <table class="misc_items timecard_list" border="0" cellpadding="2" cellspacing="0" style="margin:0 auto;"> < ...

Issue with Nivo Lightbox: image not properly centered or resizing correctly

Whenever an image is clicked, it opens in the Nivo lightbox. This feature used to work flawlessly, but recently, it seems to be experiencing issues. The image should be centered and resize responsively to stay in the center. (For example, it worked correct ...

External CSS stylesheets

I have encountered the following HTML code: <div class="entry"> <p></p> //text-indent here <blockquote> <p></p> //no text-indent here </blockquote> </div> I am trying to apply a ...

What is the best way to retrieve the content of a specific class in Selenium WebDriver?

Python Code : from selenium import webdriver from selenium.webdriver.chrome.options import Options options = webdriver.ChromeOptions() options.add_argument(r"--user-data-dir=C:\Users\bji\AppData\Local\Google\Chrome\ ...

Dynamic extension of classes in SCSSORExtending classes

When working with Vue, I encountered a situation similar to :style="{ [`--chip-bg-hover`]: hoverColorValue, [`--chip-bg-active`]: activeColor, [`--chip-border-hover`]: borderHoverColorValue, }" Then, i ...

When a jquery confirm dialog is displayed, the scroll bar mysteriously fades away

Whenever a jQuery confirm dialog is displayed, the scroll bar on the page disappears, causing the page to suddenly shift to the right. Here is the JavaScript code for the dialogue: <script src="vendor/jquery-confirm.min.js"></script> <link ...

Exploring the functionality of CSS class selectors (.class-name) when used alongside CSS tag selectors (div, etc...)

I have designed my website with three distinct tables, each requiring unique styling. The general approach I take to apply styling to these tables is as follows: import './gameview.css' <div className="game-results"> <h ...

PHP HTML failing to recognize "mandatory" attributes

I'm facing an issue with adding validation for an empty field. When the field is left empty, the form should not be submitted. However, the "required" attributes seem to be ineffective in achieving this. Birthdate: <select name="month" r ...

The CSS 'top' attribute is without impact

As I begin my journey with CSS, I am eager to grasp some of its behaviors. In the CSS file, the following code is defined: #spa { position : absolute; top : 8px; left : 8px; bottom : 8px; right : 8px; min-height : 500px; min-width : 500px ...

WindiCSS classes are not functioning properly within a Nuxt application

I've been encountering some difficulties with WindiCSS. The classes are not being applied to the elements as expected. I attempted to install an older version of Windi, but the issue persisted. I even tried switching to Tailwind instead of Windi, but ...

Reduce the size of the header in the Sydney theme for WordPress as you scroll

Currently, I am attempting to reduce the size of the header once scrolling down. My focus is on refining the child theme. Displayed below is a screenshot illustrating the appearance of the header at the top of the page: https://i.stack.imgur.com/wojGf.pn ...

Adding an hour to a time value with preg_replace: A step-by-step guide

On my page, I display times like this: 10:00am. Now, I'm looking to add one hour to each of these displayed times. I've managed to create a regular expression that helps locate the times in the format required, but I'm stuck on what steps to ...

Why does it appear that Angular is undefined in this straightforward Angular demonstration?

I'm completely new to AngularJS and I've encountered an issue. Yesterday, I ran a very simple AngularJS application that I downloaded from a tutorial and it worked perfectly. The application consists of 2 files: 1) index.htm: <!DOCTYPE htm ...

Searching for <div and /div within a string using PHP

element, I encountered an issue while passing an array of HTML code to a PHP function in hopes of extracting and returning a specific subset of the data. The snippet below showcases a portion of the input data: [0] => <div class="positionIs" style ...

Margin isn't functioning properly

My section is not centered and adding margin-left doesn't seem to be working. Any suggestions on how I can solve this? Take a look at how it appears. Here's the code: .margins { margin-left: 100px; } <link href="https://cdn.jsdelivr.net ...