Tips for arranging headers next to each other on a restaurant menu

Question

Tips for arranging headers next to each other on a restaurant menu

I'm currently working on a website for a local restaurant, my very first project of this kind. As I draft the menu section, I'm struggling with displaying Starters and Main Courses side by side on the screen. Additionally, the layout falls apart when viewed on smaller screens.

Despite my efforts with bootstrap 4 and CSS styling using col-sm-6, float, and flex properties, I haven't been able to achieve the desired result.

<div class="menu-title">
      <h1>STARTERS</h1>
      <div class="menu-items">
        <div class="menu-item-body">
          <span class="number">1.</span>
          <span class="name">Vegetable Spring Roll</span>
          <span class="price">4.50&nbsp;€</span>
          <div class="description">
          Crispy spring roll with shredded cabbage, carrot, sweetcorn and soy sauce.                 
          </div>
        </div>                 
      </div>

      <div class="menu-items">
        <div class="menu-item-body">
          <span class="number">2.</span>
          <span class="name">Chicken Cheese Roll</span>
          <span class="price">4.50&nbsp;€</span>
          <div class="description">
          Crispy chicken cheese roll with chicken, onion, spring onion and cheese with sweet chilli sauce.                 
          </div>
        </div>                 
      </div>

CSS

.menu-title{
  flex-direction: column;
}


.menu-items {
  width: 100%; 
  padding: 50px 30px;
  flex-flow: row ;
}

.menu-item-body {
  float: left; 
  position: absolute;
  overflow-x: hidden;
  padding-left: 25px;
  margin: 0 1%; 
  width: 31%; 
}
.number {
  position: absolute;
  left: 0;
}
.name {
  background-color: #fff; 
}

.name:after {
  float: left;
  width: 0;
  white-space: nowrap;
  content: ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . ";
}
.price {
  padding-left: 5px;
  float: right !important;
  background-color: #fff;
}
.description {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.8;
  margin-bottom: 10px;
}

My goal is to create a responsive design that displays 2 or 3 columns of menu items on larger screens.

html css flexbox bootstrap-4

Answer 1

Answer №1

If you want to create a responsive layout that stacks content in a normal flow for smaller viewports but sets containers side by side for larger viewports, you can achieve this easily with a media query and some simple floats and pseudo-selectors.

Check out this float-based layout example that allows for multiple parallel sections that respond well on various viewports:

body {
  background: gray;
}

.parent {
  background: white;
  overflow: hidden;
  padding: 0 1em;
}

@media (min-width: 40em) {
  .parallel:not(:only-child)  {
    box-sizing: border-box;
    clear: both;
    float: left;
    width: 45%;
  }
  
  .parallel:nth-of-type(even) {
    float: right;
    clear: right;
  }
}

<div class="parent">
  <div class="parallel">
    <h2>Section 1</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
  </div>
  <div class="parallel">
    <h2>Section 2</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
  </div>
  <div class="parallel">
    <h2>Section 3</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
  </div>
  <div class="parallel">
    <h2>Section 4</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
  </div>
</div>

<div class="parent">
<div class="parallel">
    <h2>Section 5 &#8212 Oops! No siblings!</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
</div>
</div>

Floating elements in this way can handle the layout effectively without needing complex techniques or heavy markup. The design stays simple for smaller screens and adjusts seamlessly for larger screens through a media query.

Some key points of this technique include:

:not(:only-child) ensures that the split layout is applied only if the parallel item has neighboring items within its row. This makes it easy to manage individual sections without modifying the HTML structure.
Clear both for left-floated elements and clear right for right-floated elements help organize items within parent containers and create rows effortlessly.
To allow sections to stagger instead of align evenly, you can remove clear: both; from the first selector in the media query.

While there are more modern solutions available, this float-based approach is effective, straightforward, and adaptable with minimal markup required.

Answer 2

If you want to create a responsive layout that stacks content in a normal flow for smaller viewports but sets containers side by side for larger viewports, you can achieve this easily with a media query and some simple floats and pseudo-selectors.

Check out this float-based layout example that allows for multiple parallel sections that respond well on various viewports:

body {
  background: gray;
}

.parent {
  background: white;
  overflow: hidden;
  padding: 0 1em;
}

@media (min-width: 40em) {
  .parallel:not(:only-child)  {
    box-sizing: border-box;
    clear: both;
    float: left;
    width: 45%;
  }
  
  .parallel:nth-of-type(even) {
    float: right;
    clear: right;
  }
}

<div class="parent">
  <div class="parallel">
    <h2>Section 1</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
  </div>
  <div class="parallel">
    <h2>Section 2</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
  </div>
  <div class="parallel">
    <h2>Section 3</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
  </div>
  <div class="parallel">
    <h2>Section 4</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
  </div>
