CODEWITHSUNDEEP
htmlcss
Paiz
Paiz

Reputation: 23

Can't display the styling for my mobile responsive

Having problem with styling my mobile responsive with @media. I can display my container and the navigation on the site but not on my @media.

//========================================================
/* HEADER CONTAINER */
//========================================================

.container
  background-color: #FFF
  display: flex
  flex-direction: row-reverse

.container:after
  content: ""
  display: block
  clear: both
  visibility: none

//========================================================
/* SITE NAVIGATION */
//========================================================

.nav
  //background: pink
  float: right
  display: inline-block

.nav ul li
  float: left
  padding: 10px
  list-style-type: none

.nav ul li a
  text-decoration: none
  color: #333

.nav ul li a:hover
  color: gold
  cursor: pointer

//========================================================
/* RESPONSIVE MENU ICONS */
//========================================================

  .menu-icons
    width: 50px
    height: 50px
    background-color: pink
    margin-left: auto
    margin-right: 10px
    cursor: pointer
    align-items: center
    display: block
    position: relative

    span,
    span:before,
    span:after
      content: ""
      display: block
      width: 100%
      height: 2px
      position: relative
      background: #333

    span:before
      top: 15px

    span:after
      bottom: 17px

//========================================================
/* MOBILE NAVIGATIONS */
//========================================================

@media (max-width: 760px)
  .nav
    display: none
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="css/app.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
    <meta charset="utf-8">
    <title>My portfolio</title>
  </head>
  <body>
    <div class="container">
      <div class="menu-icons">
  <span><div class="bar1">
          <div class="bar2">
            <div class="bar3"></span>
              <div class="nav">
                <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About</a></li>
                  <li><a href="#">Contact</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

right now my problem, i can't display anything when i hit the max-width 760px. Also, if i were to indent my "RESPONSIVE NEW ICONS" to be on the same level with my .nav, the actual site for pc will not display, and the responsive is displaying not sure why.

Upvotes: 0

Views: 162

Answers (1)

umar farooq
umar farooq

Reputation: 26

use media query like this

 @media only screen and (max-width: 760px) {

use css like this

 .container {
          background-color: #FFF;
          display: flex;
          flex-direction: row-reverse; 
    }

use semicolons and { } in css for defining class style

Upvotes: 1

Related Questions