Hi community,
i am having a few troubles with my code.
When the display shrinks to 600, everything goes as it supposed to go except two things:
- At the top of the body, the welcome section with the h element and img element seems to get pushed down and this creates an unwanted space below the header.
- When the screen gets scrolled down, there is a scrolling bar at the bottom, when moved to the right, it goes off screen and there is just white space.
My Analysis: I think that the only the HTML document shrinks ,but for some reason the view port does not shrink down tot he same size.
I’ve been trying to fix this but run into a corner.
If you could give me some hint of why is it happening and which way should i go about to fix it.
Thank you for your help[date=2023-05-08 timezone=“Europe/Bratislava”]
Screen shot:
Code below
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" rel="stylesheet" />
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"/>
<link href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
rel="stylesheet"/>
</head>
<header id="one">
<nav id="navbar">
<a href="#My_Projects">My Projects </a>
<a href="#About_me">About me </a>
<a href="#Contact">Contact </a>
<a href="#navbar" class="menu-toggle">☰</a>
</nav>
<script>var menuToggle = document.querySelector('.menu-toggle');
var navbar = document.querySelector('#navbar');
menuToggle.addEventListener('click', function() {
navbar.classList.toggle('responsive');
});
</script>
</header>
<body id="body">
<section id="welcome-section">
<h1> Devops Engineer</h1>
<img class="dev-img " src="https://shalb.com/wp-content/uploads/2019/11/Devops1-1024x669.jpeg"/>
</section>
<h3 id="My_Projects">My Projects</h3>
<div class="two container "id="projects">
<div class="item item-1">
<h2 class="project_title title_1 ">Picasso Pianting</h2>
<a class="item-10" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-intermediate-css-by-building-a-picasso-painting/step-89"target="_blank" rel="noreferrer" >
<img class="item-10" src="https://iartprints.com/art-imgs/pablo_picasso/mediterranean_landscape-41085.jpg" alt="colourfull houses painted by Pablo Picasso.">
</a>
</div>
<div class="item item-2">
<h2 class="project_title title_2 ">Cat Photo App</h2
<a class="item-11" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-69" target="_blank" rel="noreferrer">
<img class="item-11" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
</a>
</div>
<div class="item item-3">
<a class="item-12" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-forms-by-building-a-registration-form/step-63" target="_blank" rel="noreferrer">
<img class="item-12" src="https://img.freepik.com/premium-vector/registration-form-template-with-flat-design_23-2147976843.jpg" alt="a registration formular for a profile"></a><h2 class="project_title">Registration Form</h2> </div>
<div class="item item-4"><a class="item-13" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-67" target="_blank" rel="noreferrer">
<img class="item-13"src="https://media-cldnry.s-nbcnews.com/image/upload/t_fit-760w,f_auto,q_auto:best/rockcms/2022-12/how-to-read-nutrition-label-inline-zz-221213-01-3212fe.jpg" alt="a nutritional label for food serving"></a> <h2 class="project_title ">Nutrition Label</h2>
</div>
</div>
<section id="About_me">
<h1>About me</h1>
<p>DevOps methodology is a collaborative approach to software development and deployment that aligns the development and operations teams to improve productivity, efficiency, and quality.
Implementing DevOps in my previous company, we were able to streamline our software development process, reduce errors, and increase the speed of deployment.
We utilized continuous integration and continuous deployment techniques and automated testing to make the process more efficient.
The DevOps approach also ensured better coordination and communication between teams, enabling us to deliver products that aligned with customer needs and expectations.</p>
</section>
<section id="Contact"><h1>Contact</h1>
<p>If you could use my services, you can email me at<a href="mailto:qtbzet@gmail.com" target="_blank"> qtbzet@gmail.com.</a></p>
<p> Or you can reach me at the following social media platforms:</p>
<div class="social-icons">
<a id="profile-link" href="https://www.linkedin.com/feed/?trk=onboarding-landing" target="_blank" rel="noreferrer">
<i class="fab fa-linkedin-in icon1"></i></a>
<a href="https://instagram.com/freecodecamp">
<i class="fab fa-instagram icon2"></i>
</a>
<a href="https://www.youtube.com/freecodecamp">
<i class="fab fa-youtube icon3"></i>
</a>
</div>
</section>
</div>
</body>
<footer>
<p><a href="https://www.spiceworks.com/tech/devops/articles/what-is-devops/" target="_blank">DEVOPS</a> Engineering methodology </p>
</footer>
</html>
CSS Style
*::before, ::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
font-size: 70%;
}
#one{
height: 7.5vh;
width: 100%;
background-color: #6B092F;
border: 2px solid black;
}
#navbar {
background-color: #333;
overflow: hidden;
}
#navbar > a{
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
} #navbar a:hover {
background-color: #ddd;
color: black;
}
.menu-toggle {
float: right;
display: none;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
}
.dev-img{
width: 61vw;
object-fit: cover;
}
#one{
border: 2px solid pink;
}
#welcome-section{
width: 100vh;
height: calc(100vh - 100px);
}
.item-1, .item-2{
display: flex;
flex-direction: column;
border:2px solid #f2f2f2;
justify-content: flex-end;
align-items: center;
margin-top: 2vh;
}
.item {
margin-left: 10em;
margin-top: 3em;
}
.container {
display: grid;
grid-template-columns: repeat(2, minmax(250px, 1fr));
grid-template-rows: repeat(2, minmax(250px, 1fr));
width:100%;
height: auto;
}
.item-1, .item-3{
margin-top: 5em;
justify-self: center;
}
.item-2, .item-4{
margin-top: 5em;
justify-self: start;
align-self: ;
}
.item-1, .item-3, .item-4{
border-left: 2px solid gray;
border-right: 2px solid gray;
border-bottom: 2px solid grey;
padding-bottom: 2em;
height: fit-content;
width: 22.5rem;
border-radius: 8px;
}
.item-2{
border-left: 2px solid gray;
border-right: 2px solid gray;
border-bottom: 2px solid grey;
width: 18.5rem;
height: fit-content;
border-radius: 8px;
padding-bottom: 2em;
}
img {
max-width: 100%;
max-height: 100%;
border-radius: 8px;
}
.container:nth-child(even) {
background-color: lightsalmon ;
}
.project_title {
display: flex;
flex-direction: column;
align-items: ;
justify-self: baseline;
position: absolute;
}
.one{
display: grid;
border: 2px solid blue;
align-items: baseline;
grid-area: ;
}
#About_me{
border: 2px solid aqua;
height:20vw;
}
#Contact{
border: 2px solid purple;
height: 10vw;
}
footer{
border: 2px solid black;
height: 5vw;
width: 100%;
}
.social-icons{
display: grid;
font-size: 3rem;
grid-template-columns: repeat(auto-fit, minmax(60px, 40px));
align-content: ;
padding-left: 20dvw;
}
.icon3{
color: #FF0000;
}
.fa-instagram{
background-color: #405DE6;
background-image: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
}
.fa-linkedin-in{
background-image: linear-gradient(135deg, #0077B5, #0D66C2);
color: #ffff;
}
.fab{
border-radius: 5px;
}
#About_me > p{
line-height:2lvh;
font-size: medium;
}
footer{
display:flex;
align-items: center;
justify-content: center;
font-size: medium;
}
@media only screen and (max-width: 600px) {
body{
margin: 0;
padding: 0;
border: 2px solid hsl(9, 100%, 64%);
}
#navbar a:not(:last-child) {
display: none;
}
.menu-toggle {
display: block;
}
.menu-toggle:hover {
background-color: #ddd;
color: black;
}
#navbar.responsive {
overflow: auto;
max-height: 50vh;
}
#navbar.responsive a {
float: none;
display: block;
text-align: center;
overflow: auto;
}
#welcome-section{
margin-top: 13.5vh;
height: 35vh;
}
.container{
display: flex;
flex-direction: column;
height:;
}
#About_me {
margin-top: 5vw;
}
#Contact{
margin-top: 30vw;
}
footer{
margin-top: 25vw;
}
}
@media only screen and (max-width: 768px) {
/* CSS styles go here */
}
@media only screen and (max-width: 1024px) {
.menu-toggle{
display:none;
}
}
S