Is there a way to change the orientation of the cards so that they move from left to right instead of

I am looking to have my cards displayed from left to right rather than vertically, but I'm struggling to achieve this. I have tried using the float: left property with no success.

Below is an example of a single card in my layout. They all follow the same structure but with different text content. Here is a screenshot for reference.

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.card {
  box-sizing: content-box
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.589);
}

.container {
  padding: 2px 16px;
}

.card {
  display: inline;
}

.card {
  float: inline-start;
}
<div class="card">
  <img src="Smash.jpg" alt="Smash" style="height:256px;width:356px">
  <section id="text">
    <div class="container">
      <h4><b>New smash bros. game.</b></h4>
      <p>Is it better than smash 4 we definitely hope so<br> Are there now too many characters?</p>
  </section>
  </div>
</div>
</div>

htmlcss

Answer №1

Using Flex makes the task incredibly simple. Just enclose it in a container and specify the flex-direction as row.

.cards {
  display: flex;
    flex-direction: row;
}
.card {
  display: flex;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.card {
  box-sizing: content-box;
  margin: 10px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.589);
}

.container {
  padding: 2px 16px;
}
<div class="cards">
  <div class="card">
    <img src="Smash.jpg" alt="Smash" style="height:256px;width:356px">
    <section id="text">
      <div class="container">
        <h4><b>Exciting new Smash Bros. game</b></h4>
        <p>Is it better than Smash 4? We sure hope so.<br> Are there too many characters now?</p>
      </div>
    </section>
  </div>
  <div class="card">
    <img src="Smash.jpg" alt="Smash" style="height:256px;width:356px">
    <section id="text">
      <div class="container">
        <h4><b>Exciting new Smash Bros. game</b></h4>
        <p>Is it better than Smash 4? We sure hope so.<br> Are there too many characters now?</p>
      </div>
    </section>
  </div>
</div>

Answer №2

Enclose your cards within a div and style the div as shown below:

For instance: 

.wrap {
  display: flex; 
   justify-content: space-between;
   }
<div class="wrap">
  <div class="card">
    card content
  </div>
<div class="card">
    card content
  </div>
  <div class="card">
    card content
  </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

What role do colors and tables play in Javascript?

Preparing for my upcoming Web Development exam, I stumbled upon an intriguing question: Here's how I tackled it: function pallete() { var components = ["00", "33", "66", "99", "CC", "FF"]; var context = document.body; var ...

javascripthtmlweb-safe-colors

The SharePoint 2010 standard model dialogs seamlessly blend transparent printing with the background content

When using Sharepoint 2010, each list item you edit will open in a new modal dialog box by default. This dialog box appears as a new div with the class of ms-dlgContent. It also creates a div with the class of ms-dlgOverlay which acts as a grey overlay di ...

jquerycssprintingsharepoint-2010

Assign and retrieve unique identifiers for checkboxes

