Ensure that button positioning lines up properly even if adjacent content causes it to shift

I have developed several products using only HTML & CSS.

One challenge I am encountering is that when the content inside the div exceeds a certain length, it causes everything to shift down, resulting in uneven alignment (refer to the 3rd product in the image). Is there a way for me to ensure everything stays aligned?

My idea is to give the h2 tag enough space to accommodate 2 or 3 lines of text (as my products are not longer than 2 lines). This would keep the "read more," grams, and button elements fixed and inline.

Do you have any suggestions on how I can achieve this alignment, or any recommendations? I have provided the Codepen link, code snippet, and image for your reference.

/* Your CSS code here */
<body>
                <div class="container">
                    <section class="cards">

                        <!--   card 1 -->
                        <article class="card">
                            <picture class="thumbnail">
                                <img class="" src="image-url-here" alt="" />
                            </picture>
                            <div class="card-content">
                                <h2>Product Name</h2>
                                <a href="" class="read_more">Read More</a>
                                <p class="product_grams">80g</p>
                                <button type="submit" class="btn">Add</button>
                            </div>
                        </article>

                        <!-- Repeat this structure for other cards -->

                    </section>

                </div>
                </body>

https://i.sstatic.net/Gi09x.png

htmlcssflexbox

Answer №1

Why not give this a shot? Hopefully, it resolves your issue.

