DEV Community

Cover image for Using min-width Media query for Mobile first design
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

8

Using min-width Media query for Mobile first design

This is a guest post written by Simon Ramsay.
Simon is an amazing frontend developer, be sure to check him out on Twitter as well!

In this article, we will look at media queries for screen and the width feature, in particular min-width, to turn a one-column layout into a two-column layout. We will make this happen at 768px wide, a common width of a tablet device, but you can use any width you like. This point where our layout goes from one column to two columns is called a
breakpoint.

Our setup is two HTML elements, an article and an aside inside the main element. We are using flexbox to make our elements stack as a column. We can use flex-direction: column; to achieve this. We will also add some margin to our items and background color.

Here is our code:

main {
  display: flex;
  flex-direction: column;
}
main > * {
  padding: 5px;
  background-color: #0fadff;
  margin: 10px;
}
Enter fullscreen mode Exit fullscreen mode
<main>
  <article>
    <h1>Article</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore
    </p>
  </article>
  <aside>
    <h1>Aside</h1>
    <p>
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
      mollit anim id est laborum.
    </p>
  </aside>
</main>
Enter fullscreen mode Exit fullscreen mode

Moreover, this is what it looks like.

Two column layout in CSS

For wider screens, we want to have 2 columns. To do this we can add the @media screen media query with a min-width feature with a value of 768px.
This means that the minimum width of this rule effect will be 768px wide, which is any width 768px and over. We will place a new flex-direction rule inside the media query. The media query with the overridden main element looks like this:

media screen and (min-width: 768px) {
  main {
    flex-direction: row;
  }
}
Enter fullscreen mode Exit fullscreen mode

Media queries in CSS

To tidy things up a bit we can then add some widths using flex-basis for article and aside of 65% and 35% respectively and we have built our first mobile-first responsive layout.

@media screen and (min-width: 768px) {
  main {
    flex-direction: row;
  }
  main > article {
    flex-basis: 65%;
  }
  main > aside {
    flex-basis: 35%;
  }
}
Enter fullscreen mode Exit fullscreen mode

This is what it will look like.

Altered media query

So that how you can control the layout of a simple website. Thanks for reading.

Resizing media query in CSS

You can also play around with this demo yourself on this Codepen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Image of Bright Data

Ensure Data Quality Across Sources – Manage and normalize data effortlessly.

Maintain high-quality, consistent data across multiple sources with our efficient data management tools.

Manage Data

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay