Here is what the aim is: https://content.codecademy.com/courses/freelance-1/capstone-1/specs/fotomatic_spec_landing_v2.png?_gl=139q1ju_gaMTE0MDg3NDQxNC4xNjc4Mzk5Nzg0_ga_3LRZM6TM9L*MTY4NTU3NDYyMy4xOS4xLjE2ODU1NzYyNzYuNDYuMC4w
I am sorry I do not know how to link my code, please tell me how to do that.
I cannot figure out two things, by default the ‘join us button’ is hidden in the middle size, I do not know how to make it reappear, I have tried changing the display to inline-block and block but it didn’t work.
And the bottom of the middle image the ‘photography society’ image has to be on the right, I cannot figure out how to do that.
Hi, there!
You can share your code with us through preformatted text, sharing your Codecademy workspace, GitHub, or any other sandbox site.
1 Like
Thank you, here is my code.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Damion" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700" rel="stylesheet">
<link rel="stylesheet" href="./resources/css/reset.css">
<link rel="stylesheet" href="./resources/css/style.css">
<meta charset="UTF-8">
</head>
<body>
<!-- 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/">Follow us <img class="icon" src="./resources/images/instagram.png"></a></li>
</ul>
</nav>
<nav class="mobile">
<ul>
<li><a href="#" class="not-button"><img src="./resources/images/ic-logo.svg"></a></li>
<li><a href="#" class="not-button"><img src="./resources/images/ic-product-detail.svg"></a></li>
<li><a href="#" class="not-button"><img src="./resources/images/ic-about-us.svg"></a></li>
<li><a href="#" class="button join-us">Join us</a></li>
</ul>
</nav>
</div>
</header>
<!-- Main Content -->
<div class="main-content">
<!-- Sign Up Section -->
<div id="sign-up-section" class="banner">
<div id="sign-up-cta">
<div class="content center">
<div class="header">
<h2 class="cursive">Instant</h2>
<h1 class="striking">FORMAT CAMERA</h1>
</div>
<div class="email">
<span>
Email us to request a demo and be in our waiting list for the <strong>Febuary 2017</strong> release!
</span>
<div class="button">Join the waiting list</div>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div id="features-section">
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./resources/images/feature-1.png" />
</div>
<div class="content">
<h2>Advanced, automatic, instant</h2>
<h3>Shutter speed, apperture and flash output adjust automatically</h3>
</div>
</div>
</div>
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./resources/images/feature-2.png" />
</div>
<div class="content">
<h2>Beautifully crafted inside-out</h2>
<h3>From the paint outside to the tiny screw inside, Fotomatic is crafted with love and 20-year of expertise</h3>
</div>
</div>
</div>
</div>
<!-- Filters Section -->
<div id="filters-section">
<div class="content center">
<h2>Over 20+ filters to choose from</h2>
<h3>Feed your creativity with 20 different filter designed by our eclectic in-house photographers!</h3>
</div>
<div class="images-container">
<div class="image-container">
<img src="./resources/images/filter-1.png" />
</div>
<div class="image-container">
<img src="./resources/images/filter-2.png" />
</div>
<div class="image-container">
<img src="./resources/images/filter-3.png" />
</div>
<div class="image-container extra">
<img src="./resources/images/filter-4.png" />
</div>
</div>
</div>
<!-- Quotes Section -->
<div id="quotes-section">
<div class="content center">
<span class="quote">“It’s truly something that could create a brand new photography Renaissance”</span>
<img class="quote-citation" src="./resources/images/photography-logo.png" />
</div>
</div>
<!-- Footer -->
<footer>
<div class="content">
<span class="copyright">© 2016 Fotomatic, All Rights Reserved</span>
<span class="location">Designed in NYC</span>
</div>
</footer>
</div>
</body>
</html>
/* Universal Styles */
html {
font-family: "Roboto", sans-serif;
font-size: 16px;
}
.main-content {
position: relative;
top: 5.3125rem; /* To offset for fixed header. */
}
.center {
text-align: center;
}
.button {
border-radius: 4px;
background-color: #4a4a4a;
color: white;
}
.image-container {
overflow: hidden;
}
.image-container img {
display: block;
}
@media only screen and (max-width: 760px) {
.main-content {
top: 2.5625rem;
}
}
/* Header */
header {
position: fixed;
width: 100%;
border-bottom: solid 1px #c6c1c1;
background-color: white;
z-index: 100;
}
header .content {
display: flex;
align-items: center;
padding: 1.875rem;
}
header .logo {
flex: 1;
font-family: 'Roboto Mono', Arial, Helvetica, sans-serif;
color: #4a4a4a;
margin-left: 1.875rem;
font-size: 1.5rem;
}
header nav ul {
display: flex;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
color: #4a4a4a;
}
nav li {
padding-left: 3.5rem;
}
nav a {
vertical-align: bottom;
line-height: 1.6;
font-size: 1rem;
color: #4a4a4a;
}
header .icon {
width: 1rem;
padding-left: .75rem;
margin-right: 1.875rem;
}
header .mobile {
display: none;
}
@media only screen and (max-width: 760px) {
header .mobile .button{
display: inline-block !important;
width: 100%;
}
header .mobile ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
}
}
@media only screen and (max-width: 480px) {
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;
}
}
/* Sign Up Section */
.banner {
background-image: url(../images/banner-landingpage.jpg);
background-size: cover;
height: auto;
height: auto;
}
#sign-up-section {
display: flex;
justify-content: flex-start;
align-items: flex-start;
height: 43.5rem;
}
#sign-up-cta {
padding: 0 5rem 2.5rem 5rem;
border: solid 1px #979797;
border-radius: 4px;
background-color: #9dc20b;
margin-left: 6.25rem;
margin-top: 10.625rem;
margin-bottom: 10.625rem;
}
#sign-up-cta .content {
width: 25.625rem;
margin-top: 2rem;
font-family: "Roboto", sans-serif;
font-size: 1.25rem;
line-height: 1.4;
color: white;
}
#sign-up-cta h1 {
font-size: 3.125rem;
}
#sign-up-cta h2 {
font-size: 2.25rem;
}
#sign-up-cta span strong {
font-weight: bold;
}
#sign-up-cta .cursive {
font-family: "Damion", cursive;
}
#sign-up-cta .striking {
font-family: "Rubik", sans-serif;
padding-bottom: .75rem;
}
#sign-up-cta .button {
margin-top: 1.625rem;
padding: 1.25rem 7.25rem;
}
@media only screen and (max-width: 760px) {
#sign-up-section {
align-items: center;
justify-content: center;
height: 28rem;
}
#sign-up-cta {
position: static;
width: auto;
height: auto;
background-color: transparent;
border: none;
}
#sign-up-cta .content {
margin-top: 0;
}
#sign-up-cta .email {
display: none;
}
#sign-up-cta h1 {
font-size: 3.125rem;
}
#sign-up-cta h2 {
font-size: 2.25rem;
}
}
@media only screen and (max-width: 450px) {
#sign-up-section {
height: 20rem;
}
#sign-up-cta h1 {
font-size: 2.25rem;
}
#sign-up-cta h2 {
font-size: 2rem;
}
}
/* Features Section */
#features-section {
display: flex;
justify-content: space-between;
padding: 4rem 5%;
background-color: #f3f3f3;
padding: 2rem 1rem 2rem 1rem;
}
.feature {
flex: 1;
padding: 2rem;
margin: 0px 1.1875rem 0px ;
background-color: white;
}
.feature .image-container {
width: 110%;
height: 65%;
margin: 0 auto;
padding-bottom: 3.2rem;
display: block;
}
.feature .image-container img {
width: 90%;
height: 60%;
}
.feature h2 {
padding-bottom: .5rem;
font-size: 2.25rem;
font-weight: bold;
color: #4a4a4a;
}
.feature h3 {
font-size: 1rem;
line-height: 1.2;
font-weight: 300;
color: #4a4a4a;
}
@media only screen and (max-width: 890px) {
.feature h2 {
font-size: 1.125rem;
line-height: 1.3;
font-weight: normal;
}
.feature h3 {
font-size: .875rem;
line-height: 1.4;
}
}
@media only screen and (max-width: 760px) {
.feature h2 {
font-weight: 900;
}
}
/* Filters Section */
#filters-section {
padding: 4rem 0;
background-color: #4a4a4a;
}
#filters-section .content {
padding: 0 .625rem;
margin-bottom: 5rem;
}
#filters-section .content h2 {
font-size: 2.25rem;
font-weight: bold;
color: white;
}
#filters-section .content h3 {
font-size: 1rem;
line-height: 1.4;
font-weight: 300;
color: white;
}
#filters-section .images-container {
max-width: 100%;
padding: 0 1%;
display: flex;
}
#filters-section .images-container img {
max-width: 100%;
}
@media only screen and (max-width: 760px) {
#filters-section {
padding: 1.5rem 0 0 0;
}
#filters-section .content {
margin-bottom: 1rem;
}
#filters-section .content h2 {
padding-bottom: .625rem;
font-size: 1.125rem;
line-height: 1.3;
font-weight: normal;
}
#filters-section .content h3 {
font-size: .875rem;
line-height: 1.4;
}
#filters-section .images-container {
padding: 0;
}
}
/* Quotes Section */
#quotes-section {
background-color: #f3f3f3;
}
#quotes-section .content {
padding: 5rem 0;
}
#quotes-section .quote {
padding-right: 1.875rem;
font-family: "Palatino", serif;
font-size: 1.875rem;
line-height: 1.1;
font-style: italic;
color: #4a4a4a;
}
#quotes-section .quote-citation {
height: 1.875rem;
margin-left: 1.875rem;
}
@media only screen and (max-width: 760px) {
#quotes-section content {
padding: 1.875rem 0.625rem;
}
#quotes-section .quote {
font-size: 1.5rem;
line-height: 1.4;
text-align: start;
overflow: auto;
width: 70%;
float: left;
margin-left: 2rem;
padding: 0%;
}
#quotes-section {
display: flex;
}
#quotes-section .quote-citation {
padding-top: 1rem;
float: right;
padding-right: 1rem;
}
#quotes-section .content {
padding: 2rem 0;
}
}
/* Footer */
footer {
background-color: #9b9b9b;
padding: 1.5rem 2rem;
}
footer .content {
color: white;
display: flex;
font-size: .75rem;
}
footer .copyright {
flex-grow: 1;
}
@media only screen and (min-width: 760px) {
footer .content {
font-size: .625rem;
}
}
Are you referring to this button?
If so, by looking at the HTML and CSS, 760px is when the tablet view is rendered. On the desktop nav, there is no ‘join us’ button because of the button on the hero. You could create a nav for tablet view, but considering there is one slight difference between the two navs, perhaps there’s a more straightforward solution you could implement.
For this one, consider how a list (such as the navigation bar) has each listed item next to each other.
I figured out how to put the image on the right, now the small size ‘photography society’ image must be on the bottom, I am still figuring that one out.
Yes I am referring to that button, I understand that it is on display: none but I cannot undo that, do you know what I have to do to make it visible? (its class is: header .mobile .button) Yes I have used !important
I have made a few changes to the code such as making sure the nav bar fits properly (Still haven’t fixed the join us button) I will re-send my code so you can see the updates just in case that changes anything.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Damion" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700" rel="stylesheet">
<link rel="stylesheet" href="./resources/css/reset.css">
<link rel="stylesheet" href="./resources/css/style.css">
<meta charset="UTF-8">
</head>
<body>
<!-- Header -->
<header>
<div class="content">
<a href="index.html" class="desktop logo">Fotomatic</a>
<nav class="desktop">
<ul>
<li><a href="#" class="desktopnav">Product detail</a></li>
<li><a href="#" class="desktopnav">About us</a></li>
<li><a href="https://www.instagram.com/" class="desktopnav">Follow us <img class="icon" src="./resources/images/instagram.png"></a></li>
</ul>
</nav>
<nav class="mobile">
<ul>
<li><a href="#" class="not-button"><img src="./resources/images/ic-logo.svg"></a></li>
<li><a href="#" class="not-button"><img src="./resources/images/ic-product-detail.svg"></a></li>
<li><a href="#" class="not-button"><img src="./resources/images/ic-about-us.svg"></a></li>
<li><a href="#" class="button join-us">Join us</a></li>
</ul>
</nav>
</div>
</header>
<!-- Main Content -->
<div class="main-content">
<!-- Sign Up Section -->
<div class="banner-container">
<div id="sign-up-section" class="banner">
<div id="sign-up-cta">
<div class="content center">
<div class="header">
<h2 class="cursive">Instant</h2>
<h1 class="striking">FORMAT CAMERA</h1>
</div>
<div class="email">
<span>
Email us to request a demo and be in our waiting list for the <strong>Febuary 2017</strong> release!
</span>
<div class="button">Join the waiting list</div>
</div>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div id="features-section">
<div class="feature topfeature">
<div class="center ">
<div class="image-container">
<img src="./resources/images/feature-1.png" />
</div>
<div class="content">
<h2>Advanced, automatic, instant</h2>
<h3>Shutter speed, apperture and flash output adjust automatically</h3>
</div>
</div>
</div>
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./resources/images/feature-2.png" />
</div>
<div class="content">
<h2>Beautifully crafted inside-out</h2>
<h3>From the paint outside to the tiny screw inside, Fotomatic is crafted with love and 20-year of expertise</h3>
</div>
</div>
</div>
</div>
<!-- Filters Section -->
<div id="filters-section">
<div class="content center">
<h2>Over 20+ filters to choose from</h2>
<h3>Feed your creativity with 20 different filter designed by our eclectic in-house photographers!</h3>
</div>
<div class="images-container">
<div class="image-container">
<img src="./resources/images/filter-1.png" />
</div>
<div class="image-container">
<img src="./resources/images/filter-2.png" />
</div>
<div class="image-container">
<img src="./resources/images/filter-3.png" />
</div>
<div class="image-container extra">
<img src="./resources/images/filter-4.png" />
</div>
</div>
</div>
<!-- Quotes Section -->
<div id="quotes-section">
<div class="content center">
<span class="quote">“It’s truly something that could create a brand new photography Renaissance”</span>
<div class="quote-citation-container">
<img class="quote-citation" src="./resources/images/photography-logo.png" />
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="content">
<span class="copyright">© 2016 Fotomatic, All Rights Reserved</span>
<span class="location">Designed in NYC</span>
</div>
</footer>
</div>
</body>
</html>
/* Universal Styles */
html {
font-family: "Roboto", sans-serif;
font-size: 16px;
}
.main-content {
position: relative;
top: 5.3125rem; /* To offset for fixed header. */
}
.center {
text-align: center;
}
.button {
border-radius: 4px;
background-color: #4a4a4a;
color: white;
}
.image-container {
overflow: hidden;
}
.image-container img {
display: block;
}
@media only screen and (max-width: 760px) {
.main-content {
top: 2.5625rem;
}
}
/* Header */
header {
position: fixed;
width: 100%;
border-bottom: solid 1px #c6c1c1;
background-color: white;
z-index: 100;
}
header .content {
display: flex;
align-items: center;
padding: 1.875rem;
}
header .logo {
flex: 1;
font-family: 'Roboto Mono', Arial, Helvetica, sans-serif;
color: #4a4a4a;
margin-left: 1.875rem;
font-size: 1.5rem;
}
header nav ul {
display: flex;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
color: #4a4a4a;
}
nav li {
padding-left: 3.5rem;
}
nav a {
vertical-align: bottom;
line-height: 1.6;
font-size: 1rem;
color: #4a4a4a;
}
header .icon {
width: 1rem;
padding-left: .75rem;
margin-right: 1.875rem;
}
header .mobile {
display: none;
}
header .mobile .button {
background-color: #9dc20b;
padding: 0.5rem;
padding-right: 0.5rem;
width: 56px !important;
}
header .desktop {
overflow: hidden;
}
@media only screen and (max-width: 760px){
header .mobile .button {
display: inline-block !important;
}
}
@media only screen and (max-width: 696px) {
header .desktop {
font-size: 1.3rem;
}
header .desktop ul .desktopnav{
font-size: 0.9rem;
}
}
@media only screen and (max-width: 760px) {
header .mobile .button{
display: inline-block !important;
width: 100%;
}
header .mobile ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
}
}
@media only screen and (max-width: 480px) {
}
@media only screen and (max-width: 655px) {
header .desktop {
display: none;
}
header .mobile{
display: block;
width: 100%;
}
header .content {
padding: .5rem 0;
display: flexbox;
}
header .mobile ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
}
header .mobile li {
padding: 0;
}
}
/* Sign Up Section */
.banner {
background-image: url(../images/banner-landingpage.jpg);
background-size: cover;
height: auto;
height: auto;
}
#sign-up-section {
display: flex;
justify-content: flex-start;
align-items: flex-start;
height: 43.5rem;
}
#sign-up-cta {
padding: 0 5rem 2.5rem 5rem;
border: solid 1px #979797;
border-radius: 4px;
background-color: #9dc20b;
margin-left: 6.25rem;
margin-top: 10.625rem;
margin-bottom: 10.625rem;
}
#sign-up-cta .content {
width: 25.625rem;
margin-top: 2rem;
font-family: "Roboto", sans-serif;
font-size: 1.25rem;
line-height: 1.4;
color: white;
}
#sign-up-cta h1 {
font-size: 3.125rem;
}
#sign-up-cta h2 {
font-size: 2.25rem;
}
#sign-up-cta span strong {
font-weight: bold;
}
#sign-up-cta .cursive {
font-family: "Damion", cursive;
}
#sign-up-cta .striking {
font-family: "Rubik", sans-serif;
padding-bottom: .75rem;
}
#sign-up-cta .button {
margin-top: 1.625rem;
padding: 1.25rem 7.25rem;
}
@media only screen and (max-width: 760px) {
#sign-up-section {
align-items: center;
justify-content: center;
height: 28rem;
}
#sign-up-cta {
position: static;
width: auto;
height: auto;
background-color: transparent;
border: none;
}
#sign-up-cta .content {
margin-top: 0;
}
#sign-up-cta .email {
display: none;
}
#sign-up-cta h1 {
font-size: 3.125rem;
}
#sign-up-cta h2 {
font-size: 2.25rem;
}
}
@media only screen and (max-width: 450px) {
#sign-up-section {
height: 20rem;
}
#sign-up-cta h1 {
font-size: 2.25rem;
}
#sign-up-cta h2 {
font-size: 2rem;
}
}
/* Features Section */
#features-section {
display: flex;
justify-content: space-between;
padding: 4rem 5%;
background-color: #f3f3f3;
padding: 2rem 1rem 2rem 1rem;
}
.feature {
flex: 1;
padding: 2rem;
margin: 0px 1.1875rem 0px;
background-color: white;
}
.feature .image-container {
width: 110%;
height: 65%;
margin: 0 auto;
padding-bottom: 3.2rem;
display: block;
}
.feature .image-container img {
width: 90%;
height: 60%;
}
.feature h2 {
padding-bottom: .5rem;
font-size: 2.25rem;
font-weight: bold;
color: #4a4a4a;
}
.feature h3 {
font-size: 1rem;
line-height: 1.2;
font-weight: 300;
color: #4a4a4a;
}
@media only screen and (max-width: 480px) {
#features-section {
flex-flow: column;
padding: 0%;
}
.feature {
margin: 0%;
}
#features-section .topfeature {
background-color: rgba(159, 109, 109, 0.221);
background-clip: border-box;
}
}
@media only screen and (max-width: 890px) {
.feature h2 {
font-size: 1.125rem;
line-height: 1.3;
font-weight: normal;
}
.feature h3 {
font-size: .875rem;
line-height: 1.4;
}
}
@media only screen and (max-width: 760px) {
.feature h2 {
font-weight: 900;
}
}
/* Filters Section */
#filters-section {
padding: 4rem 0;
background-color: #4a4a4a;
}
#filters-section .content {
padding: 0 .625rem;
margin-bottom: 5rem;
}
#filters-section .content h2 {
font-size: 2.25rem;
font-weight: bold;
color: white;
}
#filters-section .content h3 {
font-size: 1rem;
line-height: 1.4;
font-weight: 300;
color: white;
}
#filters-section .images-container {
max-width: 100%;
padding: 0 1%;
display: flex;
}
#filters-section .images-container img {
max-width: 100%;
}
@media only screen and (max-width: 480px) {
#filters-section .extra{
display: none;
}
}
@media only screen and (max-width: 760px) {
#filters-section {
padding: 1.5rem 0 0 0;
}
#filters-section .content {
margin-bottom: 1rem;
}
#filters-section .content h2 {
padding-bottom: .625rem;
font-size: 1.125rem;
line-height: 1.3;
font-weight: normal;
}
#filters-section .content h3 {
font-size: .875rem;
line-height: 1.4;
}
#filters-section .images-container {
padding: 0;
}
}
/* Quotes Section */
@media only screen and (min-width: 760px){
#quotes-section {
height: 15rem;
}
#quotes-section .quote-citation {
margin-top: 1rem;
}
}
@media only screen and (max-width: 480px) {
#quotes-section .quote-citation {
float: none !important;
display: block;
margin: auto;
}
#quotes-section .quote {
float: none !important;
text-align: center;
}
#quotes-section {
flex-flow: column;
display: flexbox;
height: 13rem;
}
#quotes-section .quote-citation-container {
text-align: center;
}
}
#quotes-section {
background-color: #f3f3f3;
}
#quotes-section .content {
padding: 5rem 0;
}
#quotes-section .quote {
padding-right: 1.875rem;
font-family: "Palatino", serif;
font-size: 1.875rem;
line-height: 1.1;
font-style: italic;
color: #4a4a4a;
}
#quotes-section .quote-citation {
height: 1.875rem;
margin-left: 1.875rem;
}
@media only screen and (max-width: 760px) {
#quotes-section content {
padding: 1.875rem 0.625rem;
}
#quotes-section .quote {
font-size: 1.5rem;
line-height: 1.4;
text-align: start;
overflow: auto;
width: 70%;
float: left;
margin-left: 2rem;
padding: 0%;
}
#quotes-section {
display: flex;
}
#quotes-section .quote-citation {
padding-top: 1rem;
position: absolute;
right: 0.1rem;
padding-right: 1rem;
}
#quotes-section .content {
padding: 2rem 0;
}
}
/* Footer */
footer {
background-color: #9b9b9b;
padding: 1.5rem 2rem;
}
footer .content {
color: white;
display: flex;
font-size: .75rem;
}
footer .copyright {
flex-grow: 1;
}
@media only screen and (min-width: 760px) {
footer .content {
font-size: .625rem;
}
}
sorry, I forgot I have two other problems.
One of which is I think the nav bars fault - the page can be scrolled to the right, no image or container is doing that so I believe it is the navbar
The other problem is the banner image, I would like to see the right side of the image rather than the left as it shows on the mock, I have to idea how to do that.
Any help would be greatly appreciated
thank you
Well, the join us button is part of the mobile nav-bar. It would not be visible after making it “visible” because the nav-bar itself is not visible. You would need to implement one of the two ideas I mentioned above.
A good way to de-bug this is to place a dotted border on all of the elements, which can be done with so:
* {
border: dotted 1px red;
}
And then inspect any elements that are causing the overflow.
Take a look at the background-position property and see if that will help you out: Codecademy Docs on background-position
Thank you, I think I have finished the task thanks to your help.
1 Like
