https://www.codecademy.com/courses/make-a-website/projects/building-a-personal-portfolio
Hi, in this new project I have a problem with the responsiveness of the background image of the jumbotron.
The code was already given by codecademy. I tried it on the local host, on safari, google chrome, firefox also. When I resize the window, you can see the entirety of the image when you have a small screen. Then when you widen the screen you start to loose the bottom part of the image.
Here is the CSS code where I even added codes for all browsers:
body {
font-family: Roboto, sans-serif;
background-image: url(‘https://s3.amazonaws.com/codecademy-content/courses/learn-css-selectors-visual-rules/hypnotize_bg.png’);
}
header {
padding: 20px 0;
}
header .row,
footer .row {
display: flex;
align-items: center;
}
h1 {
font-weight: 700;
margin: 0;
}
nav {
display: flex;
justify-content: flex-end;
}
a {
padding: 0 20px;
margin: 0;
}
.jumbotron {
display: flex;
align-items: center;
background-image: url(‘images/mountain_jumbotron.jpg’);
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
color: #ffffff;
height: 400px;
}
.jumbotron h2 {
font-size: 60px;
font-weight: 700;
margin: 0;
color: #fff;
}
.jumbotron h3 {
margin: 0 0 20px;
color: #fff;
}
section .row img {
margin: 0 0 30px;
width: 100%;
}
.col-md-6 {
margin: 0 0 30px;
}
.btn.btn-primary {
border-radius: 2px;
border: 0px;
color: #fbd1d5;
background-color: #ffffff;
}
.btn.btn-primary:hover {
color: #ffffff;
background-color: #fbd1d5;
}
.btn-secondary {
background-color: #2a70e0;
color: #ffffff;
margin: 0 0 30px;
}
.portrait {
width: 350px;
height: 300px;
}
figure img {
width: 100%;
height: auto;
}
figure {
margin-bottom: 30px;
}
footer {
font-size: 12px;
padding: 20px 0;
}
footer .col-sm-8 {
display: flex;
justify-content: flex-end;
}
footer ul {
list-style: none;
}
here is the index.html:
<!DOCTYPE html>
My Personal Portfolio
<section class="jumbotron">
<div class="container">
<div class="row">
<h2> Programmer</h2>
</div>
<div class="row">
<h3>CSS, HTML, Javascript, JQuery</h3>
</div>
</div>
</section>
<footer class="container">
<div class="row">
<p class="col-sm-4">© 2019 Elisabeth Tasia</p>
<div class="col-sm-2">
<a href="https://www.linkedin.com/" target="_blank">LinkedIn</a>
</div>
<div class="col-sm-2">
<a href="https://medium.com/" target="_blank">Medium</a>
</div>
<div class="col-sm-2">
<a href="https://github.com/" target="_blank">Github</a>
</div>
<div class="col-sm-2">
<a href="https://tunein.com/podcasts/" target="_blank">Podcast</a>
</div>
</div>
</footer>
I don’t understand why with background-image: cover, the image whole image doesn’t appear when I exceed a certain browser window width.
Thanks for the help