Tips on getting your card to stay at the top

Screenshot of webpage

HTML (EJS): In the HTML file, look for the section after <%- include("navbar.ejs") -%> inside the body tag. The ".cardholder" contains "anime-card" templates (card.ejs). The first and last div within ".cardholder" are similar to card.ejs but have different content in the h4 heading causing some distortion. Refer to the image provided for better understanding.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a5a8a8b3b4b3b5a6b787f2e9f7e9f5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="690b06061d1a1d1b0819295c4759475b">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
    <title>ShinAshchi</title>
</head>

<body>
    <%- include("navbar.ejs") -%>
    <div class="card-holder">
        <div class="anime-card">
            <img class="anime-card-img" src="images/logo.png" alt="404" width="200px" height="200px">
            <div class="anime-heading">
                <h4>Lorem ipsum dolor sit, amet consectetur</h4>
            </div>
        </div>
        <%- include("card.ejs") -%>
        <%- include("card.ejs") -%>
        <%- include("card.ejs") -%>
        <%- include("card.ejs") -%>
        <%- include("card.ejs") -%>
        <%- include("card.ejs") -%>
        <div class="anime-card">
            <img class="anime-card-img" src="images/logo.png" alt="404" width="200px" height="200px">
            <div class="anime-heading">
                <h4>Lorem ipsum dolor sit, amet consectetur</h4>
            </div>
        </div>

        
    </div>
</body>

</html>

Card.ejs

<div class="anime-card">
    <img class="anime-card-img" src="images/logo.png" alt="404" width="200px" height="200px">
    <div class="anime-heading">
        <h4>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis, aspernatur accusantium!</h4>
    </div>
</div>

Style.css

body{
    line-height: normal;
}
.card-holder
{
    background-color: antiquewhite;
    padding: 20px;
    margin: 20px;
}

.anime-card{
    display: inline-block;
    width: 309.800px;
    height: fit-content;
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 20px;
    background-color:#00FFFF;
    background-image: url("images/2.jfif");
    
}

.anime-card-img{
    padding-top: 1rem;
    width: 100%;
    
}
.anime-heading{
    margin-top: 10px;
    min-height: 100.800px;
    display: inline-block;
    width: auto;
}
htmlcssnode.jsexpressejs

Answer №1

To ensure that your cards are all aligned at the top of their respective rows, make sure to include vertical-align: top; in the CSS for your .anime-card class.

.anime-card {
  vertical-align: top;
  /* additional styles */
}

Answer №2

give this a shot:

.anime-card{
        /* display: flex; */
        /* position: initial; */
        display: inline-block;
        width: 309.800px;
        /* height: 348.8px; */
        height: fit-content;
        margin-left: 10px;
        margin-bottom: 10px;
        padding: 20px;
        background-color:#00FFFF;
        background-image: url("/images/2.jfif");
        /* background-repeat: no-repeat; */
        margin-top: 0;
    }

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

Problem with Agile Carousel and thumbnail component

I have incorporated the Agile Carousel plugin into my website to create multiple slideshows. The first slideshow at the top is working fine, but I am experiencing an issue with the carousel in the "About" section at the bottom. While I have successfully se ...

htmljsonjquerycarousel

Steps for displaying a bootstrap modal in alignment with the triggering button's position

Recently diving into the world of bootstrap and AngularJs has been quite the learning experience for me. One challenge I encountered was trying to implement a bootstrap modal dialog box to show additional details within a table column. My goal was to hav ...

javascripthtmlcssangularjstwitter-bootstrap

Is there a way to hide the thumbnail image when the title is hovered over without using CSS?

I'm currently using a simple jQuery script to switch between two thumbnails when hovering over a div. The code works perfectly for the .thumbs class, but I also want this functionality to work with the post titles. Unfortunately, adding the .headline ...

javascriptjqueryhtmlwordpresshover

Struggling to align the image elements accurately

I am aiming to create a layout similar to the image displayed below.https://i.sstatic.net/Q5n8J.png To be more specific, my goal is to scatter smiley faces randomly within a 500px area while also having a border on the right side of the area. However, wi ...

javascripthtmlcss

Leverage the power of Shopify API to retrieve a list of all products by making a request through

My website is custom built on node.js, and I am looking to retrieve all of my products in a single GET request. Unfortunately, the Shopify buy-button feature does not allow me to display all products at once due to pagination, hindering my ability to effec ...

