Attach an object securely to a specific spot

I'm facing an issue with my product cards where the text mentioning "free shipping" is not aligned properly when there are no ratings. How can I ensure that all free shipping texts are positioned consistently on the card?

Should I modify the position attribute or wrap the text to correct its alignment?

<div class="body-info">
    ...
    <div class="product-rating">
        <i class="glyphicon glyphicon-star"></i>
        <i class="glyphicon glyphicon-star"></i>
        <i class="glyphicon glyphicon-star"></i>
        <i class="glyphicon glyphicon-star"></i>
        <i class="glyphicon glyphicon-star-empty-half"></i>
        <span>4.5/5</span>
    </div>
    <a href="free-shipping">free shipping available</a>
</div>

Could you suggest which position attributes would be appropriate in this case?

Thank you for your assistance!

EDIT: Attached a screenshot of the problem for reference.

I should also note that if the product has no ratings, the "product-rating div" does not display.

htmlcss

Answer №1

To achieve this layout, you can utilize the power of `flexbox`. Simply add `flex: display` to the "body-info" class and apply `flex-grow: 1` to the text div. This will allow the height to expand and fill the remaining space within the ratings div, pushing the shipping link to the bottom of the card.

For a detailed example, check out this link: https://codepen.io/giumagnani/pen/ROGEow

.body-info {
  height: 250px;
  border: 1px solid;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  margin: 10px;
}

.img {
  height: 150px;
  background: #f2f2f2;
}

.text {
  flex-grow: 1;
}

UPDATE: In this scenario, it might be beneficial to assign fixed heights to your elements and consistently render them to maintain equal white spaces. Additionally, consider displaying a placeholder message like "There are no ratings yet".

Answer №2

After some experimentation, here's what I ended up doing:

Taking inspiration from @Giu Magnani's code, I incorporated an if/else statement:

If free shipping is available, show the free shipping message. If not, display a blank div with a height of 18px.

This solution worked perfectly for my needs! Huge thanks to all who assisted me, and hope you all have a fantastic day! :)

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

Issues with Bootstrap's hamburger menu not functioning properly when clicked

Can't seem to get my hamburger button working. I've followed the bootstrap documentation and ensured that Bootstrap and jQuery are in the correct order, but still no luck. Any suggestions on what could be causing this issue? Are my links misplace ...

javascriptjqueryhtmlcsstwitter-bootstrap

Postponing the execution of a controller until all JSON files have been fully loaded

I am currently trying to grasp the concepts of AngularJS, so my question might not be perfect. Is it feasible to delay the execution of a controller until the json files are fully loaded in a separate function? Below is the controller code: app ...

javascripthtmlangularjsjson

Tips for creating square corner images within a bootstrap card group

How can I create a square image gallery using Bootstrap 4 cards? <div class="card-group flex-wrap"> <div class="card border-dark"> <img class="card-img-top" src="h ...

htmlcssbootstrap-4

Utilizing Selenium for the Upload of an APK Document

I've encountered an issue during my test. I'm attempting to upload an APK file, but the process seems to halt at that stage. My attempts with simple sendKeys using the file path and an AutoIT script have both proven unsuccessful. Below is my in ...

javahtmlangularjsseleniumautomated-tests

Bootstrap 4 opts for a different approach by not incorporating a hamburger menu and avoiding the collapse of the

When utilizing this HTML code: <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>app</title> <meta name="description" content="to ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

"Centering an Image in ASP.NET HyperLink Control: A Step-by-Step

Here is the setup for my control: <asp:HyperLink CssClass="link-image" ID="Link1" runat="server"/> Code-behind in C#: Link1.ImageUrl = "imagePath"; Resulting HTML code: <a class="link-image" id="MainContent_Link1"> <img alt="" src=" ...

c#htmlcssasp.netwebforms

disabling tabs that are next to each other using react hooks

When the user clicks on item one button in the first tab, it should disable the next two tabs. If the user clicks it back, it should enable the other two tabs. The same functionality should apply to the other tabs as well. Currently, I have disabled the ...

javascripthtmlreactjsreact-hooks

Hiding Button in code behind

I have around 100 buttons in a list. Initially, I have set their visibility to false in the ASPX page. Now, I need to change the visibility to true from the code-behind when required. Since there are too many buttons, it's not feasible to individuall ...

c#htmlcssasp.net

Is the position relative malfunctioning when using display table-cell?

I have designed a horizontal menu consisting of buttons that I want to resize in width so that together they occupy 100% of the menu container. I need them to function like TD elements inside a TABLE. Here is the code snippet I have developed: <div id ...

htmlcss

Click to Resize Window with the Same Dimensions

I have a link on my website that opens a floating window containing more links when clicked. <a href='javascript:void(0);' onclick='window.open("http://mylink.html","ZenPad","width=150, height=900");' target='ZenPad'>&l ...

javascripthtmlcss

Tips for concealing information that is scrolled beneath a translucent layer

In the scenario where you have two overlapping divs, with the top one being transparent, the goal is to have the bottom div hide as it goes under the top transparent div when scrolling. It's important that the bottom div's visibility is not compl ...

javascriptjqueryhtmlcss

Create engaging text animation by transitioning from horizontally displayed text to vertically displayed text with the letters standing upright using An

I'm trying to create an animation where an acronym is displayed horizontally in the middle of the screen and then flips vertically. The challenge I'm facing is rotating individual letters once they are vertical so that the text reads from top to ...

htmlcssjquery-animate

The querySelector function seems to be identifying the element with the ID "submit" and another input element of type "submit"

My code includes a function that toggles between two elements' style.display values, switching them from "none" to "block" and vice versa. However, I've encountered an unexpected issue where the behavior of the "send" button seems to be linked wi ...

javascripthtmlformsdom

In my database, I have two tables: Table1 and Table2. To better illustrate my issue, I have included a picture for reference

https://i.stack.imgur.com/GQAMy.jpg I am facing a challenge with joining two tables, table1 and table2, in MySQL. I need assistance in creating the resultant table as shown in the attached picture. Your help in solving this issue would be greatly appreci ...

phphtmlmysqllaravelvue.js

What is the best method to eliminate white borders on a bootstrap card? Adjusting the border color has proven to be ineffective

<!Doctype html> <html5> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Creative Designs Hub</title> <link rel="sty ...

csshtmlbootstrap-4

Customizing the input placeholder for password fields in IE8 using jQuery

Currently, I have opted to use jQuery instead of the HTML5 placeholder attribute <input type="text" name="email" value="Email" onfocus="if (this.value == 'Email') { this.value = ''; }" onblur="if (this.value == '') { this. ...

javascriptjquerycsshtml

Tips for implementing varying styles depending on the number of columns in a table

I am working with multiple tables that share similarities, but differ in the number of columns each table has. I am looking to create a styling rule where depending on the number of columns, the width of each column will be set accordingly. For example, if ...

htmlcss

Opting for css3 translate over using position: left for positioning elements

Why Using translate() for Element Movement is Superior to Pos: abs Top/left Read the full article Lisa Anderson I struggled with implementing a CSS3 translate animation, so I opted for a jQuery solution that achieves the same effect. Click on the X icon . ...

jquerycsscss-animationstranslate-animation

Centered image

I am working on a website and struggling to center the image on all screen sizes. I attempted the following code:- <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" lang ...

htmlcss

Issue with vertical alignment of subscripts and superscripts

I am working with two buttons that manipulate the verticalAlign property. One button is supposed to set it to sub and the other is supposed to set it to sub. However, both buttons end up setting it to sub. Here is the code for both actions: Superscript d ...

javascriptcss