One of the challenges I'm facing is working with an array of ID's from a database in combination with a table layout: The ID array includes specific record identifiers, for example: Array ( [0] => Array ( [id] => 1 [code] => GHY87 [de ...

phphtmlwebforms

What are some ways to slow down the speed of a canvas animation?

I am currently working on an animation project using JavaScript and canvas. I have a reference fiddle where objects are generated randomly and fall from the top right corner to the bottom left corner, which is fine. However, the issue is that the objects a ...

javascriptjquerycsshtml5-canvasfabricjs

Scrollbar in an HTML selection tag

Is there a way to add a scroll bar to an HTML select box without using JavaScript? Alternatively, is there a JavaScript library that can achieve this behavior? Also, I'm looking for a redesign of the interface where I have two select boxes and items ...

javascripthtmlscrollbar

How tall can an image be to load successfully on an iPad website?

Similar Query: Max image width in Mobile Safari? Dealing with unwanted downscaling on panoramas What is the maximum height an image can be loaded at on a website when viewed on an iPad? I've tried loading an image (a sprite) with a height exceeding ...

cssimageipad

Establishing the Backbone router configuration

Having trouble identifying the issue with my Backbone router. Is there an error within this code block? The index route is functioning correctly, but the classes route doesn't seem to be triggered (for example, when I try navigating to a URL like loca ...

javascriptjqueryhtmlbackbone.jsurl-routing

Updating URL links with PHP and DOM manipulation

I am attempting to transform all the links within an HTML variable into random ones using PHP. However, I am encountering an issue that is preventing the links from being properly changed. Below is the code snippet I am working with: <?php $jobTempla ...

phphtmldom

Tips on adding conditional styles in Next.js

This is my attempt: function ChangeStrokeToTextAndImage(properties: ChangeStrokeToTextAndImageProps) { return ( <div className={ styles.container0 + " " + properties.isLightGreenBackground == true ? styles.isLight ...

cssnext.js

Using a percentage in CSS translate can result in an image appearing blurry

I am facing a frustrating issue. Whenever I align an image using percentage-based transform translate, it results in a slight blur. This problem is specifically related to percentage alignment. Here is the CSS snippet: img { display: block; height: ...

htmlcsssass

Steps to establish the starting value as 'Concealed'

I stumbled upon this interesting example that demonstrates how to create expandable/collapsible text when clicked. My question is, how can I initially set the value to be hidden so that the paragraph starts off collapsed and expands only when clicked? He ...

javascripthtmlcss

Refreshing an HTML table using instance variables from a C# class (utilizing jQuery and AJAX)

Explore <script type="text/javascript"> $(document).ready(function () { $("#viewDetails").click(function () { $.ajax( { type: "POST", url: '@Url.Action("GetDetail", "ControllerName")' ...

javascriptc#jqueryhtmlajax

Having difficulty assigning the $_Session value in the captcha file

I'm having trouble assigning a value to $_Session in a captcha file. Below is the code for my captcha file: <?php session_name('U'); session_start(); session_regenerate_id(); ini_set('session.cookie_httponly',true); $string=&a ...

phpajaxhtmlsession

Deployed on Azure: Correcting the Mime Type issue causing a blank css file to be sent to the server

While everything works perfectly fine locally, an issue arises when the application is deployed to Azure. The problem lies in loading the CSS file and an error message stating "Resource interpreted as Stylesheet but transferred with MIME type text/plain" i ...

cssasp.net-corestatic-files

How can I show only the final four digits of an input field using Angular Material and AngularJS?

As a newcomer to Angular Material and Angular JS, I am striving to create an md-input field that displays only the last 4 digits in a masked format, such as "********1234". While my experience is currently limited to using md-input password fields where ...

javascripthtmlcssangularjsangular-material

Ensure images are correctly aligned

Could really use some help with this issue I'm having. It's probably a simple fix for all you experts out there, but I can't seem to align my images properly so they are even and not one higher than the other. Please take a look at the scree ...

htmlcssimage

The hover effects cease before the cursor is even shifted

Can someone explain why the hover effect stops before the mouse is moved off the element? I implemented the hover effect on a before pseudo element. ...

htmlcsshover

Tips for adjusting the color of a linear gradient in a shimmer effect

I have a puzzling question that I just can't seem to solve. My goal is to display a shimmer effect on cards as a temporary placeholder until the actual content loads. I found some CSS code in this answer, but when I tried it with a dark background, t ...

css

Customize stroke widths for each individual SVG item

I'm facing an issue with applying consistent stroke width to my CSS on a webpage. Here is the code snippet I am using: path { fill: none; stroke-width: 10pt; stroke: red; } Despite this, the rendering appears differently on certain SVGs. You c ...

csssvg

Tips on redirecting a user to a specific page after they have made a selection without doing so immediately

I am a beginner in the world of coding. Currently, I am working on creating templates for an online software application. Users will have the option to select from different choices using radio buttons. However, I want to ensure that users are not redirect ...

javascripthtml