my problem in mobile view 320px wide, looks okay, when start manually scaling up, nav won't stay in center. stays on left side of screen, when right side gets bigger. title (h1) scales normally. navigation "buttons" should remain same width till break 768px wide.
body { background-color: #fafafa; font-family: helvetica; margin: 0; padding: 0; } .title { text-align: center; font-size: 1.5em; margin-top: 30px; margin-bottom: 30px; color: #626262; } /*** navigation ***/ .main-nav li { list-style: none; } .main-nav { text-decoration: none; background-color: white; font-weight: 600; color: #626262; padding-top: 15px; padding-bottom: 15px; font-size: .75em; display: flex; display: inline-block; width: 280px; margin-top: 5px; text-align: center; margin-left: -20px; } .profile-icon { height: 125px; width: 200px; } /****** portfolio ********/ .main-content { background-color: #ffffff; }<header class="main-header"> <div class="container"> <h1 class="title">title1</h1> <ul class="main-nav"> <li><a href="#">home</a> </li> <li><a href="#">portfolio</a> </li> <li><a href="#">contact</a> </li> </ul> <img src="images/responsive-layout-profile.png" class="profile-icon"> <p>text field</p> </div> </header> <div class="main-content"> <h2 class="title-two">portfolio</h2> </div>
see here : jsfiddle
you using both display:flex , display:inline-block on li a . use 1 display .
i suggest don't use fixed width on buttons, instead use float:left percentage
also want buttons remain same width till 768px, set width of width: 280px * 3 = 840px. ofcourse 3 buttons don't fit on 768px device width.
added media q below 768px
check snippet
body { background-color: #fafafa; font-family: helvetica; margin: 0; padding: 0; } ul.main-nav { padding:0; } .title { text-align: center; font-size: 1.5em; margin-top: 30px; margin-bottom: 30px; color: #626262; } /*** navigation ***/ .main-nav li { list-style: none; float:left; width: 32.66%; margin-right:1%; } ul li:last-child { margin-right:0;} .main-nav { text-decoration: none; background-color: white; font-weight: 600; color: #626262; padding-top: 15px; padding-bottom: 15px; font-size: .75em; display:block; margin-top: 5px; text-align: center; } .profile-icon { height: 125px; width: 200px; } /****** portfolio ********/ .main-content { background-color: #ffffff; } @media screen , (max-width: 768px) { .main-nav li { width:100%} } }<header class="main-header"> <div class="container"> <h1 class="title">title1</h1> <ul class="main-nav"> <li><a href="#">home</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">contact</a></li> </ul> <img src="images/responsive-layout-profile.png" class="profile-icon"> <p>text field</p> </div> </header> <div class="main-content"> <h2 class="title-two">portfolio</h2> </div>
Comments
Post a Comment