I am trying to adjust the tablet mode version of this site so that the header changes according to the design spec. The problem is I cannot get the green ‘Join Us’ Button to appear, it shows in the mobile sizes but not on tablet size.
From my understanding, I want to keep some list items from the .desktop class and hide one. Then display the button list item from the .mobile class and hide the rest.
CSS:
/* Header */
header {
position: fixed;
width: 100%;
max-height: 85px;
border-bottom: solid 1px #c6c1c1;
background-color: white;
z-index: 1;
top:0;
}
header .content {
display: flex;
align-items: center;
padding: 1.875rem;
}
header .logo {
flex: 1;
}
header nav ul {
display: flex;
align-items: center;
}
nav li {
padding-left: 3.5rem;
float: right;
display: block;
padding-bottom: 20px;
}
nav a {
vertical-align: middle;
line-height: 1.6;
font-size: 1rem;
color: #4a4a4a;
text-decoration: none;
}
header .icon {
width: 1rem;
padding-left: .75rem;
}
header .mobile {
display: none;
}
@media only screen and (min-width: 640px) and (max-width: 760px) {
header .mobile .button {
padding: .1875rem .5rem;
background-color: #9dc20b;
line-height: 1.6;
color: white;
float: right;
display: block;
flex: 1;
z-index: 2;
}
header .insta {
display: none;
}
header .content {
padding: .5rem 0;
}
nav li {
display: relative;
}
header .logo {
flex: 0;
}
}
@media only screen and (max-width: 640px) {
header .desktop {
display: none;
}
header .mobile {
display: block;
width: 100%;
}
header .content {
padding: .5rem 0;
}
header .mobile ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
}
header .mobile li {
padding: 0;
}
header .mobile .button {
padding: .1875rem .5rem;
background-color: #9dc20b;
line-height: 1.6;
color: white;
}
}
a.desktop.logo {
font-family: “Roboto”;
text-decoration: none;
color: #4a4a4a;
font-size: 1.5rem;
padding-bottom: 20px;
[quote=“willplattt, post:1, topic:656970, full:true”]
I am trying to adjust the tablet mode version of this site so that the header changes according to the design spec. The problem is I cannot get the green ‘Join Us’ Button to appear, it shows in the mobile sizes but not on tablet size.
From my understanding, I want to keep some list items from the .desktop class and hide one. Then display the button list item from the .mobile class and hide the rest.
CSS:
/* Header */
header {
position: fixed;
width: 100%;
max-height: 85px;
border-bottom: solid 1px #c6c1c1;
background-color: white;
z-index: 1;
top:0;
}
header .content {
display: flex;
align-items: center;
padding: 1.875rem;
}
header .logo {
flex: 1;
}
header nav ul {
display: flex;
align-items: center;
}
nav li {
padding-left: 3.5rem;
float: right;
display: block;
padding-bottom: 20px;
}
nav a {
vertical-align: middle;
line-height: 1.6;
font-size: 1rem;
color: #4a4a4a;
text-decoration: none;
}
header .icon {
width: 1rem;
padding-left: .75rem;
}
header .mobile {
display: none;
}
@media only screen and (min-width: 640px) and (max-width: 760px) {
header .mobile .button {
padding: .1875rem .5rem;
background-color: #9dc20b;
line-height: 1.6;
color: white;
float: right;
display: block;
flex: 1;
z-index: 2;
}
header .insta {
display: none;
}
header .content {
padding: .5rem 0;
}
nav li {
display: relative;
}
header .logo {
flex: 0;
}
}
@media only screen and (max-width: 640px) {
header .desktop {
display: none;
}
header .mobile {
display: block;
width: 100%;
}
header .content {
padding: .5rem 0;
}
header .mobile ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
}
header .mobile li {
padding: 0;
}
header .mobile .button {
padding: .1875rem .5rem;
background-color: #9dc20b;
line-height: 1.6;
color: white;
}
}
a.desktop.logo {
font-family: “Roboto”;
text-decoration: none;
color: #4a4a4a;
font-size: 1.5rem;
padding-bottom: 20px;
<!-- Header -->
<header>
<div class="content">
<a href="index.html" class="desktop logo">Fotomatic</a>
<nav class="desktop">
<ul>
<li><a href="#">Product detail</a></li>
<li><a href="#">About us</a></li>
<li><a href="https://www.instagram.com/" class="insta">Follow us <img class="icon" src="./resources/images/instagram.png"></a></li>
</ul>
</nav>
<nav class="mobile">
<ul>
<li><a href="#" class="tohide"><img src="./resources/images/ic-logo.svg"></a></li>
<li><a href="#" class="tohide"><img src="./resources/images/ic-product-detail.svg"></a></li>
<li><a href="#" class="tohide"><img src="./resources/images/ic-about-us.svg"></a></li>
<li><a href="#" class="button">Join us</a></li>
</ul>
</nav>
</div>
</header>