How to delete grid when usind media query

HTML-CSS
1

Normal Screen: I have put the navbar into the first container with 15% width and the main-content into the second container (85% width). Did that by creating grid-template-columns. The first container is using a border-right-style.

media-query: the navbar should move to the top. it works, but i cant get rid of the border. it just stays where it was placed on normal screen mode. how do i get rid of the two column grid classification without changing the normal screen mode.

Link to my code: https://codepen.io/Mr-Thrash/pen/rNpyNEB

2

The border is on the .container1 class. You are changing the position of the child #navbar element and not the container.

Edit: a few more things

  • You misspelled absolute.

  • The max-width media query code should be placed after the styles that are overwritten in the media query.

  • You are not changing the grid inside the media query. It is still a two-column layout.

  • font-type is not a valid property, the font is set using font-family

3

Thx for checking my code.
-“You are not changing the grid inside the media query. It is still a two-column layout.” how do i change it for only the media query ?

4

Add the .grid-container selector inside the media query code and change grid-template-columns to use one column.

You have to move the media query to the bottom of the CSS (or at least below all CSS it is modifying) that is how media queries work. They use the cascade (the C in CSS).

5

Works great :+1: (+ i learned something)

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.