javascriptnode.jsnpmshopifye-commerce

Tips for integrating PHP into a Bootstrap modal dialog

After discovering and modifying a php script designed to process contact form content and display alerts on a Bootstrap 3 modal window, I encountered some issues. While I was able to successfully display errors and show the modal onload without any php con ...

javascriptphphtmltwitter-bootstrap

Is there a way to update an array within my class and access its updated output from outside the class?

let arr = [] class Test extends React.Component { handleConvertString = (event) => { let str = this.inputRef.value; let solutions = ['abb','klopp','lopp','hkhk','g','gh','a&apo ...

javascriptnode.jsreactjsnpmjsx

Hide HTML div on click

Why does the button disappear when I click on it, but the status refreshes? Javascript $( ".refreshstatus" ).click(function(){ $( ".navplayers" ).load('stats.php'); }); CSS .refreshstatus{ font-family:'Noto Sans'; font-w ...

javascriptjqueryhtmlcss

Ensuring a full height div using CSS

I have encountered an issue and created a fiddle to help illustrate it: http://jsfiddle.net/XJpGT/ The challenge I am facing is ensuring that the height of the green box always remains at 100%, while also making sure that the green and orange boxes do not ...

csshtml

Combining Two DIVS Side by Side

Hey there, I am working on a timeline using two divs within a table cell. My goal is to have these divs overlap instead of appearing one below the other. The position attribute for all the DIVs inside the cell must remain unchanged due to the drag/drop fu ...

javascriptjqueryhtml

PHP not receiving POST information from $.ajax call

My JavaScript triggers a POST method when the datepicker loses focus, calling the script rent-fetch-pick-up-point.php. However, the PHP script gets stuck at the if-statement because it's not receiving the POST data. The datepicker is associated with a ...

javascriptphpjqueryhtmlajax

Having trouble obtaining a GuildMember's displayName in Discord.js leads to a TypeError

I'm completely baffled by the situation here. My code is integrated within the Akairo Framework, yet the error seems to be pointing fingers at discord.js itself. Take a look at the error message below: /home/runner/guard/Listeners/automod/nicknames.js ...

javascriptnode.jsdiscord.jstypeerror

Npm packages from around the world are installed in various user directories

After creating a new user on Windows 10 and deleting the old user, I encountered an issue where global npm packages were still being installed in the previous user's %appdata%/Roaming directory. As a result, I am unable to access these global librarie ...

node.jsnpmnpm-config

What criteria should I use to determine if a post has been favorited by a user using Mongoose?

Creating a function for users to like posts has been my recent project. Each post is stored as an object in my MongoDB collection with a specific schema. { title: String, text: String } On the other hand, users have their own unique schema as well. ...

javascriptnode.jsmongodbdatabase-designmongoose

Copying individual files using Gulp with wildcarded directories (src pipe dest)

Currently, I am attempting to duplicate a specific file from the source directory C:\Project\dir1\dirv-1.0.0\tools\file.exe to a designated destination directory C:\Project\dir2\ by utilizing gulp. Considering that ...

node.jsgulp

Versatile route able to handle any request thrown its way

My Node.js app is up and running smoothly using the Express.js framework. All routes in my application are set to post routes, such as: app.post('/login', function(req, res){ //perform login validation }); app.post('/AppHomepage', fun ...

javascriptnode.jsexpressroutes

Cache failure prevents NX from executing script at root level

In the project I am working on, we are using NX with a monorepo setup. I'm attempting to cache some root level scripts in my package.json. My approach was inspired by this article: To achieve this, I have included the following script in the package ...

node.jsnpmnrwl-nxpnpm

Error in the code that I am unable to locate in JavaScript, HTML, and CSS

I need help creating a navbar that displays the active site using HTML and JS code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=& ...

javascripthtmljquerycss

Is it possible that the googleapi node-module does not recognize google.youtube as a function?

Hello everyone, I'm currently attempting to make a request to the Youtube API using node.js to retrieve a video's JSON data from a URL string. After reading the Youtube API documentation, I wrote the following code. However, it seems to be not wo ...

node.jsgoogle-apiyoutube-apiyoutube-data-api

What is the best way to ensure that my <h1> header stays above my <h2> header at all times?

As a novice in web design, I recently took on the challenge of creating my own website. I am a graphic designer and came up with a mock-up of how I envision the site to look. While I managed to complete most parts of it, there's one specific area wher ...

htmlcssheaderpositionalignment