Arranging cards in a row using HTML or CSS for a dynamic reveal effect

Could someone assist me with my HTML code?

I am struggling to figure out why my two cards are not displaying side by side on my webpage. I would also like them to be able to resize based on the size of the page.

In the past, I was able to achieve this with different types of cards from Materialize.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css"  />

<div class="row">
  <div class="card blue-grey darken-1">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="/Users/sarahgarson/Downloads/WhatsApp Image 2024-03-15 at 18.03.28 (1).jpeg" />
    </div>
    <div class="card-content">
      <span class="card-title activator white-text">Full-Stack Development Course<i class="material-icons right"
              >more_vert</i
            ></span
          >
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4"
            >A little bit about my Full-Stack Development Course:<i
              class="material-icons right"
              >close</i
            ></span
          >
          <p>
            (just to make the code shorter here...)
          </p>
          <p>
            (just to make the code shorter here...)
          </p>
        </div>
      </div>

      <div class="card blue-grey darken-1">
        <div class="card-image waves-effect waves-block waves-light">
          <img
            class="activator"
            src="/Users/sarahgarson/Downloads/WhatsApp Image 2024-03-15 at 23.03.21.jpeg"
          />
        </div>
        <div class="card-content">
          <span class="card-title activator white-text"
            >Mechanical Engineering Course<i class="material-icons right"
              >more_vert</i
            ></span
          >
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4"
            >A little bit about my Mechanical Engineering Course:<i
              class="material-icons right"
              >close</i
            ></span
          >
          <p>
            (just to make the code shorter here...)
          </p>
          <p>
           (just to make the code shorter here...)
          </p>
        </div>
      </div>
    </div>

Answer №1

Hey there!

I was able to solve the issue by simply inserting

<div class="col s12 m6">
right under the class="row" in each card's code.

I had to adjust the width in my CSS to 1000 px in order to maintain a reasonable size for the cards, as they became quite small after adding the above code. However, this arrangement allowed the two cards to be displayed side by side and still resize properly on smaller screens. :)

If anyone knows of alternative methods to achieve this, I'd love to hear them! haha

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

Eliminating a line break that appears after incorporating a list into a paragraph

Currently, I am in the process of developing a website where I need to input information. To display this information, I decided to use a list within a paragraph. However, I noticed that after the list name, the text moves to another line which is not wh ...

Exploring a JavaScript file with the power of JavaScript and HTML

I have a .js file that contains the following data (excerpt for brevity) var albums= "tracks":[ {"title":"Dunnock","mp3":"Birdsong-Dunnock.mp3", "lyrics":"The Dunnock or hedge sparrow has a fast warbling song often delivered from t ...

Can I add different tags directly inside a div container in Bootstrap 3 without using .row and .col?

Should I place a tag directly inside in Bootstrap 3? or is it better to have each inside .row>.col-md-# Is this layout acceptable, or could it potentially cause issues on mobile devices? <div class="container"> <h1>Lorem ipsum dolor sit ...

Adjust the sidebar size in Bootstrap 5 to align perfectly with the navbar brand

https://i.stack.imgur.com/Ra0c7.png I'm trying to ensure that the width of the sidebar on this page aligns consistently with the end of the logo in the top right. However, using variations of col-xxl-1 etc. is causing inconsistent sizes at different ...

When hovering over one item, it causes a hover effect on an item in a SEPARATE container

My goal is to create a unique interaction between links and images, where hovering over a link will transform the corresponding image below it, and vice versa. I have been searching for solutions but have only found methods that work when all items are wit ...

Displaying a loading spinner image as PHP script runs

Hey there! I've been experimenting with using a script to show a loading bar while my PHP code is running. I followed the instructions on this website, but even after following the exact steps, my loading bar still isn't showing up. Any suggestio ...

Tips for creating a subclass using jQuery

I am familiar with selecting the class "myClass" using $(".myClass"), but my question is how do I select the child link within an element with the class "myClass" using jQuery? Here is a sample of the code: <a href=#>Home</a> <div class ...

fullPage.js with linear scroll

Is there a way to implement fullpage.JS without any transitions between slides? I attempted the following setup, but it didn't work as expected: $('#fullpage').fullpage({ licenseKey: 'XXXXXXXX-XXXXXXXX-XXXXXXXX-XXXXXXXX', ...

What is the best way to set up pagination for my table?

I need assistance with implementing a searching functionality for my table using pagination. I believe JQuery will be necessary for this task. Can anyone recommend tutorials that may be helpful? My project is based on C# and MVC, so those resources could a ...

How to Add a Responsive Inset Transparent Overlay to Images without Using JavaScript?

My goal is to create a unique overlay effect on images of different sizes within a Pinterest-style fluid grid layout. The outer border width and inset 'border gap' will remain consistent, while the images themselves need to dynamically adjust. C ...

What could be the reason why certain animations fail to run on specific icons when hovering over the parent element?

I recently launched my website which features a series of tabs with unique icons. Some of the icons, labeled as soap-icon, have animated effects while others, categorized under icomoon-icon, do not. Upon checking the console, I discovered that the animati ...

Retrieve information from HTML form

I am facing an issue with a form that includes an input field of type datetime-local. The form is uploaded using Angular, and I need to convert the local date input to UTC before posting it. Despite trying different methods, I have been unable to resolve t ...

Add drop caps to every individual word within a hyperlink

Is there a way to recreate the menu effect similar to using CSS fonts and drop caps for each word? I'm aware of the CSS code: p.introduction:first-letter { font-size : 300%; } that enlarges the first character of the first word, but I want this ef ...

Safari: The onbeforeunload event

Welcome! To experience the Leave | Stay confirmation box on your page, please make sure you are using Safari 10. I am currently facing an issue with getting the confirmation box to display properly across different browsers. To begin, please visit and l ...

Adding padding with and without child elements

As I work on styling a basic menu, I'm struggling to find a solution for adding padding to list items so they all have a consistent look. The challenge arises from the fact that I have an unordered list where list items may or may not contain an anch ...

Does CSS in the current IE9 beta allow for text shadows to be implemented?

Text shadows look great in Firefox and Chrome. For example, I have a basic website for streaming videos. Unfortunately, there are no shadows in IE9 for me. This is my CSS code: p { color: #000; text-shadow: 0px 1px 1px #fff; padding-bottom: 1em; } ...

Tips for showcasing numerous images in a single row on a website

Looking to organize images into rows with 3/4 images in each row, not stacked vertically as shown below. Here is the code I have tried: <html> <head> <title>Images Displayed in Rows</title> <meta charset="utf-8"> <meta ...

Utilizing absolute and relative positioning for setting up a flexible sidebar layout

I'm finding myself a bit puzzled when it comes to using Absolute and Relative positioning. In essence, I have a sidebar with about 4 divs in it. My goal is for div 3 to stay in the same position on every page, even if div 1 or div 2 are missing and c ...

Update the default monospaced font in Draft.js

Is it possible to change the default system monospace font in Draft Editor to Consolas using Draft.css or global css classes? ...

All pictures aligned with overflow

The first container is working fine, displaying 2 images vertically, but when there are 6 images, it overflows. The problem lies with container 2, where I want to create a horizontal list of images with overflow (only horizontal). This is the current sta ...