Switching Flexbox CSS from a column layout to a row orientation

When the viewport width reaches 750px, I want to use flexbox to change the layout of my information from one column to four rows:

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
}

section {
  border: inset #333 thin;
  padding: 1em;
  /
}

.animals {
  display: flex;
  flex-direction: column;
  background-color: DodgerBlue;
}

.minerals {
  display: flex;
  flex-direction: column;
  background-color: rgb(255, 30, 218);
}

.vegetables {
  display: flex;
  flex-direction: column;
  background-color: rgb(233, 255, 30);
}

@media screen (min-width: 750px) {
  .body {
    display: flex;
    flex-direction: row;
  }
}
<div class="animals">
  <header>
    <h2>Animals</h2>
    <h3>DNC</h3>
  </header>
  <main>
    <section>
      <h4>Animal One</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Virtutis, magnitudinis animi, sit amet, consectetur adipiscing elit.</p>
    </section>
    <section>
      <h4>Animal Two</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Virtutis, magnitudinis</p>
    </section>
    <section>
      <h4>Animal Three</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Virtutis, magnitudinis animi, fortitudinis fomentis dolor mitigari solet. Omnes enim iucundum motum.</p>
    </section>
    <section>
      <h4>Animal Four</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    </section>
  </main>
</div>

htmlcssflexbox

Answer №1

Applying flex styling to the incorrect element can cause layout issues. By applying it to the main element and adjusting it in your media queries, you can easily switch between different layouts.

Additionally, be mindful of typos in your media queries. Make sure to include 'and' between the screen type and width specification to ensure correct formatting.

To see the visual difference, view the following code snippet in full-screen mode for a horizontal layout display:

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
}

section {
  border: inset #333 thin;
  padding: 1em;
 
}

.animals {
  background-color: DodgerBlue;
}

.wrapper {
  display: flex;
  flex-direction: column;
}
.minerals {
  display: flex;
  flex-direction: column;
  background-color: rgb(255, 30, 218);
}

.vegetables {
  display: flex;
  flex-direction: column;
  background-color: rgb(233, 255, 30);
}

@media screen and (min-width: 750px) {
  .wrapper {
    flex-direction: row;
  }
  section  {
        min-width:0;
        flex: 1 1 100%;
  }
}
<div class="animals">
  <header>
    <h2>Animals</h2>
    <h3>DNC</h3>
  </header>
  <main class="wrapper">
    <section>
      <h4>Animal One</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Virtutis, magnitudinis animi, sit amet, consectetur adipiscing elit.</p>
    </section>
    <section>
      <h4>Animal Two</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Virtutis, magnitudinis</p>
    </section>
    <section>
      <h4>Animal Three</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Virtutis, magnitudinis animi, fortitudinis fomentis dolor mitigari solet. Omnes enim iucundum motum.</p>
    </section>
    <section>
      <h4>Animal Four</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    </section>
</main>
</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

Tips for dynamically inserting JSON data into HTML elements