</div>

<div class="parent">
<div class="parallel">
    <h2>Section 5 &#8212 Oops! No siblings!</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit...</p>
</div>
</div>

Floating elements in this way can handle the layout effectively without needing complex techniques or heavy markup. The design stays simple for smaller screens and adjusts seamlessly for larger screens through a media query.

Some key points of this technique include:

:not(:only-child) ensures that the split layout is applied only if the parallel item has neighboring items within its row. This makes it easy to manage individual sections without modifying the HTML structure.
Clear both for left-floated elements and clear right for right-floated elements help organize items within parent containers and create rows effortlessly.
To allow sections to stagger instead of align evenly, you can remove clear: both; from the first selector in the media query.

While there are more modern solutions available, this float-based approach is effective, straightforward, and adaptable with minimal markup required.

Answer 3

Answer №2

You can utilize the Bootstrap Grid System and specify the maximum container width.

For instance:

col-xl-12 - Full width on Extra Large screens. col-xl-4 - 1/3 screen width on Extra Large screens.

Take a look at my code: I set up the container, row, and defined grid options.

Visit CodePen to observe how it functions on smaller devices.

CodePen

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.container-fluid {
  height: 100%;
}

.row {
  height: 100%;
}

.menu-title {
  width: 100%;
}

.menu-items {
  width: 100%;
  padding: 50px 30px;
  flex-flow: row ;
}

.menu-item-body {
  float: left;
  position: absolute;
  overflow-x: hidden;
  padding-left: 25px;
}
.number {
  position: absolute;
  left: 0;
}
.name {
  background-color: #fff;
}

