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

My AngularJs code seems to be throwing some errors

I recently started learning Angularjs and here is the code I have written: <!DOCTYPE html> <html> <head> <title>ng-Messages Service</title> <script src='https://ajax.googleapis.com/ajax/libs/jquery ...

htmlangularjsmodel-view-controller

Positioning a centered div with absolute positioning may result in offset issues on Android devices when the content exceeds the viewport size

Encountering a peculiar issue on Android browsers, particularly when the following elements are present on a page: A div element larger than the device's viewport size. (In this case, set at 1200px.) One or more other div elements styled for centeri ...

androidhtmlcssmobile

Difficulty encountered in aligning items within neighboring table cells vertically

Currently, I am facing a styling issue with a few table rows. In this particular screenshot: The cells in the blue and red circles are part of a table row (with a height of 50px). Both are set to "vertical-align:top". The phone number data (in the red cir ...

htmlcssvertical-alignment

When you hover over a Wordpress page, the entire text on the page will be underlined

Currently designing my own website using WordPress with the Elementor free plugin and Phlox theme. I've made some progress by completing a few sections which include text, buttons, and images. However, I'm encountering an issue where all the text ...

csswordpress-theming

Is it possible to ensure uniformity in the appearance of all images with MVC Image Handling?

I'm currently developing an MVC 4 application that allows users to upload images. These uploaded images are then displayed in a different view. Users can upload images up to 10MB in size, which are then resized to 800 x ? pixels using the WebImage (Sy ...

cssimageasp.net-mvc-4

The issue of JavaScript failing to connect to the HTML file

As I work on my basic HTML file to learn Javascript, I believed that the script was correctly written and placed. Nevertheless, upon loading the file in a browser, none of the script seems to be functioning. All of my javascript code is external. The follo ...

javascriptjqueryhtml

Integrating objects into the <select> element through the combination of C#, JavaScript, and HTML connected to a SQL

Can someone assist me in resolving this issue? I am trying to populate an HTML element with database fields using C# and JavaScript, but so far my code is not producing any output. I have also attempted to include a button that calls the "loadGrp" function ...

javascriptc#htmlsql-server

Modifying the color of the Payment Button in a Stripe Pop-up

I have successfully implemented the Stripe payment method on my leadpages, and everything is functioning well. However, I would like to customize the color of the Pay button to match the design in the attached image. Below is the code snippet used to disp ...

jqueryhtmlpopupstripe-payments

When scrolling down, the popup window shifts its position

I have implemented a popup window which displays a list on hover. It works perfectly on the default page, but when I scroll down, the popup also moves with the scrollbar. Below is the HTML code that creates the hidden popup list initially and shows it on ...

javascripthtmlcss

An easy way to insert a horizontal line between your text

Currently, I have two text responses from my backend and I'm considering how to format them as shown in the design below. Is it possible to automatically add a horizontal line to separate the texts if there are two or more broadcasts instead of displa ...

javascripthtmlangulartypescriptangular-material

Storing ng-change event for a checkbox in AngularJS in a valid manner

I have a requirement where I need to handle multiple input checkboxes. The goal is to store the changed checkbox events in an array and then save them when the user submits the changes. <td><input type="checkbox" class="switch" ng-model="each_val ...

javascriptjqueryhtmlangularjscheckbox

Incorporate text inside the border of a Material UI chip

https://i.stack.imgur.com/VATrD.png I'm looking to replicate this design using a pre-built Chip component from MaterialUI While the solution might involve Some Text using html and css, it still may not achieve an identical result. I've come acr ...

cssreactjsmaterial-ui

Display a list of items in Angular using ng-repeat, and allow the full description to appear in full width

<div ng-controller = "MyController"> <ul class="items" > <div ng-repeat="item in colors" ng-class="{active:isActive(item)}" ng-click="select(item); whattoshow=!whattoshow"> <li class="col-md-3 col-sm-3 col-lg-3 co ...

javascripthtmlangularjs

What is the function of table widths in accommodating wider details during insertion?

What happens when a detail width is set to <td width="10"...> and something wider, like a picture that is 20 pixels wide, is placed in that detail? ...

html

Is there a way to manipulate a button's toggle state using Javascript as the page loads?

I am in the process of developing a straightforward web application that allows users to customize their settings. On the settings page, there are several toggle buttons that need to have their state changed during the page load to align with the preferenc ...

javascripthtmlcssbutton

Guide to updating Django model-based form records with choices option using an HTML form

I have a pre-existing model called ShiftChange that I am trying to update. In the model-based form, I have used CHOICES as follows: from django.db import models ====== ============= ) class ShiftChange(models.Model): ...

htmlpython-3.xdjangodjango-formsdjango-templates

Confirming the accuracy of multiple fields in a form

Looking for help with validating both password and email fields on a registration form. I've successfully implemented validation for passwords, but need assistance adding validation for the email section as well. Can both be validated on the same form ...

javascripthtml

What is the best location to include my JavaScript code in WordPress?

Alright, so I've got this world map on one of my WordPress pages and here's an example of the code: <area onmousedown="modifyImage('world_map_01', './images/map/asia.jpg')" onmouseout="modifyImage('world_map_01', ...

javascripthtmlwordpress

Tips for invoking a JavaScript class method from an HTML document

I've created a Typescript class that dynamically inserts an HTML element to a page after it's loaded. Here is the code snippet: const calcElement: string = ` <div class="container"> <span class="cc-title">Field</span> ...

javascripthtml

Resizing Your WordPress Header Logo

Hi there! I am struggling to resize the logo in the header of my website www.cookingvinyls.com. Despite my efforts, I can't seem to override the hardcoded version. I attempted to modify the width and height lines in header.php, but unfortunately, it ...

htmlcsswordpresswordpress-themingimage-resizing