{ "top10": [ { "state": "red", "claimed": true, "branch": "release-2.3.4", ...

javascriptjqueryhtmljson

Set the userID variable as the assigned value and the username variable as the ng-model attribute for a select

Seeking assistance with a coding dilemma. Currently working on an ASP.Net MVC and AngularJS application, where I am utilizing the select tag to display a list of users. Both the select tag and a div are connected via the same ng-model for real-time binding ...

htmlangularjsasp.net-mvc

Assigning event to the body element

Is there a way to bind an event to the entire page, specifically the html or body tag? I am trying to achieve the following: document.addEventListener('mousemove', function() { alert('a'); }); I want an alert to be triggered whenever ...

javascripthtml

Stop the sudden jump when following a hashed link using jQuery

Below is the code snippet I am working with: $( document ).ready(function() { $( '.prevent-default' ).click(function( event ) { event.preventDefault(); }); }); To prevent the window from jumping when a hashed anchor ...

javascriptjqueryhtmlcss

Conceal only the anchor tag's text and include a class during the media query

In the anchor tag below, I have a text that says "Add to cart," but on mobile view, I want to change it to display the shopping cart icon (fa fa-cart). <a class="product"><?php echo $button_add_to_cart ?></a> Currently, the variable $bu ...

javascriptphpjqueryhtmlcss

Adjust the Division's Width to be 20% of the Total Page Width Excluding Margins

https://i.sstatic.net/T0nKq.png I need to create a menu page with 5 equal columns, but I'm facing an issue with the layout. Here's my current CSS for the yellow divs: width:20%; height:100vh; background-color: yellow; display:inline-block; In ...

htmlcss

Developing a custom mixin to alert a banner at the top of the webpage

I currently have a feature on my website that triggers a pop-up notification whenever a message is received from another user. The pop-up consists of a div displaying the content of the message along with a close button. After exploring various methods to ...

htmlcsscss-transitions

Print the page number using HTML and PHP

Is there a way to center page numbers in HTML? I have the code below that echoes the numbers, but they always appear on the left side of the page. I tried wrapping them in a div to center them, which worked, but then each number is enclosed in its own d ...

phphtmlcssecho

Tips for stopping automatic scrolling (universal solution)

Issue or Inquiry I am seeking a way to disable actual scrolling on an element while still utilizing a scrollbar for convenience (avoiding the need for manual JavaScript implementations instead of relying on browser functions). If anyone has an improved s ...

javascriptjquerycsshtmlcross-browser

Frames of Animation

Seeking assistance in understanding how to create frame animation using JavaScript or CSS. Attempting to replicate the animation seen on this website. Intrigued by the road animation and unsure if it is achieved using a plugin or just JavaScript and CSS. ...

javascripthtmlcsssvgcss-animations

How can you convert label text to capitalize if the original text is in uppercase letters?

Is there a way to change a label text to capitalize if the label text itself is in uppercase? I attempted the following: <p class="capitalize">THIS IS SOME TEXT.</p> In addition, I added: p.capitalize { text-transform: capitalize; } Howeve ...

htmlcss

Unable to Modify Header Link Font Color

I've been struggling to change the link color of a header on my website. By default, the link color in my CSS is blue, but I want the links in my entry headers to be gold. I thought this would be a simple task - just define the link color for the hea ...

csswordpress

Tips for showcasing model data dynamically on a webpage using HTML

My model is constantly updating within a function, and I need a way to dynamically display this updated data without the need to refresh the page. How can I achieve this? models.py class MyLongProcess(models.Model): active_uuid = models.UUIDField(&apo ...

javascriptpythonhtmldjangoajax

Having trouble getting CSS calc to work on a table cell? Wondering how to make two out of four columns the same width?

Is it possible that CSS calc doesn't work on a table cell? It seems that no matter what size I change 90px to, the result looks the same. Even after trying various calculations with calc, I cannot seem to achieve the desired number of 230. The goal i ...

css

Is there a solution available for tidying and organizing a CSS stylesheet efficiently?

In the project I am currently working on, the previous developers took an interesting approach by constructing all the selectors based on individual properties. For instance: .panel .selected a, a.selected-thumb, .date-picker input[type="submit"], .headi ...

cssparsing

Is it possible to conceal solely the content within the Bootstrap Modal?

Is there a unique approach to only concealing the content within the modal, without hiding the modal itself? The goal is to click "next" and have the content of the next modal displayed, without reopening the modal itself but simply transitioning to the ne ...

jqueryhtml

Contrast the positions (offsets) of two elements

I am trying to determine if one element is positioned above another by comparing their offset positions. Specifically, I need to verify whether the me element is within the bounds of the screen element using their respective offset positions. HTML Code ...

javascriptjqueryhtml

The method for retrieving and entering a user's phone number into a text field upon their visit

Objective: To enhance the user experience by automatically filling in the phone number input field when a mobile user views the page, making it easier to convert them into leads. A privacy policy will, of course, be in place. This page will offer a promo ...

javascriptphpandroidhtmlios

Generate a dynamic animation by combining two images using jQuery

My attempt to animate two images is not working. I received some help on Stack Overflow but still facing issues with my CSS and HTML code. This is the code I am using: $(document).ready(function() { $(".animar").click(function() { $("#img4" ...

javascriptjquerycsshtmlcss-animations

Guide to creating animated sections using only CSS as you scroll the webpage

I am searching for a method to add animation effects (using @keyframes, transform...) to certain elements as the user scrolls down the page. For instance: When the offset is 0: the div will have a height of 100px. When the offset is between 0 and 100: th ...

htmlcss