.name:after {
  float: left;
  width: 0;
  white-space: nowrap;
  content: ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . ";
}
.price {
  padding-left: 5px;
  float: right !important;
  background-color: #fff;
}
.description {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.8;
  margin-bottom: 10px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css" />
  <title></title>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 d-flex justify-content-center">
        <div class="menu-title">
          <h1>STARTERS</h1>
          <div class="menu-items">
            <div class="menu-item-body">
              <span class="number">1.</span>
              <span class="name">Vegetable Spring Roll</span>
              <span class="price">4.50&nbsp;€</span>
              <div class="description">
                Crispy spring roll with shredded cabbage, carrot, sweetcorn and soy sauce.
              </div>
            </div>
          </div>
          <div class="menu-items">
            <div class="menu-item-body">
              <span class="number">2.</span>
              <span class="name">Chicken Cheese Roll</span>
              <span class="price">4.50&nbsp;€</span>
              <div class="description">
                Crispy chicken cheese roll with chicken, onion, spring onion and cheese with sweet chilli sauce.
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 d-flex justify-content-center">
        CENTER COLUMN CODE
      </div>
      <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 d-flex justify-content-center">
        RIGHT COLUMN CODE
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Answer 4

You can utilize the Bootstrap Grid System and specify the maximum container width.

For instance:

col-xl-12 - Full width on Extra Large screens. col-xl-4 - 1/3 screen width on Extra Large screens.

Take a look at my code: I set up the container, row, and defined grid options.

Visit CodePen to observe how it functions on smaller devices.

CodePen

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.container-fluid {
  height: 100%;
}

.row {
  height: 100%;
}

.menu-title {
  width: 100%;
}

.menu-items {
  width: 100%;
  padding: 50px 30px;
  flex-flow: row ;
}

.menu-item-body {
  float: left;
  position: absolute;
  overflow-x: hidden;
  padding-left: 25px;
}
.number {
  position: absolute;
  left: 0;
}
.name {
  background-color: #fff;
}

.name:after {
  float: left;
  width: 0;
  white-space: nowrap;
  content: ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . ";
}
.price {
  padding-left: 5px;
  float: right !important;
  background-color: #fff;
}
.description {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.8;
  margin-bottom: 10px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css" />
  <title></title>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 d-flex justify-content-center">
        <div class="menu-title">
          <h1>STARTERS</h1>
          <div class="menu-items">
            <div class="menu-item-body">
              <span class="number">1.</span>
              <span class="name">Vegetable Spring Roll</span>
              <span class="price">4.50&nbsp;€</span>
              <div class="description">
                Crispy spring roll with shredded cabbage, carrot, sweetcorn and soy sauce.
              </div>
            </div>
          </div>
          <div class="menu-items">
            <div class="menu-item-body">
              <span class="number">2.</span>
              <span class="name">Chicken Cheese Roll</span>
              <span class="price">4.50&nbsp;€</span>
              <div class="description">
                Crispy chicken cheese roll with chicken, onion, spring onion and cheese with sweet chilli sauce.
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 d-flex justify-content-center">
        CENTER COLUMN CODE
      </div>
      <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 d-flex justify-content-center">
        RIGHT COLUMN CODE
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Answer 5

Answer №3

In this solution, a straightforward implementation of Bootstrap 4 is utilized with customized styles purely for aesthetics.

The structure of the rows can be defined using the col-* classes; however, if you need each column to cater to different content types, treating them as rows might be necessary. In such cases, setting flex-column allows for a more suitable layout, although some additional adjustments are required. This approach is demonstrated in the second example solely utilizing Flexbox.

.item {
  margin-bottom: 3em;
  border: 1px solid grey;
}

.item header {
  border-bottom: 1px solid grey;
  padding: 15px 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-between">
    <div class="col-12 col-sm-5 item">
      <header>Item 1</header>
      <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti illum consectetur laborum sint sequi in hic dolore illo distinctio dolorum, earum quia dignissimos doloremque nesciunt deleniti nulla veritatis nemo nobis?</div>
    </div>
    ...
    ...
  </div>
</div>

A simpler alternative using only Flexbox is shown below:

.container {
  display: flex;
  height: 100vh;
}
...
...

<div class="container">
  <div class="starters item">
    <h1>Starters</h1>
    <hr>

    <div class="menu-item">
      <header>Vegetable Spring Roll</header>
      <div class="content">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit quam quo quaerat illum, vero numquam eligendi pariatur, est debitis voluptate dolores. Nesciunt doloremque cupiditate quo voluptatibus provident dicta iste ad?
      </div>
    </div>
    ...
    ...
  </div>
</div>

Answer 6

In this solution, a straightforward implementation of Bootstrap 4 is utilized with customized styles purely for aesthetics.

The structure of the rows can be defined using the col-* classes; however, if you need each column to cater to different content types, treating them as rows might be necessary. In such cases, setting flex-column allows for a more suitable layout, although some additional adjustments are required. This approach is demonstrated in the second example solely utilizing Flexbox.

.item {
  margin-bottom: 3em;
  border: 1px solid grey;
}

.item header {
  border-bottom: 1px solid grey;
  padding: 15px 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-between">
    <div class="col-12 col-sm-5 item">
      <header>Item 1</header>
      <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti illum consectetur laborum sint sequi in hic dolore illo distinctio dolorum, earum quia dignissimos doloremque nesciunt deleniti nulla veritatis nemo nobis?</div>
    </div>
    ...
    ...
  </div>
</div>

A simpler alternative using only Flexbox is shown below:

.container {
  display: flex;
  height: 100vh;
}
...
...

<div class="container">
  <div class="starters item">
    <h1>Starters</h1>
    <hr>

    <div class="menu-item">
      <header>Vegetable Spring Roll</header>
      <div class="content">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit quam quo quaerat illum, vero numquam eligendi pariatur, est debitis voluptate dolores. Nesciunt doloremque cupiditate quo voluptatibus provident dicta iste ad?
      </div>
    </div>
    ...
    ...
  </div>
</div>

Tips for arranging headers next to each other on a restaurant menu

Answer №1

Answer №2

Answer №3

Similar questions

Rotational orientation of a progress circle image in SVG

Having trouble with displaying the modal dialog in Twitter Bootstrap 3?

Tips for displaying or concealing data in table cells in Google Charts

Why is the jQuery class not responding to the is(:visible) selector?

Ensuring that my divs remain stationary despite changes in the size of the browser window

Adjust the size of an iFrame's content according to the dimensions of the iFrame

What is preventing me from loading js and css files on my web pages?

"Woops! An error occurred with the message: "SassError: Could not locate the specified target selector" while working with SCSS Modules and incorporating

The Art of HTML and CSS Layouts

Remove Chosen Pictures (Checkbox/PHP/MySQL)

Switch out HTML dynamically using JavaScript/JQuery, embracing the principles of DRY coding

Setting up automatic filtering for additional dropdown lists in Laravel is a useful feature that can enhance user

What is the best way to retrieve an image URL from a CSS file located in a public folder within a

Tips on how to horizontally center align a div when using the flex direction column technique

Is there a way to change the color of a number's font based on whether it is preceded by a "+" or "-" sign?

Combining multiple images into one CSS image sprite to create 4 clickable

Nested Flexbox Elements

Determining the optimal time to utilize the addClass function in jQuery and CSS

The asynchronous ajax request is leading to a browser freeze

Changing the content of a PHP div with an Ajax callback inside another Ajax callback?