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

Css – How to automatically stack three parts of content on small screen?

What I want to achieve is this:

Wide screen: (left width:200px) (middle min-width:800px) (right width:200px) but if (middle 800px) doesn’t fit the screen, i.e. screen width is less than 1000px, then stack them as on a small screen.

Small screen: all stacked up vertically, i.e. (middle width:100%) (left width:100%) (right width:100%). Notice that (middle) is on top of the stack.

Can we do this with pure CSS (grid and @media perhaps?) or do we need Javascript?

I tried a number of grid CSS including the one on this post but no luck.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have finally figured it out using CSS only:

    .main-div {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: "Middle" "Left" "Right";
}

@media (min-width:1200px) {
  .main-div {
    grid-template-areas: "Left Middle Right";
  }
}

.left-div {
  grid-area: Left;
  width: 200px;
}

.middle-div {
  grid-area: Middle;
}

.right-div {
  grid-area: Right;
  width: 200px;
}


  2. 0

    you can simply do this with @media

    @media screen and (max-width: 769px) {}

    and inside it simply select the element and do anything you want.

    Note that if you want to edit an element styled before, you have to use the exact same selector.

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

Back To Top
Search