Guide on utilizing flexbox to create a vertical stack of elements

I'm currently working on creating a layout similar to this:

https://i.sstatic.net/eZurX.png

To see my progress so far, check out: https://codepen.io/maketroli/pen/aaNezK

Here is the code snippet I'm using: 

.product-descriptions {
  text-align: left;
  max-width: 400px;
}
.product-descriptions__item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.product-descriptions__icon-container {
  width: 100px;
  fill: red;
}
.product-descriptions__title {
  font-size: 1.325em;
  font-weight: bold;
  color: red;
}
<div class="product-descriptions">
  <div class="product-descriptions__item">
    <div class="product-descriptions__icon-container">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70" aria-hidden="true" focusable="false">
    <title>icon_circleplus</title>
    <g>
        <path d="M50.66,4.76a30.71,30.71,0,1,0,30.7,30.7,30.71,30.71,0,0,0-30.7-30.7M66.55,38.87H54.06V51.35H47.25V38.87H34.76V32.06H47.25V19.57h6.81V32.06H66.55Z"></path>
    </g>
</svg>

    </div>
    <div class="product-descriptions__title">Advantage SafeBalance</div>
    <div class="product-descriptions__description">Say goodbye to paper checks—and to overdraft fees.</div>
    <a id="" class="product-descriptions__link" href="#" data-index="0">
                                See details
                            </a>
  </div>
  <div class="product-descriptions__item">
    <div class="product-descriptions__icon-container">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70" aria-hidden="true" focusable="false">
    <title>icon_circleplus</title>
    <g>
        <path d="M50.66,4.76a30.71,30.71,0,1,0,30.7,30.7,30.71,30.71,0,0,0-30.7-30.7M66.55,38.87H54.06V51.35H47.25V38.87H34.76V32.06H47.25V19.57h6.81V32.06H66.55Z"></path>
    </g>
</svg>

    </div>
    <div class="product-descriptions__title">Advantage Plus</div>
    <div class="product-descriptions__description">More control, more options, more ways to waive the monthly fee.</div>
    <a id="" class="product-descriptions__link" href="#" data-index="1">
                                See details
                            </a>
  </div>
  <div class="product-descriptions__item">
    <div class="product-descriptions__icon-container">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70" aria-hidden="true" focusable="false">
    <title>icon_circleplus</title>
    <g>
        <path d="M50.66,4.76a30.71,30.71,0,1,0,30.7,30.7,30.71,30.71,0,0,0-30.7-30.7M66.55,38.87H54.06V51.35H47.25V38.87H34.76V32.06H47.25V19.57h6.81V32.06H66.55Z"></path>
    </g>
</svg>

    </div>
    <div class="product-descriptions__title">Advantage Relationship</div>
    <div class="product-descriptions__description">Everything you get with the Plus setting along with extra perks and services.</div>
    <a id="" class="product-descriptions__link" href="#" data-index="2">
                                See details

                            </a>
  </div>
</div>

Any suggestions on how to achieve the desired outcome?

htmlcssflexbox

Answer №1

One major adjustment I made in your code was reducing the size of the icons and increasing the font size of the titles. I also fine-tuned the margins to closely resemble the desired outcome. Here is my revised code snippet:

.product-descriptions {
  max-width: 400px; // Adjusted for Mobile View

  &__item {
   display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  &__icon-container {
    width: 50px;
    fill: red;
  }

  &__title {
    font-size: 1.4em;
    font-weight: bold;
    color: red;
    margin-top: 4px;
    margin-left: 10px;
  }

  &__description {
    margin-left: 60px;
    width: 240px;
  }

  &__link {
    margin-left: 60px;
    margin-bottom: 30px;
    margin-top: 8px;
    text-decoration: none;
  }
}

Answer №2

Here's a suggestion you might like:

Check out this link for more details

One way to achieve the desired layout is by enclosing your title, description, and link within a container. This will make the svg and the container flex items of your original flex container. Remove the flex-wrap: wrap; rule to keep the text in a separate column from the svg. You can then adjust the size of the SVG using CSS for better design results.

<div class="product-descriptions">
  <div class="product-descriptions__item">
    <div class="product-descriptions__icon-container">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70" aria-hidden="true" focusable="false">
    <title>icon_circleplus</title>
    <g>
        <path d="M50.66,4.76a30.71,30.71,0,1,0,30.7,30.7,30.71,30.71,0,0,0-30.7-30.7M66.55,38.87H54.06V51.35H47.25V38.87H34.76V32.06H47.25V19.57h6.81V32.06H66.55Z"></path>
    </g>
</svg>

    </div>
    <div class="container">
      <div class="product-descriptions__title">Advantage SafeBalance</div>
      <div class="product-descriptions__description">Say goodbye to paper checks—and to overdraft fees.</div>
      <a id="" class="product-descriptions__link" href="#" data-index="0">
                                  See details
                              </a>
      </div>
  </div>
  <div class="product-descriptions__item">
    <div class="product-descriptions__icon-container">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70" aria-hidden="true" focusable="false">
    <title>icon_circleplus</title>
    <g>
        <path d="M50.66,4.76a30.71,30.71,0,1,0,30.7,30.7,30.71,30.71,0,0,0-30.7-30.7M66.55,38.87H54.06V51.35H47.25V38.87H34.76V32.06H47.25V19.57h6.81V32.06H66.55Z"></path>
    </g>
</svg>

    </div>
    <div class="container">
      <div class="product-descriptions__title">Advantage Plus</div>
      <div class="product-descriptions__description">More control, more options, more ways to waive the monthly fee.</div>
      <a id="" class="product-descriptions__link" href="#" data-index="1">
                                  See details
                              </a>
    </div>
  </div>
  <div class="product-descriptions__item">
    <div class="product-descriptions__icon-container">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70" aria-hidden="true" focusable="false">
    <title>icon_circleplus</title>
    <g>
        <path d="M50.66,4.76a30.71,30.71,0,1,0,30.7,30.7,30.71,30.71,0,0,0-30.7-30.7M66.55,38.87H54.06V51.35H47.25V38.87H34.76V32.06H47.25V19.57h6.81V32.06H66.55Z"></path>
    </g>
</svg>

    </div>
    <div class="container">
    <div class="product-descriptions__title">Advantage Relationship</div>
    <div class="product-descriptions__description">Everything you get with the Plus setting along with extra perks and services.</div>
    <a id="" class="product-descriptions__link" href="#" data-index="2">
                                See details
                            </a>
    </div>
  </div>
</div>

Some CSS has been added as well:

.product-descriptions {
  text-align: left;
  max-width: 400px; // To simulate Mobile

  &__item {
    display: flex;
    flex-direction: row;
    // flex-wrap: wrap;
  }

  &__icon-container {
    width: 60px; /* Changed to 60px */
    fill: red;
  }
  &__title {
    font-size: 1.325em;
    font-weight: bold;
    color: red;
  }
}

/* Additional CSS Below */
svg {
  width: 50px;
}

.product-descriptions__description {
 max-width: 300px;
}

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

Issue with IE failing to load a particular Stylesheet

Have you had a chance to view this live demonstration? My website has two different stylesheets, one specifically for Internet Explorer and another for regular browsers. Here's how they are set up in the header: <link rel="stylesheet" type="text/c ...

cssinternet-explorer

When viewing HTML emails in dark mode on iOS Gmail, the CSS appears to be inverted

While sending an HTML email from a nodejs app, I encountered an issue with Gmail on iOS where elements with background-color or color properties were getting reversed. This was most noticeable on black and white elements. Despite consulting various guides ...

htmlcssnode.jsemailgmail

Choosing one item from an array to showcase in a view [Angular]

I've previously inquired about this issue without success. My current challenge involves a store app created with AngularJS. I am trying to implement a feature where clicking on an item will open it in a separate "item" view, displaying only the info ...

javascripthtmlarraysangularjs

Revamping the CSS File Linked in the Header

app directory css style.css inc header.inc.php footer.inc.php index.php login.php register.php In the app directory, there is a CSS folder containing style.css file, and an inc folder ...

phpcss

"Utilizing Bootstrap to create proper spacing between elements within a

https://i.sstatic.net/ArC6C.png Hello there! I am looking for help on how to align my value 2 next to value 1 with some spacing, and also adjust the text "Lorem Ipsum" based on the size of my button. This is my current code: a <div classNa ...

htmlreactjsbootstrap-4

What are some ways to restrict the number of words per line?

I'm currently developing an online store using NextJS and Material UI. The issue I encountered is related to the long product names that are causing my Card component to stretch. As shown in this image: https://i.sstatic.net/07qNm.png If you obse ...

javascripthtmlcss

Adding a touch of flair to your Vue-i18n parameter

If the template has the following translation: <p> {{ $t('Counter: {n}', {n: counter}) }} </p> where counter is a number returned from the script, I want to style the variable "n" (for example, make it red). Is there a way ...

cssvue.jsvue-i18n

Converting an HTML form with multiple select options to Javascript

I'm relatively new to javascript and could really use some help here. Within my form, I have a multiple select field as shown below: <select name="services[]" class="required" multiple="multiple" > <option style="padding:5px ...

javascriptphphtmljsonajax

Encountering difficulties with implementing and utilizing bootstrap in Symfony 5.3 with Encore plugin

While I am currently dealing with an older version of Symfony, I decided to create a new 5.3 Symfony application from scratch. However, I am facing difficulties when trying to integrate bootstrap into it. After consulting some documentation, I proceeded to ...

javascriptphpcsstwitter-bootstrapsymfony

Python Requests - missing attribute's value

Let's say I have the below HTML input element inside a form: <input name="title_input" type="text" id="missing_value" title="Title"> If my intention is to submit a POST request: s = requests.Session() s.get(url) postResult = s.post(url, {&apo ...

pythonhtmlformspython-requests

Effortlessly glide to the top of the webpage

After dedicating numerous hours to this task and being a newcomer to JavaScript/JQuery, I am still unsure of how to achieve the following: I have implemented a "back to top" anchor link in the footer of my pages that directs users back to the header. I am ...

javascripthtmlcss

Is there a way to use Selenium with Python to access and open the anchor tag links that are embedded within ul and li tags?

I am trying to figure out how to open the link associated with the anchor tag that has an ID of ViewInvoice. Can someone help me with this? I have attached a snapshot of the HTML page for reference. Snapshot: Highlighted in yellow is the specific item I a ...

pythonhtmlseleniumwebdriver

Editing Files on Your Computer Using a Website

My objective is to enable users to edit either a json file located in the same folder or the current web page in a way that remains persistent for all users accessing the page. The challenge lies in the fact that it is hosted on a local smb over which I ha ...

javascripthtmljsonlocalsmb

Resources for Vue.js stylesheets

Vue.js is my latest discovery and I have been experimenting with the single file component architecture. A small issue I encountered was that all of my components' styles were being loaded on the page, even if they weren't currently active. Is t ...

javascriptcssvue.js

Unique background image tailor-made for each radio button

Looking to create radio buttons with buttonset that have unique icon backgrounds for each button. Open to options other than buttonset if available, but assuming it needs to be used. Key requirements: No radio button icon Rollover effect Icon background ...

jquerycssjquery-ui

Enhance the aesthetics of material-ui tooltips by utilizing @emotion/styled

Can material-ui tooltips be customized using the styled function from @emotion/styled? import { Tooltip } from '@material-ui/core'; import styled from '@emotion/styled'; const MyTooltip = styled(Tooltip)` // customize the tooltip ...

cssreactjsmaterial-uiemotion

Tips for creating responsive Math Latex

Check out this link to my website page. Also, take a look at this other link. While using Bootstrap, I've noticed that all content is responsive except for the equations in the first link and the Matrix multiplication example in the second link towar ...

csstwitter-bootstrapresponsive-designlatex

Click event in jQuery to change the background color of <td> element

I'm still getting the hang of jQuery, so please bear with me. :) The purpose of this code is to color a square with the selected color when clicked if it's white, and turn it back to white if it's already colored. It works fine except for a ...

jquerycsscolors

In Javascript, when trying to call Firebase database child(), it may sometimes result in the return value being "

Here is the current setup: Firebase Database: setores: { -KkBgUmX6BEeVyrudlfK: { id: '-KkBgUmX6BEeVyrudlfK', nome: 'test' } -KkDYxfwka8YM6uFOWpH: { id: '-KkDYxfwka8YM6uFOWpH', nome ...

javascriptjqueryhtmlfirebasefirebase-realtime-database

Transferring data between two screens within an Ionic app by harnessing the power of angularJS

As a beginner in Ionic and Angular development, I am currently facing an issue with my Ionic application. I have two pages - one with drop-down selects and a submit button, and another page to process the user's choices and display the results. The pr ...

javascripthtmlangularjsweb-applicationsionic-framework