Double-column design for viewing on both computers and mobile devices

Question

Double-column design for viewing on both computers and mobile devices

Check out my fiddle: https://jsfiddle.net/b6q7pmkg/ I'm attempting to create a layout with two-column cards that will maintain two-column structure across both mobile and desktop viewports. Here's what I envision: On desktop: https://i.sstatic.net/dGOt8.png

On mobile: https://i.sstatic.net/0znqj.png

Here's my current progress, but it's not quite where I want it to be...

.cardContainer {
  max-width: 30rem;
}

CSS:

.root {
    display: inline-block;
    width: 100%;
    border: 1px solid rgb(221, 221, 221);
    color: rgb(90, 90, 90);
}

.link {
    vertical-align: bottom;
    text-decoration: none;
    cursor: pointer;
}

.imageContainer{
    display: inline-block;
    vertical-align: top;
    width: 40%;
}

image {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
}

.content {
  display: inline-block;
  vertical-align: top;
  width: 60%;
  padding: 1rem;
}

.large .title {
    font: 400 1.1875rem/1.263 'Avenir Next W01', 'Helvetica Neue', 'Helvetica', 'sans-serif';
    font-size: 1.1875rem;
    line-height: 1.263;
    letter-spacing: 0.0125rem;
    font-weight: 700;
}

.body {
    margin-top: 1rem;
    color: rgb(139, 139, 139);
    display: block;
}
.description {
    margin-bottom: 0;
    font-size: inherit;
    margin-top: 1rem;
}

css flexbox grid

Answer 1

Answer №1

Check out this model featuring basic css styling.

An important concept to note here is the use of double flexboxes; one for the card layout (image/paragraph) and another for all the cards, with a flex-wrap: wrap; property to ensure proper alignment.

I often refer to this flexbox cheat sheet to refresh my memory on how flexbox works :)

Below is the code snippet from the jsfiddle example:

section{
  display: flex;
  flex-wrap: wrap;
}

article{
  display: flex;
  flex-direction: row;
  border: 1px solid black;
  width: 300px;
}

<section>
  <article>
    <img src="http://lorempixel.com/150/100/" />
    <p>
      Some text.
    </p>
  </article>

  <article>
    <img src="http://lorempixel.com/151/100/" />
    <p>
      Some text.
    </p>
  </article>

  <article>
    <img src="http://lorempixel.com/150/101/" />
    <p>
      Some text.
    </p>
  </article>
</section>

Update: I recently made edits to the fiddle, incorporating grey text and vertically centered paragraphs :)

Answer 2

Check out this model featuring basic css styling.

An important concept to note here is the use of double flexboxes; one for the card layout (image/paragraph) and another for all the cards, with a flex-wrap: wrap; property to ensure proper alignment.

I often refer to this flexbox cheat sheet to refresh my memory on how flexbox works :)

Below is the code snippet from the jsfiddle example:

section{
  display: flex;
  flex-wrap: wrap;
}

article{
  display: flex;
  flex-direction: row;
  border: 1px solid black;
  width: 300px;
}

<section>
  <article>
    <img src="http://lorempixel.com/150/100/" />
    <p>
      Some text.
    </p>
  </article>

  <article>
    <img src="http://lorempixel.com/151/100/" />
    <p>
      Some text.
    </p>
  </article>

  <article>
    <img src="http://lorempixel.com/150/101/" />
    <p>
      Some text.
    </p>
  </article>
</section>

Update: I recently made edits to the fiddle, incorporating grey text and vertically centered paragraphs :)

Answer 3

Answer №2

Another way to achieve this layout is by utilizing CSS Grid:

To create a grid layout for your cards, place them all within a <div class="card-grid"> container and include the following CSS properties:

.card-grid {
 display: grid;
 grid-gap: 20px; /*optional for card spacing*/
 grid-template-columns: repeat(auto-fit, 300px);
}

Answer 4

Another way to achieve this layout is by utilizing CSS Grid:

To create a grid layout for your cards, place them all within a <div class="card-grid"> container and include the following CSS properties:

.card-grid {
 display: grid;
 grid-gap: 20px; /*optional for card spacing*/
 grid-template-columns: repeat(auto-fit, 300px);
}

Double-column design for viewing on both computers and mobile devices

Answer №1

Answer №2

Similar questions

What is the best way to include CSS styles in a React app with Webpack?

Below are three texts of varying sizes along with their corresponding images. I adjusted the height to align them properly, but when viewing on mobile devices, there are noticeable gaps between them

Using JavaScript, HTML, and CSS to select slices of a donut pie chart created with SVG

Button in Angular gets stuck when a touchscreen is long pressed

Is there an issue with CSS rendering? Safari displays page headers and colors properly, but Firefox and Chrome are not showing the

Is the navigation item only clickable within its designated area?

Is there a way to ensure that the div is displayed on the same line?

Ways to stop button from wrapping inside a div

Determining if a Website is Responsive with PHP

What is the process for making the default text in a text box appear grayed out?

Discover the Color's Value in Relation to a Different Color

Tips for applying a CSS wrapper to an element, not just text

Floating layout featuring a static width and a single element that expands

Utilize flexbox to create a list that is displayed in a column-reverse layout

Using jQuery to replace the content of a div with a delay?

CSS changes on child elements cause conflicts with parent hover effects

Ensure that the content is perfectly aligned with the rest of the page for a visually pleasing

The CSS 'd' attribute for the <path> element is not functioning properly in Firefox

The Droppable feature in jQuery/jQueryUI molds itself to match the shape of the Dragged

Is there a way to adjust my input value to correspond to December of 2022?