What is the best way to create dynamic cards like the ones displayed here?

I am experiencing an issue with the black box displaying the date. I created it, but it does not adjust properly to different screen sizes.

.date
{
  width: 20%;
  height: 15%;
  background-color: black;
  z-index: 1;
  position: absolute;
  top: 45%;
  left: 8%;
}
<div class="card up" style="width:400px height:400px">
    <img class="card-img-top" src="https://placehold.it/1900x1400" alt="Card image" style="width:100%">
    <div class="date">
      
    </div>
    <div class="card-body">
      <h4 class="card-title">John Doe</h4>
      <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
    </div>

htmlcssbootstrap-4

Answer №1

  • Implement position-absolute for the card-body element
  • Embed the date within the card-body and set a negative top value for positioning.

Specified dimensions

.date {
  width: 50px;
  height: 50px;
  background-color: black;
  top: -25px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-6 mx-auto ">
      <div class="card up" style="width:400px height:400px">
        <img class="card-img-top" src="https://placehold.it/1900x1400" alt="Card image" style="width:100%">
        <div class="card-body position-relative pt-5">
          <div class="date position-absolute"></div>
          <h4 class="card-title">John Doe</h4>
          <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
          <a href="#" class="btn btn-primary">See Profile</a>
        </div>
      </div>
    </div>
  </div>
</div>

Calculated dimensions

.date {
  width: 3.8888888889em;
  height: 3.8888888889em;
  background-color: black;
  top: -1.9em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-6 mx-auto ">
      <div class="card up" style="width:400px height:400px">
        <img class="card-img-top" src="https://placehold.it/1900x1400" alt="Card image" style="width:100%">
        <div class="card-body position-relative pt-5">
          <div class="date position-absolute"></div>
          <h4 class="card-title">John Doe</h4>
          <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
          <a href="#" class="btn btn-primary">See Profile</a>
        </div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/gKzQez

https://css-tricks.com/almanac/properties/p/position/

You can achieve the same effect using negative margin as well.

Answer №2

One important step is to redefine the width and height of the 'card' and 'up' classes (don't forget the semicolon).

Additionally, if you are facing responsive issues with absolute positioning, consider adding "position: relative" to your container. This will help prevent the absolute elements from overflowing their parent block.

Answer №3

Let's analyze the problem in this particular case. The issue arises from setting the width of the image to 100%, which results in a responsive height. Consequently, the .card element lacks a fixed height. When using top: 40% (as a percentage value), the layout is disrupted.

Solution: Enclose the image and .date within another div.

<div style="position: relative;">
   <img class="card-img-top" src="https://placehold.it/1900x1400" style="width: 100%;" alt="Card image">
   <div class="date"></div>
</div>

Additionally, instead of using top: 40% for the .date class, consider using bottom: -20% or an appropriate value. This adjustment should resolve the issue.

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

Animate the service item with jQuery using slide toggle effect

Currently, I am working on a jQuery slide toggle functionality that involves clicking an item in one ul to toggle down the corresponding item in another ul. However, I am encountering difficulties in linking the click event to the correct id and toggling t ...

javascriptjqueryhtmlcss

Tips for choosing an item within a div -> ul -> li using Selenium

I need help with a menu that displays a list on mouse hover, and I'm trying to click on "Logout". However, the code I've written so far is not giving me the desired result. This is the Java code I have: public void logout() throws Exception { ...

javahtmlcsseclipseselenium

Ways to insert a hyperlink within a div element

Consider the following HTML structure: <article id="1919"> <div class="entry-content clearfix"> <div></div> <div></div> </div> </article> &l ...

javascripthtmlcss

Doesn't IE support the use of jQuery.last()?

Here is the code snippet I am currently using: $('script').last().parent().html('kkkk') Unfortunately, I am encountering an error in Internet Explorer when running this code. Any suggestions on how to address this issue would be great ...

jqueryhtmlinternet-explorer

What is the best way to attach two separate event listeners to a single button?

I'm attempting to have one button trigger two different functions, but I haven't been successful so far. I tried adding the second event listener as indicated by the // part, but it didn't work. The two functions should be executed sequentia ...

javascripthtmldom

"Implementing jQuery to dynamically set the href attribute for a link when

My website features a tabbed menu that displays content from various WordPress categories including Cars, Trucks, and Buses. The active tab is randomly selected each time the page is reloaded. However, there seems to be an issue with the "View More" button ...

javascriptphpjqueryhtmlwordpress

Creating a text gradient in CSS with a see-through background

Picture for Inspiration Example of HTML Design <div class="Heading"> Raffle <span>EXTRAVAGANZA</span> </div> Tips While not required, adding a gradient would enhance the overall look. ...

htmlcss

Replacing one <div> with another <div> using a clickable link within the divs

In one of my web pages, there is a div that I'll refer to as div1. Within this div, there is a link called 'Link1'. My goal is to click on Link1, triggering the replacement of div1 with div2. Inside div2 there will be another link, let&apos ...

javascripthtmlcssangularjs

A beginner's guide to retrieving random names and images from JSON data for every object using JavaScript

I have a creative idea for a random ruffling game, where it picks a user's name and image randomly. However, I'm facing an issue with ensuring that each image matches the correct user when selected randomly. I want to make sure that every objec ...

javascripthtmlcssarraysjson

Button Fails to Respond on Second Click

I have a button that triggers a JavaScript function. This function, in turn, initiates two sequential AJAX calls. Upon completion of the first call, it performs some additional tasks before proceeding to the second AJAX call. The button functions correctl ...

javascriptjqueryhtmlajax

Utilizing Python and Selenium to Locate an Element Based on Text Within a Span Class

My challenge is locating an element without any ID or distinctive identifiers. The HTML code structure resembles the following: <div class="item_select"> <span class="item_selection_number">A </span> </div> <div class="item_ ...

pythonhtmlcssseleniumautomation

What is the best way to utilize variable fonts with Google Fonts?

Traditional fonts typically require a separate file for each weight variant, such as 300, 400, and 500. However, with variable fonts, all weight combinations can be accessed through a single compact font file. This is extremely advantageous for web design. ...

cssfontsgoogle-fontsvariable-fonts

What is the best way to ensure that child elements within a container div are centered when scrolling left and right?

When attempting to handle the 'scroll' event, I noticed that the callback function only records the position of the div as the last position. I am looking for a way to determine if the div is in the center, which is my target. const slide = ...

javascripthtmlcss

What is the best way to conceal a specific class of DIV within a container, and how can I also hide another DIV within the same container by

I have a DIV class containing around 10 elements within a container. I am looking to implement a feature where these elements are hidden and shown one by one every 15 seconds using jQuery with a smooth fadeOut() effect. Your assistance in achieving this wo ...

javascriptjqueryhtmlcss

When using IE6, images may momentarily appear stretched when set to height:auto

I have set the height to auto, however I am observing that small thumbnail images are being momentarily stretched vertically in Internet Explorer 6 before adjusting to their correct height. It is worth mentioning that the image tag in the HTML appears as ...

htmlcssimageinternet-explorer-6

Discover the hidden content within a div by hovering over it

Here is an example of a div: <div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tinc ...

javascriptjqueryhtmlcss

What steps can I take to bring this idea to life in my gallery?

Currently, I am facing a roadblock while transitioning my design concept into actual code. My main concern lies with creating this art piece. Although the gallery is up and running with all the images in place, I'm encountering difficulties with the s ...

javascripthtmlcss

Inconsistent behavior of transform scale() between Chrome and Safari upon page refresh

My goal was to design a code that would adjust all content according to the browser size, ensuring that everything remains visible even when the window is resized. var docHeight = $(document).height(); var winHeight; var zoomRatio; function z(number) { ...

javascriptjquerycsscss-transformswebkit-transform

CSS compatibility across different browsers

Check out my jsFiddle for an example of an onHover event that changes the image. It's working perfectly in chrome, but not quite right in firefox. Any suggestions on how to fix it? Here's the jQuery function I'm using: $(document).ready(fu ...

javascriptjqueryhtmlcssfirefox

How can I ensure that my jQuery code only executes after the mobile CSS has been loaded

When it comes to loading my mobile-only CSS, I typically use a media query similar to: <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="/includes/css/mobile.css" /> However, in addition to these CSS mod ...

jquerycss