Sidebar doesn't move to the left side of "main" and CSS Grid isn't working as expected on "landscape tablet"

user_16590740 0
Viewed 91

I'm experiencing a problem that's been driving me crazy for hours. The main page I'm building is using CSS grid layout and everything is normal until "portrait tablet", but now that I want to adjust the sidebar and grid layout in "landscape tablet" everything gets messed up and the sidebar won't show itself. Even the grid is messed up and isn't following the dimensions I give its column.

The whole project (It's just the main page) with it's codes are in my GitHub page and the website itself is here.

I would really really really appreciate it if someone helps me solve this issue that's driving me insane.

Thanks in advance!

css-grid css html
1 Answers

Hi,

You add styles for 768px => portrait and forget 768px => landscape

So it take 320px => landscape styles

Problem specified in body grid-template-areas

It takes this style

grid-template-areas:
  "header"
  "main";

So sidebar doesn't show up

Just Add In the bottom part in main style for last edit

/* Bottom Banner for Tablet Landscape Screens */
@media only screen and (min-width: 768px) and (orientation: landscape) {
  body {
    grid-template-areas:
      "header header"
      "sidebar main";
  }
}

I Send to you the edit in Pull Request on github see it

Admin1
Related