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

<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

Rearranging div placement based on the width of the screen

I am currently working on building a responsive website and I need two divs to switch positions depending on the screen width, both on initial load and when resizing. Despite my efforts in researching and trying various options, I have not been successful ...

javascriptjqueryhtmlswap

Navigation through dots on a single page

Having an issue with my dot navigation and anchor links placement. I want the anchors to be vertically centered in the middle of the section, regardless of window size. Here's what I'm aiming for : For larger windows : And for smaller windows : ...

javascriptjqueryhtmlcssnavigation

Click the navigation bar to toggle it on and off

I have a script that creates a navbar. Currently, the dropdown menu only opens when hovered over. The issue arises when accessing this on a mobile browser, as the dropdown menu does not open. How can I modify this script to make the dropdown menu open wh ...

javascripthtmljquerycss

modify the appearance of HTML controls in real time with C#

Is there a way to dynamically add an additional navigation item to my website's menu list when the admin logs in through admin.aspx? The menu list is created using HTML controls such as <ul>...<li>, and I would like the new navigation item ...

c#htmlcssasp.net

Error: when trying to refresh TABLE DATA, an issue occurred with a stale element reference where the element is not connected to the

Apologies in advance for my poor grasp of the English language. I am working on a project where I need to continuously fetch row data from a table using driver.refresh() The first iteration works fine, and the data is retrieved for each row. However, when ...

pythonhtmlseleniumselenium-chromedriverstaleelementreferenceexception

Using a variable with the :contains selector

function checkAndUpdateStatus(newName) { $('#myTable').children('tr').remove(":contains('" + newName + "')"); }; The function above is attempting to remove table rows in 'myTable' containing a string matching the ...

jquerycssjquery-selectors

Achieving CSS Buttons That Change to Green When Clicked and STAY Green

I've been tasked with working on a front-end project for a website that involves buttons changing color when clicked and staying that color. Here is the CSS <style> code I have written for these specific buttons: .button { background-color ...

javascriptjqueryhtmlcss

Differentiate the items within a list containing identical divs using JavaScript

Currently, I am expanding my knowledge in HTML, CSS, and JS by incorporating Angular and JQuery. In one of my projects, there is a div labeled "eventBoxes" where multiple divs known as "eventBox" can be added. I have created a template for the eventBox i ...

javascripthtmlangularjs

HTML Data Service for WCF

Is there a way for users to easily display a list of their publications on their websites? I'm considering pulling data from a SSRS database and using a WCF Data Service. However, the WCF Data Service only outputs ATOM or JSON data. Is this the right ...

htmlwcf

Can you explain the contrast between open and closed shadow DOM encapsulation modes?

My goal is to create a shadow DOM for an element in order to display elements for a Chrome extension without being affected by the page's styles. After discovering that Element.createShadowRoot was deprecated, I turned to Element.attachShadow. Howeve ...

javascripthtmldomshadow-dom

Scrollbars in Jquery are not visible anymore when adjusting the size of a div element, causing them to expand

I'm facing an issue with a layout containing a div that expands to the screen size upon clicking a button. Initially, the div has enough content to necessitate scrolling. However, after collapsing back to its original size, the scroll bar disappears a ...

jqueryhtmlcss

Having trouble with the Slide Toggle menu closing unexpectedly?

$('span.nav-btn').click(function () { $('ul#menu').slideToggle(); }) $(window).resize(function () { if ( $(window).width() > 900) { $('ul#menu').removeAttr('style') } }); $('spa ...

javascriptjqueryhtmlcss

React - Separate colors for different containers

I have been struggling with this issue repeatedly, yet I still haven't found the most efficient solution for it. Imagine having 2 DIVs, A and B, both nested inside a container with columns assigned to each. What would be the optimal way to fill a back ...

htmlcssreactjsbackground-color

The issue of HTML form not displaying within a Java servlet environment

While following a basic tutorial to learn Java servlet programming in Eclipse, I encountered an issue with the browser not rendering the submit button in the HTML form. Despite reviewing the code multiple times, making small modifications, and even double- ...

javahtmlxmlservletsforms

There seems to be an issue with the Angular QuickStart project as it is not functioning properly, showing the error message "(

After following the instructions in this guide for setting up VS2015, I encountered issues when trying to run the "quick start" project or the "tour of heroes" tutorial on Google Chrome. The error message I received can be found here: Angular_QuickStart_Er ...

htmlangulargoogle-chrometypescriptvisual-studio-2015

Why is the current Menu Item highlight feature not functioning properly?

Why isn't the highlight current Menu Item feature working? I've checked my code, but it doesn't seem to be functioning as expected. Could you lend me a hand? Html: <section id="menu-container"> <div id="bar"><img src="b ...

javascriptjqueryhtmlcss

Include image hover text without using HTML

I am looking to add a hover effect to some images using CSS and JS since I cannot directly edit the HTML file. The goal is to have centered text pop out when hovering over certain images. I know the div class of the image but unfortunately, I cannot add te ...

javascripthtmlcsshover

What is the best way to implement form fields that have varying validation patterns based on different conditions?

Currently, my focus is on developing a form that prompts the user to choose between "USA" or "International" via radio buttons. The input field for telephone numbers should then adapt its requirements based on the selected country - either a 10-digit US nu ...

javascripthtmlformsvalidation

Alert: The index named "namaunit" is not defined

As a beginner in programming, I am facing an issue where my code is not working for a particular input form. Oddly enough, the same code works perfectly fine for another input form with similar structure. It's puzzling to me why it's not function ...

phphtmlmysql

The functionality of the Ionic menu button becomes disabled once the user has successfully logged in

Having trouble clicking the button after taking a test. Situation: Once logged in -> user takes a test and submits -> redirected to home page. However, unable to click on "Menu button" on the home page. In my Login.ts file: if (this.checker == "false" ...

htmltypescriptbuttonionic-framework