What is the best way to ensure my gif shows up in the top row and spans two columns in this grid?

I am attempting to create cards with a unique design where the first row consists of 2 columns, one being a GIF that shows the card fitting into a cell with a border. However, all I see is an empty cell without any display.

Below is the code snippet I am using:

.detailsgrid {
  display:grid;
  grid-template-columns: 35px 1fr;
  grid-template-rows: 200px 40px 1fr 35px;
  border: solid 1px;
}

.detailsimg {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 2;
  grid-column-end: 3;
  object-fit: cover;
}
<div class="detailsgrid">
  <img class="detailsimg" src="https://picsum.photos/100/100" width= 300px>
  </div>
  <div class="detailsname">
    Honing
  </div>
  <div class="detailsdescription">Straightening the blade so it stays sharp (no material is taken off the blade). </div>
  <i class="far fa-clock detailstimeicon"></i>
  <div class="detailstime">
    This is how often you should do it
  </div>
</div>

I initially set the size to 200px in order to accommodate the GIF, but I prefer for the area to adjust based on the actual size of the GIF.

Here is an image demonstrating what I aim to achieve:

Any suggestions on how I can accomplish this?

htmlcssimagecss-grid

Answer №1

One way to achieve this look is by following the code snippet below:

.detailsgrid {
  display: flex;
  border: solid 1px;
  flex-direction: column;
  margin: 5px;
  width: 303px;
}

.detailsname {
  display: inline-block;
  height: 50px;
  width: 300px;
  background-color: #1E343A;
  color: white;
  text-align: center;
  padding-top: 15px;
}

.detailsdescription {
  border: 1px solid red;
  display: inline-block;
  height: 50px;
  width: 300px;
  padding: 5px;
}

