Fine-tuning the flexbox grid layout for various screen sizes, both big and small

Two different layouts were created.

The first layout is designed for medium & large screens, while the second one is tailored for devices with a maximum width of 736px.

Check out the vanilla implementation using flexbox (without mobile adaptation)

Here is the version utilizing bootstrap, which can be merged as it also utilizes flexboxes

https://i.sstatic.net/MhSN8.jpg

<div class="d-flex gutters">
    <div class="bigger-cell">
        <div class="hero">
            I'm Hero!
        </div>
    </div>
    <div class="cell">
        <div class="hero">
            I'm Hero!
        </div>
    </div>
</div>

<div class="d-flex gutters">
    <div class="cell">
        <div class="hero">
            I'm Hero!
        </div>
    </div>
    <div class="cell">
        <div class="hero">
            I'm Hero!
        </div>
    </div>
    <div class="cell">
        <div class="hero">
            I'm Hero!
        </div>
    </div>
</div>
htmltwitter-bootstrapcssflexbox

Answer №1

You can efficiently achieve the layouts you desire for both large and small screens using flexbox.

Significantly simplify your code by utilizing flexbox.

Explore the code here

html, body {
  background: linear-gradient(#ade3e8, #b4b4b4) no-repeat;
  height: 100%;
}

body {
  font-family: 'Raleway', sans-serif;
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  color: #FFF;
}

.d-flex {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.d-flex>div {
  margin: 5px;
}

.hero {
  flex: 0 0 calc(33.33% - 10px);
  padding: 30px 0;
  background: #7e58b7;
  border-radius: 3px;
}

.hero:first-child {
  flex-basis: calc(66.66% - 10px);
}

@media (max-width: 736px) {
  .hero {
    flex-basis: calc(50% - 10px);
  }
  .hero:first-child {
    flex-grow: 1;
  }
}

* {
  box-sizing: border-box;
}
<div class="d-flex">
  <div class="hero">I'm Hero!</div>
  <div class="hero">I'm Hero!</div>
  <div class="hero">I'm Hero!</div>
  <div class="hero">I'm Hero!</div>
  <div class="hero">I'm Hero!</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

Ways to access a field value in SAPUI5

As I delve into OPENUI5/SAPUI5, I'm faced with the task of accessing data for the controls I've implemented. For instance: <Label text="Amount" /> <Input id="inputAmount" value="{Amount}" /> <Text id="lblCurrency" text="USD" > ...

javascripthtmlmodelsapui5

The error message "Angular formGroup requires a FormGroup instance. Kindly provide one."

I used angular reactiveforms to create a form. The default data is successfully printed on the form, however, I am facing an error in the console that says "formGroup expects a FormGroup instance. Please pass one in." Can someone guide me on how to resolve ...

htmlangular

The widths of inputs vary between FireFox and Chrome

I've been investigating why the widths in FireFox and Chrome show a significant difference. This variation is causing a problem with my Modal in the views. Chrome: FireFox: Upon comparing the photos, it's clear that the width of the input in C ...

htmlcsswidthpixel

How come my div can alter its own attributes on hover, but its sibling cannot?

As I delve into the realm of web development, my initial project involves creating a portfolio site. However, I am facing difficulties with the dropdown section in one of the menus. I incorporated a :hover pseudo-class to the dropdownhover div to signal ...

htmlcss

JavaScript is submitting an incorrect HTML form

I have a PHP script that retrieves items from a database and allows users to vote on them. Each item is associated with an HTML form containing an input text field and a submit button to enter the score. I also have a jQuery script on the same page that up ...

phpjqueryhtmlforms

Modifying an HTML list item to become 'active' in a navigation bar

One way I've been implementing my navbar on each page is by using the following code at the bottom of the page within script tags: $("#navbar-partial").load("navbar.html). The code for the navbar list looks like this: <ul id="main-nav" class="nav ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilizing Bootstrap 4 cards in conjunction with a responsive next/image component

<div className="row align-items-center justify-content-center"> <div className="col-md-3 mt-3"> <div className="card bg-light"> <div className="card-img-top"> <N ...

cssreactjsbootstrap-4next.js

The inclusion of float: left disrupts the formatting of the list

My webpage features a visual element known as a "plan", which consists of a small table and an image. I want these two elements to appear side by side without any styling. Currently, they are displayed one below the other. You can view how it looks like he ...

htmlcsscss-float

What is the best way to utilize d3.domain for extracting both d3.min and d3.max values from various columns within a JSON dataset?

I have a JSON file that contains data from different years for "male," "female," and "both" categories. I want to set the minimum value in my domain to be the lowest value across all three columns and do the same for the maximum value. Is there a way for ...

htmljsond3.jsvisualization

Blazor: Personalizing color variables in _root.scss - A Step-by-Step Guide

Upon inspecting the generated project, I noticed a multitude of color variables such as --bs-body-bg. The developer tools indicate it is in _root.scss, however, that file appears to be non-existent and I suspect those variables may actually reside within b ...

cssbootstrap-4blazorblazor-server-side

How Python Flask sends a string as &#34 to an HTML page

I am working on a Flask app and I need to send simple JSON data from the app.py file to an HTML page. Here is the relevant code in my app.py: jsonArr = [{"type": "circle", "label": "New York"}, {"type": "circle", "label": "New York"}] return ...

javascriptpythonhtmlflaskascii

Tips for creating gaps between wells within a Bootstrap row

Utilizing bootstrap, I am aiming to position two wells side by side without them being squeezed right next to each other. However, I am encountering some issues with achieving this. Here's the code snippet I am currently using: <div class="contai ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Ensure that the responsive SVG image remains centered even when resizing

I have been attempting to center crop the responsive SVG image while resizing. Even though I used preserveAspectRatio="xMidYMax slice", the image width does not stay consistent with my screen size. body{ margin:0;padding:0; } .wrapper { position: re ...

csshtmlsvgresponsiveness

Is it possible to use the .focus() event on an entire form in JQuery? If so, how

Take a look at this HTML snippet: <form ....> <textarea>....</textarea <input .... /> </form> I'm trying to set up a help section that appears when the user focuses on any form element, and disappears when they lose ...

javascriptjqueryhtmlformsfocus

The iPage server has encountered a 403 Forbidden Error, preventing

My website is linked with WordPress, but I'm encountering a 403 forbidden error in the sub-menu. Can someone assist me with this issue? I have uploaded a screenshot of the folder in iPage here Additionally, I want my WordPress page to show up correc ...

phphtmlcsswordpresshosting

PHP's $_SESSION variable for passing data between pages

Every time I visit a new page, whether it's a login page or any other, I want to store the name of that page in a $_SESSION variable. For example, on the login page: <?php session_start(); $_SESSION['page'] = 'login.htm&apo ...

phphtml

problem with nivo slider causing content to overflow

My webpage is using nivoslider to display images. However, I am facing an issue where the images are overflowing one by one until the page fully loads. I have tried setting the overflow:hidden property in the CSS but it doesn't seem to correct the pro ...

csshtml

When using a routerlink in an a tag with Bootstrap 4, the navigation tab functionality may not work as expected

I've been working on bootstrap4 tabs and everything is working smoothly until I add a router link to the anchor tag. Strangely, only the hover effect works in this case. Can anyone help me troubleshoot this issue? Below is my code snippet: <link ...

htmlangularcssbootstrap-4

What is the best way to establish a maximum limit for a counter within an onclick event?

I'm struggling to figure out how to set a maximum limit for a counter in my onclick event. Can someone help me? What is the best way to add a max limit to the counter of an onclick event? Do I need to use an if statement? If yes, how should it be w ...

javascripthtml

Trouble with highlighting the chosen menu item

I have been attempting to implement this code snippet from JSFiddle onto my website. Although I directly copied the HTML, used the CSS inline, and placed the Javascript in an external file, the functionality does not seem to be working properly. Feel free ...

javascriptjqueryhtmlcss