@import url(https://fonts.googleapis.com/css?family=Work-Sans:200,300,400,500);

* {
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    font-family: "Work Sans", sans-serif;
}

body {
    font-style: normal;
    margin: 0 0 0.5em;
    line-height: 1.4;
}

h2 {
    color: #303457;
    margin: 2rem 0 .5rem;
    font-size: 1.25rem;
    font-weight: 400;
    text-transform: uppercase;
    font-weight: bold;
}

a {
    color: inherit;
}

img {
    display: block;
    border: 0;
    width: 100%;
    height: 200px;
}

.container {
    margin: auto;
    width: 80%;
    padding: 10px;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    grid-auto-rows: minmax(200px, auto);
    grid-gap: 2rem;
    min-height: 400px;
}

.card {
    padding: .5rem;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    color: #5d5e5e;
}

.thumbnail img {
    fill: #c7c4c4;
    padding: 1rem;
}

.card-content {
    font-size: 0.9rem;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
}

.card-content p {
    font-size: 1rem;
    margin: 10px 0px;
}

.card-content h2{
  flex-grow: 1;
}

a.read_more {
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
}

p.product_grams {
    font-size: 14px;
    font-weight: bold;
}

.btn {
    background-color: #303457;
    border: none;
    color: white;
    padding: 12px 0px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.btn:hover {
    background-color: #3F457E;
    cursor: pointer;
    -webkit-transition: background-color 0.3s;
    -ms-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

.btn:active {
    outline:none;
}
    <body>
        <div class="container">
            <section class="cards">
                
                <!--   card 1 -->
                <article class="card">
                    <picture class="thumbnail">
                        <img class="" src="https://cdn.shopify.com/s/files/1/0425/7008/8604/products/image_8847d478-f0c4-431f-b660-8eb422b8960b.jpg?v=1594121528" alt="" />
                    </picture>
                    <div class="card-content">
                        <h2>American Hard Gums</h2>
                        <a href="" class="read_more">Read More</a>
                        <p class="product_grams">80 grams</p>
                        <button type="submit" class="btn">Add</button>
                    </div>
                </article>

                <!--   card 2 -->
                <article class="card">
                    <picture class="thumbnail">
                        <img class="" src="https://cdn.shopify.com/s/files/1/0425/7008/8604/products/image_21a4c85d-0672-453e-a7c1-b3e91f124dd4.jpg?v=1594121533" alt="" />
                    </picture>
                    <div class="card-content">
                        <h2>Dracula Teeth</h2>
                        <a href="" class="read_more">Read More</a>
                        <p class="product_grams">80 grams</p>
                        <button type="submit" class="btn">Add</button>
                    </div>
                </article>

            <!--   card 3 -->
                <article class="card">
                    <picture class="thumbnail">
                        <img class="" src="https://cdn.shopify.com/s/files/1/0425/7008/8604/products/image_2cd47a09-ab57-4e6c-bfc6-f9db38d0158c.jpg?v=1594121547" alt="" />
                    </picture>
                    <div class="card-content">
                        <h2>Fizzy Blue Jelly Babies</h2>
                        <a href="" class="read_more">Read More</a>
                        <p class="product_grams">80 grams</p>
                        <button type="submit" class="btn">Add</button>
                    </div>
                </article>

            <!--   card 4 -->
            <article class="card">
                <picture class="thumbnail">
                    <img class="" src="https://cdn.shopify.com/s/files/1/0425/7008/8604/products/image_35abd0b2-5a5e-489f-b4d1-370fc7ae3bd0.jpg?v=1594121518" alt="" />
                </picture>
                <div class="card-content">
                    <h2>Fizzy Cola Bottles</h2>
                    <a href="" class="read_more">Read More</a>
                    <p class="product_grams">80 grams</p>
                    <button type="submit" class="btn">Add</button>
                </div>
            </article>
        
            </section>

        </div>
    </body>

Answer №2

To ensure the proper display of the H2 text, consider setting its height to half of the line height if it spans no more than two lines.

For your specific scenario, these CSS values are recommended:

h2 {
    line-height: 30px;
    height: 70px;
}

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

What are the best techniques for styling a SELECT box with HTML and CSS?

I've received a form from a talented designer which includes SELECT inputs designed in a unique manner. Despite my attempts to add paddings, adjust backgrounds, I'm unable to replicate the exact appearance of the select box shown in the image. ...

htmlcssselectinput

The process of organizing and arranging the content that appears on a webpage is in

Seeking a solution to achieve a similar effect like this example. Wanting the sections to transition nicely when clicked on. Should I use a Jquery plugin or implement it with CSS? ...

javascriptjqueryhtmlcss

Is there a way to showcase the search outcomes of employee information stored in my text document using PHP?

i was tasked with creating a PHP file that could search for an employee's ID number and display the results on the same page from a text file. The expected output should look like this: Expected Output (results on the same page): Search Employee Rec ...

phphtmlfile-handling

What is the best way to link styleUrls to a CSS file located in a different directory?

I am trying to include the CSS file src/app/shared/layouts/admin/admin.component.css in my component located at src/app/admin/create-company/create-company.component.ts How can I properly reference this css file in the styleUrls of create-company.componen ...

cssangularstyles

Content towering over the footer

Can anyone help me figure out how to create a footer that appears behind the content when you scroll towards the end of a website? I've tried looking for tutorials online, but haven't found exactly what I'm looking for. Most of what I'v ...

jquerycsshtmlfooterslideup

When swiping right with Swiper.js, the slides are jumping by all, skipping the following slide, but the left swipe functions correctly

Here is the code I used for my swiper element: new Swiper("#swiper-pricing", { slidesPerView: 1.3, spaceBetween: 30, centeredSlides: true, loop: true, keyboard: { enabled: true, }, autoplay: { delay: 50 ...

javascripthtmlcssbootstrap-5swiper.js

What is the best way to recreate this base with shadow, highlight effects, and a color that's not flat?

Click here to view the image I have successfully recreated part of it: a bottom with rounded corners, solid border, and solid colored background. However, I am struggling with achieving certain effects such as the highlighted top portion - where the backg ...

csshtml

What exactly is HTML cloud storage all about?

As I work on developing an app through phonegap, one question that comes to mind is the possibility of storing information online. For instance, if there's a number variable that increases when a button is pressed, can this value be saved somewhere an ...

javascripthtmldata-storage

Table for maximizing space within a cell (Internet Explorer 8)

I am attempting to make the "innerTable" fill up all available space within another table. The issue is with IE8 (no compatibility mode, IE8 browser mode, Doc mode IE8 Standards). The table does not expand to fit the containing TD. I tried enclosing the ta ...

htmlcsshtml-tableinternet-explorer-8

What is the functionality of the disabled attribute on an option tag within a dropdown select menu?

I am working with a code snippet that involves understanding how the attribute:disabled functions on an <option> within a <select> element! Let's say I have a dropdown for ratings and I select the 5-star option (★★★★★). Upon sel ...

javascripthtmlbootstrap-5

Troubleshooting Navigation Bar Toggle Button Issue in Bootstrap 5

Currently, I am in the process of working on a web project that requires the implementation of a responsive sidebar. This sidebar should be toggleable using a button located in the navigation bar. My choice for the layout is Bootstrap, and I have come acr ...

javascriptcssbootstrap-5

PHP does not properly interpret quotation marks when passed from an HTML form

My current setup involves a simple HTML form with a submit button that triggers my PHP script to process the input. However, I've encountered an issue where my PHP code fails to recognize the quotation mark when using str_replace function. Below is a ...

phphtmlcharacter-encoding

Top scroll button malfunctioning on this page

Updated question for better understanding. In my current project, let's imagine I am on the following URL: http://127.0.0.1:8000/blog/ and within that page I have the following HTML: <a href="#top">Back to top</a> Upon hovering over tha ...

html

Crystal Reports does not recognize or integrate HTML elements

Despite entering HTML text on the field: https://i.sstatic.net/vyvQ2.png Even though I am using valid tags as explained in this resource: What HTML tags are supported in Crystal Reports 2008, my report is not generating HTML but only displaying the tags ...

htmlasp.net.netcrystal-reports

Incorporating a new text tag

Is there a way to add a text label for every circle that can be rotated and have its color changed? I'm looking for a solution that doesn't involve JSON data, but instead retrieves the necessary information from somewhere else. var w = 3 ...

javascripthtmld3.js

MySQL automatically inserts a null record if no value is provided

Currently, I am working on a project that involves inserting, viewing, and deleting records. Although everything functions smoothly, an issue persists where a null record is automatically added for some reason. The deletion feature works perfectly for othe ...

phphtmlmysql

How can we efficiently load and display all images from a directory using Node.js and JavaScript?

My strategy involves reading all image file names from a specific directory and passing them as an array to the front-end JavaScript. The front-end script then iterates through the array to dynamically create image elements. Step 1: node const path = requ ...

javascripthtmlnode.js

Troubleshooting Angular 4's ng-selected functionality

I'm currently facing an issue with getting ng-selected to function properly. Initially, I attempted to simply add selected in the option tag, but later discovered that I should be using ng-select. Despite trying variations such as ng-selected="true" a ...

htmlangular

Validating Input in a Textbox Using Jquery When Pasting Data

My HTML textbox is set up to prevent special characters from being entered, but I've noticed that the validation doesn't trigger when I paste text using Ctrl + V. Is there a way to address this issue? ...

jqueryhtml

Leveraging IPFS to host a CSS stylesheet

I've been trying to load a css stylesheet using this link... I attempted adding the link tag to both the main and head tags. <link type="text/css" rel="stylesheet" href="https://ipfs.io/ipfs/Qmdun4VYeqRJtisjDxLoRMRj2aTY9sk ...

javascripthtmlcssipfs