.detailstime {
  margin: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="detailsgrid">
  <div class="details"> <img src="http://placekitten.com/301/301" width=300px>
  </div>

  <div class="detailsname">
    Honing
  </div>

  <div class="detailsdescription">Straightening the blade so it stays sharp (no material is taken off the blade). </div>
  <i class="far fa-clock detailstimeicon"></i>
  <div class="detailstime">
    This is how often you should do it
  </div>
</div>

As for the second question regarding the font-icon implementation, you can refer to the code snippet below:

.detailsgrid {
  display: flex;
  border: solid 1px;
  flex-direction: column;
  margin: 5px;
  width: 302px;
}

.detailsname {
  display: inline-block;
  height: 50px;
  width: 300px;
  background-color: #1E343A;
  color: white;
  text-align: center;
  padding-top: 15px;
}

.detailsdescription {
  display: inline;
  height: 50px;
  width: 300px;
  padding: 5px;
}

.timeBlock {
  display: flex;
  width: 300px;
  border-top: 1px solid black;
  height: 50px;
  position: relative;
}

.fa-clock-o {
  height: 50px;
  width: 50px;
  padding-top: 7px;
  padding-left: 7px;
}

.detailstime {
  padding-top: 12px;
  height: 50px;
  margin-left: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<div class="detailsgrid">
  <div class="details"> <img src="http://placekitten.com/301/301" width=300px>
  </div>

  <div class="detailsname">
    Honing
  </div>

  <div class="detailsdescription">Straightening the blade so it stays sharp (no material is taken off the blade). </div>

  <div class="timeBlock">
    <div class="timeIcon">
      <i class="fa fa-clock-o" aria-hidden="true" style="font-size:36px;background-color:#1E343A;color:white;"></i>

    </div>

    <div class="detailstime">
      This is how often you should do it
    </div>
  </div>



</div>

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

Steps for implementing a Material-UI transition effect with hover using pseudo classes

My useStyles hook code is meant to create a full-page background that changes on hover, but for some reason it isn't working. I came across a similar solution in CSS which works perfectly. Can you help me figure out the issue? Code snippet that' ...

cssreactjsmaterial-ui

Custom Bootstrap 3 Panel Organization

I'm intrigued by the layout shown in the image attached. My attempts to recreate it using a combination of columns and rows have been unsuccessful. Could it be that I'm going about this the wrong way? ...

csstwitter-bootstraplayoutpanel

The background-size is set to cover, but it does not completely cover the

New to HTML here, I'm attempting to utilize background-size: cover; to ensure an image covers the entire screen, but I am still noticing a gap. The issue may be related to this section: body { background-image: url("hexagon.gif"); ...

htmlcss

Space constraints within an li element

Is there a solution to resolve the unusual impact of margins/paddings? Check out this example on jsfiddle: jsfiddle. Here is the screenshot of the issue: i.imgur.com/64S8C.jpg. I want to eliminate any margins/paddings in the li element. ...

htmlcss

Arranging items in the final row of a flexbox

, I am seeking a solution that goes beyond the repetitive ones provided before. I need to find a more efficient way to achieve my desired outcome based on the code snippet below. In examining the code, it's clear that the first row accommodates 6 ele ...

htmlcssflexbox

How to position div in the middle of Electron/VUE application's screen?

I am struggling to center a container div on the screen. The technology stack I am using includes Electron, VUE, HTML, and CSS. Here is the code snippet I have attempted: <template > <div class="login background" style="height:100%" > ...

htmlcsswebpackvue.jselectron

The JS script is activated only when the window is resized

I have incorporated a touch image slide using an external library called SwipeJS. However, it seems to only function properly when I resize my browser window. Within the body, I have structured my images in the Swipe Container as follows: <div id=&apo ...

javascriptjqueryhtmlswipewindow-resize

CSS code that fixes a textarea at the bottom of a div

I need help placing a textarea at the bottom of a fixed div: <div id=msg> <div id=content> aaaaaaaannnnnnnnnn<br> aaaaaaaannnnnnnnnn<br> aaaaaaaannnnnnnnnn<br> </div> <div id=text> <textar ...

css

Filled with information provided on the form page

After completing the form and submitting it, I noticed that when I went back to fill out another request, all the fields were already populated with my previous data. How can I reset the form page to have empty values each time? Appreciate your help ...

html

Delete the element that was generated using jQuery

Is there a way to add and remove an overlay element using JavaScript? I am struggling to get JavaScript to remove an element that was created with JavaScript. Any suggestions? Check out this JS Fiddle example Here is the HTML code: <div id="backgroun ...

javascriptjqueryhtmlappend

Showing a base64 image in Angular 2

I have a challenge where I am attempting to display an image from a server using a base64 string. The specifics of the http and server are not crucial for my inquiry (in essence, it is functioning). However, the current code I have is not displaying the im ...

imageangularbase64

Using .attr() to change the 'id' in jQuery will not be effective

Initially, the code has been streamlined to include only the necessary components. Here is the HTML file (single_lesson.html) in question: <tr class="my_lessons"> <td> <select name="my_von" id="my_von"></select> &l ...

javascriptjqueryhtmlattr

Guide to pinpointing a location with Google Maps

I am currently working on setting up a contact page that includes Google Maps to show the location of a meeting place. Here is the code I am using: JavaScript (function(){ document.getElementById('map_canvas').style.display="block"; var ...

javascripthtmlcss

What is the best way to display multiple VR scenes on a single webpage?

Currently, I am attempting to display several 360 photos utilizing the a-frame library through implementing a-scene. However, I am encountering an issue where only one scene is being rendered on my page. Are there any alternative approaches to address this ...

javascripthtmlvirtual-realityaframe

What is the best way to display the time of a post update similar to the style of

I am currently working on creating a notification deck. Instead of displaying the time when a notification was received, I aim to show the time that has passed since its arrival similar to how Twitter and Facebook do it with formats like "32m" or "1 hour a ...

javascriptcsshtml

A step-by-step guide on submitting a CSV file with Ajax along with additional form information

Imagine you have an HTML form with input fields for Name, Location, Address, and Family members (to be uploaded as a CSV file), along with a Submit button. However, when you click on submit, the data from the CSV file is not being passed to the PHP script. ...

phphtmljqueryajax

Adding a new entry to a database that involves many-to-many relationships

I recently inquired about executing a fetch query on a database with a many-to-many relationship. As I delve deeper into learning SQL + PHP, I encountered a rather intricate scenario: Within my database, I have the following tables: Songs Link ...

phpmysqlhtmlmany-to-many

The "Open in new tab" feature seems to be missing for links when using Safari on iOS

My webapp contains links structured like this: <a href="/articles/">Articles</a> I am using JavaScript to control these links within my app: $(document).on("click", 'a', function(ev) { ev.preventDefault(); ev.stopPropagat ...

javascriptioshtmlsafari

Erase blob_over from the Wordpress menu hover effect

I've created a unique style for the Donate button on this website, but I'm struggling to remove the hover effect. Any suggestions on where to start? Website URL: This is my Custom Class CSS: .donate { background:#4A1383; padding:0px 10px 0px 1 ...

css

What could be causing my select value to stay unchanged? Issue with the "selected" attribute or property

var original_role = $('option:selected', '#user_role').val(); $('#role_cancel').click(function() { //console.log(original_role); $('option:selected', '#user_role').removeAttr('selected'); //des ...

javascripthtmljquerydom