Html Question posted in
Some basic documentation can be found here.

Tailwind – React – Best way to structure HTML based on screen sizes

What would be the best way to handle an element which needs to stay in a specific place if the screen width is > X and stay in another place if screen width < X?

Example: https://jsfiddle.net/ovujgsz0/7/

I want the left column to sit under the right column if the screen size is smaller than 1024px.

One way that I see is to declare the div#leftColumn in both places (initial place and next to div#rightColumn) and then just use tailwind classes to display it depending on the screen size. But it doesn’t seem right.
What if I have a bigger and more complex component? I feel like this solution would pose problems with rendering more content than necessary.

Tags:

3

Answers


  1. 0

    You’re right that there is a better way 🙂

    To solve this problem, you can use the @media screen query. Using @media screen, you can specify a maximum width, under which a specified block of CSS will be applied. In your case, what you should change is the display attribute of the parent/container div.

    • If the screen is wider than 1024px, display: flex, flex-direction: row will make your elements render side-by-side in a row.
    • If the screen is narrower than 1024px, display:grid, and render the three child divs in a grid as you specified (leftColumn below rightColumn).

    Here’s an example using the code from your fiddle:

    .container {
  display: flex;
  flex-direction: row;
}

#mainContent, #leftColumn, #rightColumn {
  width: 200px;
  height: 200px;
}

@media screen and (max-width: 1024px) {
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 0;
  }

  #mainContent { grid-area: 1 / 1 / 3 / 2; }
  #rightColumn { grid-area: 1 / 2 / 2 / 3; }
  #leftColumn { grid-area: 2 / 2 / 3 / 3; }
  
}

    In this solution, the grid layout only applies when the screen is narrower than 1024px.

    You can use a https://cssgrid-generator.netlify.app/ to try different grids

    Login or Signup to reply.
  2. 0

    You can achieve this with a grid layout and by wrapping the sidebars inside a container that has the display: contents; property.

    Here’s an example using Tailwind.

    Login or Signup to reply.
  3. 0

    Using CSS layout tricks as an alternative to duplicate rendering of elements is usually a good idea. But moving an element left or right is not simple, especially if you want those elements to remain aligned with each other after the shift.

    Eventually I found a way to make the left column still align with the right column after moving it to the right, but the downside is that it’s out of the document flow and requires pre-calculating the width of the left column element. However, because of the grid layout, it’s not difficult to pre-calculate element widths. It’s not very elegant overall, but it works:

    <!-- grid columns: 1:2:1 -->
<article class="grid relative m-8 grid-cols-3 text-center text-white lg:grid-cols-4">
  <section class="col-span-2 h-[200rem] bg-green-500 lg:col-start-2">MAIN CONTENT</section>
  <div>
    <aside class="h-[20rem] bg-blue-500">RIGHT COLUMN</aside>
    <!-- width: 1/(1+2+1) -->
    <aside class="h-[70rem] bg-red-500 lg:absolute lg:left-0 lg:top-0 lg:w-1/4">LEFT COLUMN</aside>
  </div>
</article>

    DEMO on tailwind play

    It’s worth noting that tricks are just tricks. CSS can’t achieve everything in layout. If a more complex layout change arises that CSS can`t easily implement, rendering it twice may be a simpler and more flexible approach.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search