I'm working on my activity website and I currently have problem with the image in my about section with its responsiveness. I'm trying to change my image where when I minimize the browser, the image will also adjust to smaller but I can't find way to adjust it and make it responsive. Kindly help me.
#abouts {
background: #07414C;
display: inline-block;
width: 100%;
}
.about{
padding: 100px 0px;
background-color: #033541;
}
.about .about-picture img {
width: 430px;
}
.about-text{
width: 550px;
}
.main{
width: 1130px;
max-width: 95%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.about-text h2{
color: white;
font-size: 75px;
text-transform: capitalize;
margin-bottom: 20px;
}
.about-text h5{
color: white;
letter-spacing: 2px;
font-size: 22px;
margin-bottom: 25px;
text-transform: capitalize;
}
.about-text p{
color: white;
letter-spacing: 1px;
line-height: 28px;
font-size: 18px;
margin-bottom: 45px;
}
#media screen and (max-width: 768px) {
.about .main {
align-items: center;
text-align: center;
display: flex;
flex-direction: column;
}
.about .about-picture img {
max-width: 100%;
height: auto;
}
.about .main .about-text h5 {
width: 100%;
font-size: 18px;
text-align: center;
padding-right: 1.2rem;
padding-left: 1.2rem;
}
.about .main .about-text h2 {
width: 100%;
font-size: 50px;
text-align: center;
padding-right: 1.8rem;
padding-left: 1.8rem;
}
.about .main .about-text p {
width: 100%;
font-size: 15px;
text-align: justify;
padding-right: 2.8rem;
padding-left: 2.8rem;
}
}
<!----about start---->
<div id = "abouts">
<section class="about">
<div class="main">
<div class = "about-picture">
<img src="aboutpic.jpg">
</div>
<div class="about-text">
<h2>About Me</h2>
<h5>word 1<span>, word 2, and word 3</span></h5>
<p>Name, age, place. school where im studying. things that i love. motto.</p>
</div>
</div>
</section>
</div>
The max-width should be defined in pixel, not the simple width.
And it's enough to make it fluid, no need for extra media query code.
.about .about-picture img {
width: 100%;
max-width: 430px;
}
Related
I am making a sidebar for my site and I want the side bar to fill the rest of the screen but also scroll separate to the right of the screen when it overflows with other elements inside. When I use 100% for the height the element only goes to the height of the last element inside of it.
I am trying to get it to fill the rest of the screen as I stated previously but it only goes to not all the way.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.main {
margin-left: 345px;
border: 0px solid #ffffff;
padding: 0px 0px;
flex-direction: column;
align-content: center;
text-align: center;
width: 450px;
}
.card {
display: inline-block;
width: 400px;
height: 160px;
background-color: #404040;
border: 1px solid #404040;
border-radius: 4px;
margin: 0px;
margin-top: 20px;
text-decoration: none;
}
.toptext {
display: inline-block;
width: 400px;
height: 45px;
color: #ffffff;
background-color: #ffffff;
border: 1px solid #ffffff;
border-radius: 4px;
margin: 0px;
margin-top: 5px;
text-decoration: none;
text-align: left;
}
.toptext h1 {
font-size: 20px;
margin-left: 0px;
margin-top: 1px;
color: #404040;
}
.toptext p {
font-size: 12px;
margin-left: 0px;
margin-top: -10px;
color: #404040;
}
.flexcolumn {
flex-direction: column;
}
.leftmain {
height: 100%;
width: 325px;
padding: 0px 10px;
flex-direction: column;
align-content: center;
background-color: #333333;
overflow: scroll;
}
.leftmain p {
float: left;
color: #ffffff;
text-align: left;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
line-height: 25px;
border-radius: 4px;
background-color: #333333;
width: 300px;
}
.leftmain p:hover {
background-color: #404040;
color: #ffffff;
}
.header {
overflow: hidden;
background-color: #404040;
padding: 10px 10px;
height: 36px;
text-align: center;
}
.header-right {
float: right;
padding: 0px 0px;
}
.header a {
float: left;
color: #ffffff;
text-align: center;
padding: 5px 10px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
align-content: center;
}
.header a:hover {
background-color: #333333;
color: #ffffff;
}
<div class="header">
📄 My Paper Company
<div class="header-right">
Settings
Contact
Donate
<div class="flexcolumn">
</div>
</div>
</div>
<div id="leftmain" class="leftmain">
<p id="button" div="leftmain" onclick='show("htpmain")'>📢 How To Play</p>
</div>
<center>
<div id=htpmain class="main">
<div class="toptext">
<h1>
📢 How To Play
</h1>
<p>This guide will get you start the game and will be helpful to grasp everything you need to do.
</p>
</div>
<div class="card" />
</div>
</center>
Your leftmain IS taking up 100% of the space available to it, leftmain stops when it reaches . You have leftmain set to flex-direction: column;
when only the .main should have it. Also don't use the tag, it is no longer supported in HTML5 and is display: block; when it should be inline-block.
I would change just to and set display to inline-block and set a width so the leftmain has room to go past it.
I hope this solves your problem.
.leftmain {
height: 100%;
width: 325px;
padding: 0px 10px;
align-content: center;
background-color: #333333;
overflow: scroll;
}
#nameOfCenterDiv {
position: absolute;
left: 300px;
display: inline-block;
}
Give to the sidebar a position fixed so it always stays there wherever you scroll and and a margin-left to your content on the right (the width of the margin-left must be the same of sidebar width)
.leftmain{
position: fixed
}
.main{
margin-left: 345px;
width: 450px //remove this so it's 100%
}
You have to wrap the left sidebar and right panel within the same container.
Using the display: flex on the container, you no longer need to specify a 100% height for the left sidebar since it will automatically fill in the remaining space.
You also need to remove the margin-left rule for the right content so that it lays nicely with the sidebar.
You can optionally set a max-height of 100vh to the sidebar so that it scrolls when its content exceeds the viewport height.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.main {
border: 0px solid #ffffff;
padding: 0px 0px;
flex-direction: column;
align-content: center;
text-align: center;
width: 450px;
}
.card {
display: inline-block;
width: 400px;
height: 160px;
background-color: #404040;
border: 1px solid #404040;
border-radius: 4px;
margin: 0px;
margin-top: 20px;
text-decoration: none;
}
.toptext {
display: inline-block;
width: 400px;
height: 45px;
color: #ffffff;
background-color: #ffffff;
border: 1px solid #ffffff;
border-radius: 4px;
margin: 0px;
margin-top: 5px;
text-decoration: none;
text-align: left;
}
.toptext h1 {
font-size: 20px;
margin-left: 0px;
margin-top: 1px;
color: #404040;
}
.toptext p {
font-size: 12px;
margin-left: 0px;
margin-top: -10px;
color: #404040;
}
.flexcolumn {
flex-direction: column;
}
.container {
display: flex;
}
.leftmain {
width: 325px;
padding: 0px 10px;
flex-direction: column;
align-content: center;
background-color: #333333;
overflow: scroll;
}
.leftmain p {
float: left;
color: #ffffff;
text-align: left;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
line-height: 25px;
border-radius: 4px;
background-color: #333333;
width: 300px;
}
.leftmain p:hover {
background-color: #404040;
color: #ffffff;
}
.header {
overflow: hidden;
background-color: #404040;
padding: 10px 10px;
height: 36px;
text-align: center;
}
.header-right {
float: right;
padding: 0px 0px;
}
.header a {
float: left;
color: #ffffff;
text-align: center;
padding: 5px 10px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
align-content: center;
}
.header a:hover {
background-color: #333333;
color: #ffffff;
}
<div class="header">
📄 My Paper Company
<div class="header-right">
Settings
Contact
Donate
<div class="flexcolumn">
</div>
</div>
</div>
<div class="container">
<div id="leftmain" class="leftmain">
<p id="button" div="leftmain" onclick='show("htpmain")'>📢 How To Play</p>
</div>
<center>
<div id=htpmain class="main">
<div class="toptext">
<h1>
📢 How To Play
</h1>
<p>This guide will get you start the game and will be helpful to grasp everything you need to do.
</p>
</div>
<div class="card" />
</div>
</center>
</div>
im working in my final proyect to become a Web Developer, and im struggling with my footer, that is creating a minimum horizontal scroll and I cant find why.
I've been doing tests and I can't get rid of that horizontal scroll. An answer as soon as possible would be of great help to me, since this is my final project.
footer {
position: absolute;
bottom: 100;
left: 0;
right: 0;
background: #111;
height: auto;
width: 100%;
padding-top: 40px;
color: #fff;
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
h3 {
font-size: 2rem;
font-weight: 500;
text-transform: capitalize;
line-height: 4rem;
color: yellow;
}
}
.socials {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
li {
margin: 0 0px;
}
a {
text-decoration: none;
color: #fff;
padding: 5px;
&:hover {
color: rgb(255, 251, 0);
transition-duration: 1s;
}
}
}
.footer-bottom {
background: #000;
width: 100%;
padding: 20px;
padding-bottom: 40px;
text-align: center;
p {
display: flex;
justify-content: flex-start;
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
a {
color: yellow;
font-size: 16px;
text-decoration: none;
}
}
}
#media (max-width: 830px) {
.socials li {
font-size: 14px;
}
}
<footer>
<div class="footer-content">
<h3>KURT BURGERS</h3>
<ul class="socials">
<li>DEFENSA AL CONSUMIDOR</li>
<li>DELIVERY</li>
<li>POLITICAS DE PRIVACIDAD</li>
</ul>
</div>
<div class="footer-bottom">
<p>copyright © KURT BURGERS </p>
</div>
</footer>
I copied your code and removed the width:100% from .footer-bottom the horizontal scroll disappeared.
The reason why you get the scrollbar is because footer-bottom's width is 100% + the 20px padding you have set for each side of the element. If you add padding to an element with a width, the padding will be added on top of the width unless you set box-sizing: border-box;
You could add border-box to footer-bottom as a solution but what you should really do is remove the width 100% from footer-bottom because it is a block element already and it will take up the 100% width by default so there is no need to set it.
The same thing applies to the ul .socials, it has natural padding on the tag so when you set width 100% to it, it will be wider than 100%. In the case of this ul, I simply added padding: 0
In the below snippet, I have removed the width 100% from footer-bottom and I added some minor css to body so it is easier to see your content width.
body,
html {
padding: 0;
margin: 0;
}
footer {
position: absolute;
bottom: 100;
left: 0;
right: 0;
background: #111;
height: auto;
width: 100%;
padding-top: 40px;
color: #fff;
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3 {
font-size: 2rem;
font-weight: 500;
text-transform: capitalize;
line-height: 4rem;
color: yellow;
}
.socials {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0;
}
.socials li {
margin: 0 0px;
}
.socials a {
text-decoration: none;
color: #fff;
padding: 5px;
}
.footer-bottom {
background: #000;
padding: 20px;
padding-bottom: 40px;
text-align: center;
p {
display: flex;
justify-content: flex-start;
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
a {
color: yellow;
font-size: 16px;
text-decoration: none;
}
}
}
#media (max-width: 830px) {
.socials li {
font-size: 14px;
}
}
<footer>
<div class="footer-content">
<h3>KURT BURGERS</h3>
<ul class="socials">
<li>DEFENSA AL CONSUMIDOR</li>
<li>DELIVERY</li>
<li>POLITICAS DE PRIVACIDAD</li>
</ul>
</div>
<div class="footer-bottom">
<p>copyright © KURT BURGERS </p>
</div>
</footer>
You are missing this from your styles:
* {
box-sizing: border-box;
}
This question already has answers here:
Footer at bottom of page or content, whichever is lower
(5 answers)
Closed last year.
I'm trying to make a website where I have a footer at the bottom of the page. I found another solution on how to place the footer at the bottom of the page online which worked amazing with no problems.
But when I tried making the website responsive I recognized that for some reason the footer took up a lot of space which created a lot of blank space between the main content and the footer. I've tried to remove the blank space, but that just results in a bunch of other problems.
Preferably I would want to remove the blank space and have the footer right under the main content of the page. Any help or advice would be appreciated!
* {
box-sizing: border-box;
}
body {
font-family: Arial;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
width: 100%;
border: 1px solid gray;
background-color: rgb(255, 255, 255);
border-bottom: 0px;
}
#font-face {
font-family: Gemosh;
src: url(Gemosh2.otf);
}
header {
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 60px;
}
footer {
padding: 1em;
color: white;
background-color: black;
text-align: center;
font-size: 15px;
}
.navbar {
display: flex;
margin-bottom: 0px;
justify-content: center;
justify-content: space-evenly;
padding: 1em;
padding-bottom: 1em;
padding-top: 0em;
}
.dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #444444 !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.dropdown a {
display: block;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: #636363;
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option:hover {
background-color: #abcdef !important;
color: white;
}
.active-dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #04AA6D !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.active-dropdown a {
display: block;
background-color: #11c784 !important;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.active-dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: rgb(4, 199, 129);
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.active-dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option a:hover {
background-color: #abcdef !important;
color: white;
}
.main {
padding: 1em;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.test {
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-size: 50px;
padding: 10px;
}
.londontxt {
flex: 20%;
padding: 2em;
font-size: 15px;
padding-bottom: 0em;
padding-top: 0em;
}
.pic {
flex: 20%;
padding: 10px;
}
.pic img {
margin-left: 10%;
width: 80%;
}
.pic h2 {
margin-left: 10%;
}
#media only screen and (min-width: 600px) {
.londontxt {
padding: 3em;
padding-bottom: 0em;
padding-top: 0em;
}
}
#media only screen and (min-width: 680px) {
.londontxt {
padding: 4em;
padding-bottom: 0em;
padding-top: 0em;
font-size: 20px;
}
}
#media only screen and (min-width: 821px) {
header {
display: block;
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
height: 350px;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 120px;
}
.navbar {
justify-content: center;
gap: 50px;
padding: 1em;
padding-bottom: 4em;
padding-top: 1.5em;
}
.navbar a {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
transition: 0.2s;
}
.dropdown {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
.dropdown a {
background-color: #636363 !important;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
text-align: center;
}
.dropdown>.dropdown-sub {
top: 40px;
}
.dropdown-option a:hover {
color: white;
}
.active-dropdown {
padding: 1.8em;
padding-top: 1em;
padding-bottom: 1em;
}
.active-dropdown a {
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.active-dropdown>.dropdown-sub {
top: 40px;
}
.main {
flex-direction: row;
}
.londontxt {
font-size: 15px;
padding: 1em;
}
}
#media only screen and (min-width: 1000px) {
.londontxt {
font-size: 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="london.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<div class="navbar">
<div class="active-dropdown">
<div class="dropdown-title">London</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Paris</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Tokyo</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
</div>
<div class="main">
<div class="londontxt">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="pic">
<h2>Tower Bridge:</h2>
<img src="londonbridge.jpg" alt="">
</div>
<div class="pic">
<h2>Big Ben:</h2>
<img src="londonbigben.jpg" alt="">
</div>
</div>
</div>
<footer>Copyright © 2022 Johannes</footer>
</body>
</html>
The best solution would be to remove the flex from the body element & instead set the flex properties on the container. With your current structure, you can fix this by adding the following CSS to footer.
footer {
width: 100vw;
position: fixed;
bottom: 0;
}
* {
box-sizing: border-box;
}
body {
font-family: Arial;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
width: 100%;
border: 1px solid gray;
background-color: rgb(255, 255, 255);
border-bottom: 0px;
}
#font-face {
font-family: Gemosh;
src: url(Gemosh2.otf);
}
header {
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 60px;
}
footer {
padding: 1em;
color: white;
background-color: black;
text-align: center;
font-size: 15px;
position: fixed;
width: 100vw;
bottom: 0;
}
.navbar {
display: flex;
margin-bottom: 0px;
justify-content: center;
justify-content: space-evenly;
padding: 1em;
padding-bottom: 1em;
padding-top: 0em;
}
.dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #444444 !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.dropdown a {
display: block;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: #636363;
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option:hover {
background-color: #abcdef !important;
color: white;
}
.active-dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #04AA6D !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.active-dropdown a {
display: block;
background-color: #11c784 !important;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.active-dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: rgb(4, 199, 129);
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.active-dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option a:hover {
background-color: #abcdef !important;
color: white;
}
.main {
padding: 1em;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.test {
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-size: 50px;
padding: 10px;
}
.londontxt {
flex: 20%;
padding: 2em;
font-size: 15px;
padding-bottom: 0em;
padding-top: 0em;
}
.pic {
flex: 20%;
padding: 10px;
}
.pic img {
margin-left: 10%;
width: 80%;
}
.pic h2 {
margin-left: 10%;
}
#media only screen and (min-width: 600px) {
.londontxt {
padding: 3em;
padding-bottom: 0em;
padding-top: 0em;
}
}
#media only screen and (min-width: 680px) {
.londontxt {
padding: 4em;
padding-bottom: 0em;
padding-top: 0em;
font-size: 20px;
}
}
#media only screen and (min-width: 821px) {
header {
display: block;
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
height: 350px;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 120px;
}
.navbar {
justify-content: center;
gap: 50px;
padding: 1em;
padding-bottom: 4em;
padding-top: 1.5em;
}
.navbar a {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
transition: 0.2s;
}
.dropdown {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
.dropdown a {
background-color: #636363 !important;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
text-align: center;
}
.dropdown>.dropdown-sub {
top: 40px;
}
.dropdown-option a:hover {
color: white;
}
.active-dropdown {
padding: 1.8em;
padding-top: 1em;
padding-bottom: 1em;
}
.active-dropdown a {
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.active-dropdown>.dropdown-sub {
top: 40px;
}
.main {
flex-direction: row;
}
.londontxt {
font-size: 15px;
padding: 1em;
}
}
#media only screen and (min-width: 1000px) {
.londontxt {
font-size: 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="london.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<div class="navbar">
<div class="active-dropdown">
<div class="dropdown-title">London</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Paris</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Tokyo</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
</div>
<div class="main">
<div class="londontxt">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="pic">
<h2>Tower Bridge:</h2>
<img src="londonbridge.jpg" alt="">
</div>
<div class="pic">
<h2>Big Ben:</h2>
<img src="londonbigben.jpg" alt="">
</div>
</div>
</div>
<footer>Copyright © 2022 Johannes</footer>
</body>
</html
EDIT ~ OP want's container to be 100vh, use position: fixed; instead.
You can add this code to .pic:last-child:
.pic:last-child {
margin-bottom: -70px;
}
* {
box-sizing: border-box;
}
body {
font-family: Arial;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
width: 100%;
border: 1px solid gray;
background-color: rgb(255, 255, 255);
border-bottom: 0px;
}
#font-face {
font-family: Gemosh;
src: url(Gemosh2.otf);
}
header {
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 60px;
}
footer {
padding: 1em;
color: white;
background-color: black;
text-align: center;
font-size: 15px;
}
.navbar {
display: flex;
margin-bottom: 0px;
justify-content: center;
justify-content: space-evenly;
padding: 1em;
padding-bottom: 1em;
padding-top: 0em;
}
.dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #444444 !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.dropdown a {
display: block;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: #636363;
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option:hover {
background-color: #abcdef !important;
color: white;
}
.active-dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #04AA6D !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.active-dropdown a {
display: block;
background-color: #11c784 !important;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.active-dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: rgb(4, 199, 129);
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.active-dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option a:hover {
background-color: #abcdef !important;
color: white;
}
.main {
padding: 1em;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.test {
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-size: 50px;
padding: 10px;
}
.londontxt {
flex: 20%;
padding: 2em;
font-size: 15px;
padding-bottom: 0em;
padding-top: 0em;
}
.pic {
flex: 20%;
padding: 10px;
}
.pic:last-child {
margin-bottom: -70px;
}
.pic img {
margin-left: 10%;
width: 80%;
}
.pic h2 {
margin-left: 10%;
}
#media only screen and (min-width: 600px) {
.londontxt {
padding: 3em;
padding-bottom: 0em;
padding-top: 0em;
}
}
#media only screen and (min-width: 680px) {
.londontxt {
padding: 4em;
padding-bottom: 0em;
padding-top: 0em;
font-size: 20px;
}
}
#media only screen and (min-width: 821px) {
header {
display: block;
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
height: 350px;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 120px;
}
.navbar {
justify-content: center;
gap: 50px;
padding: 1em;
padding-bottom: 4em;
padding-top: 1.5em;
}
.navbar a {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
transition: 0.2s;
}
.dropdown {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
.dropdown a {
background-color: #636363 !important;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
text-align: center;
}
.dropdown>.dropdown-sub {
top: 40px;
}
.dropdown-option a:hover {
color: white;
}
.active-dropdown {
padding: 1.8em;
padding-top: 1em;
padding-bottom: 1em;
}
.active-dropdown a {
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.active-dropdown>.dropdown-sub {
top: 40px;
}
.main {
flex-direction: row;
}
.londontxt {
font-size: 15px;
padding: 1em;
}
}
#media only screen and (min-width: 1000px) {
.londontxt {
font-size: 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="london.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<div class="navbar">
<div class="active-dropdown">
<div class="dropdown-title">London</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Paris</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Tokyo</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
</div>
<div class="main">
<div class="londontxt">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="pic">
<h2>Tower Bridge:</h2>
<img src="londonbridge.jpg" alt="">
</div>
<div class="pic">
<h2>Big Ben:</h2>
<img src="londonbigben.jpg" alt="">
</div>
</div>
</div>
<footer>Copyright © 2022 Johannes</footer>
</body>
</html>
Why is the website not fitting correctly to smaller devices?
There is still a horizontal scroll bar. When entered in design view, mobile devices don't show in terms of what I want. I tried to resize everything but it still doesn't work.
Could it be margin or padding somewhere? Or the project sections too big? Or something to do with media queries?
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 110px auto 1fr 470px auto auto auto auto auto;
gap: 0px 0px;
grid-template-areas:
"header header header header"
"hero hero hero hero"
"about about about about"
"text text text text"
"project1 project1 project1 project1"
"project2 project2 project2 project2"
"project3 project3 project3 project3"
"project4 project4 project4 project4"
"footer footer footer footer";
}
#media (max-width: 1200px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"header"
"hero"
"about"
"text"
"project1"
"project2"
"project3"
"project4"
"footer";
}
}
#media only screen and (max-width: 1200px) {
section.content-container {
margin-left: 10px;
margin-right: 10px;
}
}
#media only screen and (max-width: 1200px) {
footer.content-container {
margin-left: 10px;
margin-right: 10px;
}
}
.header {
grid-area: header;
}
.navbar {
position: absolute;
display: inline-block;
top: 50px;
right: 60px;
font-family: 'Khula', sans-serif;
line-height: 38px;
font-weight: 400;
font-size: 16px;
}
.nav-link {
margin: 18px;
color: #222222;
text-decoration: none;
}
.name {
position: absolute;
display: inline-block;
top: 50px;
left: 60px;
font-family: 'Kanit', sans-serif;
line-height: 30px;
font-weight: 500;
font-size: 28px;
color: #222222;
text-decoration: none;
}
.hero {
grid-area: hero;
padding-top: 90px;
padding-bottom: 250px;
text-align: center;
}
.hero-h1 {
font-family: 'Khula', sans-serif;
font-weight: 600;
font-size: 100px;
color: #bbbbbb;
line-height: 100px;
letter-spacing: -1px;
}
.hero-h1-color {
color: #222222;
}
.container {
max-width: 1240px;
}
.about {
grid-area: about;
background-color: #f5f5f5;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
}
.home-h2-text {
font-family: 'Khula', sans-serif;
letter-spacing: -1px;
padding: 90px 100px 80px;
font-size: 70px;
color: #222222;
line-height: 70px;
}
.home-h3-text {
font-family: 'Khula', sans-serif;
letter-spacing: -1px;
font-size: 35px;
color: #222222;
padding: 90px 100px 80px;
font-weight: 400;
}
.text {
grid-area: text;
height: 500px;
margin-left: 100px;
margin-right: 100px;
font-family: 'Khula', sans-serif;
letter-spacing: -1px;
text-align: center;
font-size: 40px;
color: #bbbbbb;
padding-top: 138px;
line-height: 60px;
}
.text-h3-color {
color: #222222;
}
.project1 {
grid-area: project1;
background-color: #fdf0f2;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
}
.project2 {
grid-area: project2;
background-color: #f8f7ff;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
}
.project3 {
grid-area: project3;
background-color: #fdf0f2;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
}
.project4 {
grid-area: project4;
background-color: #eff5fd;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
}
.footer {
grid-area: footer;
margin-top: 38px;
margin-left: 100px;
margin-right: 100px;
height: 700px;
margin-bottom: 100px;
}
.footer-text {
padding: 200px 100px;
font-family: 'Khula', sans-serif;
font-weight: 600;
font-size: 80px;
color: #bbbbbb;
line-height: 80px;
letter-spacing: -1px;
}
.footer-contact {
font-family: 'Khula', sans-serif;
font-weight: 600;
font-size: 35px;
color: #222222;
line-height: 50px;
letter-spacing: -1px;
text-decoration: none;
padding-top: 0px;
margin-left: 60px;
margin-right: 60px;
}
.footer-text-color {
color: #222222;
}
ul {
list-style-type: none;
text-decoration: none;
}
<div class="grid-container">
<header class="header">
<div>Web Developer</div>
<nav class="navbar">
About
Projects
Contact
</nav>
</header>
<div class="hero">
<h1 class="hero-h1">ABC <br /><span class="hero-h1-color">front end developer</span></h1>
</div>
<section class="content-container about">
<h2 class="home-h2-text">Nice to <br />meet you</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<div class="content-container text">
<h3>ABCDEFG <br /><span class="text-h3-color">ABCDEFG.</span></h3>
</div>
<section class="content-container project1">
<h2 class="home-h2-text">Project 1</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<section class="content-container project2">
<h2 class="home-h2-text">Project 2</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<section class="content-container project3">
<h2 class="home-h2-text">Project 3</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<section class="content-container project4">
<h2 class="home-h2-text">Project 4</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<footer class="content-container footer">
<div class="footer-text">Let's <br> <span class="footer-text-color">Connect</span></div>
<ul>
<li>Email</li>
<li>LinkedIn</li>
<li>GitHub</li>
</ul>
</footer>
</div>
You can nest your code in a flex container which is what I did. For the example, I called it main-wrapper. I then added some flex-box styles to that class and applied overflow: hidden; to make it so it doesn't scroll. Then I added some sample media queries to align your nav components when resizing. They are marked at the bottom of your CSS labeled /* additions */ Feel free to change around as you desire, but this should get you on the right track.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 110px auto 1fr 470px auto auto auto auto auto;
gap: 0px 0px;
grid-template-areas:
"header header header header"
"hero hero hero hero"
"about about about about"
"text text text text"
"project1 project1 project1 project1"
"project2 project2 project2 project2"
"project3 project3 project3 project3"
"project4 project4 project4 project4"
"footer footer footer footer";
justify-items: center;
}
#media (max-width: 1200px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"header"
"hero"
"about"
"text"
"project1"
"project2"
"project3"
"project4"
"footer";
}
}
#media only screen and (max-width: 1200px) {
section.content-container {
margin-left: 10px;
margin-right: 10px;
width: 90vw;
}
}
#media only screen and (max-width: 1200px) {
footer.content-container {
margin-left: 10px;
margin-right: 10px;
}
}
.header {
grid-area: header;
}
.navbar {
position: absolute;
display: inline-block;
top: 50px;
right: 60px;
font-family: 'Khula', sans-serif;
line-height: 38px;
font-weight: 400;
font-size: 16px;
}
.nav-link {
margin: 18px;
color: #222222;
text-decoration: none;
}
.name {
position: absolute;
display: inline-block;
top: 50px;
left: 60px;
font-family: 'Kanit', sans-serif;
line-height: 30px;
font-weight: 500;
font-size: 28px;
color: #222222;
text-decoration: none;
}
.hero {
grid-area: hero;
padding-top: 90px;
padding-bottom: 250px;
text-align: center;
}
.hero-h1 {
font-family: 'Khula', sans-serif;
font-weight: 600;
font-size: 100px;
color: #bbbbbb;
line-height: 100px;
letter-spacing: -1px;
}
.hero-h1-color {
color: #222222;
}
.container {
max-width: 1240px;
}
.about {
grid-area: about;
background-color: #f5f5f5;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
width: 80vw;
}
.home-h2-text {
font-family: 'Khula', sans-serif;
letter-spacing: -1px;
padding: 90px 100px 80px;
font-size: 70px;
color: #222222;
line-height: 70px;
}
.home-h3-text {
font-family: 'Khula', sans-serif;
letter-spacing: -1px;
font-size: 35px;
color: #222222;
padding: 90px 100px 80px;
font-weight: 400;
}
.text {
grid-area: text;
height: 500px;
margin-left: 100px;
margin-right: 100px;
font-family: 'Khula', sans-serif;
letter-spacing: -1px;
text-align: center;
font-size: 40px;
color: #bbbbbb;
padding-top: 138px;
line-height: 60px;
}
.text-h3-color {
color: #222222;
}
.project1 {
grid-area: project1;
background-color: #fdf0f2;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
}
.project2 {
grid-area: project2;
background-color: #f8f7ff;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
}
.project3 {
grid-area: project3;
background-color: #fdf0f2;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
}
.project4 {
grid-area: project4;
background-color: #eff5fd;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
}
.footer {
grid-area: footer;
margin-top: 38px;
margin-left: 100px;
margin-right: 100px;
height: 700px;
margin-bottom: 100px;
}
.footer-text {
padding: 200px 100px;
font-family: 'Khula', sans-serif;
font-weight: 600;
font-size: 80px;
color: #bbbbbb;
line-height: 80px;
letter-spacing: -1px;
}
.footer-contact {
font-family: 'Khula', sans-serif;
font-weight: 600;
font-size: 35px;
color: #222222;
line-height: 50px;
letter-spacing: -1px;
text-decoration: none;
padding-top: 0px;
margin-left: 60px;
margin-right: 60px;
}
.footer-text-color {
color: #222222;
}
ul {
list-style-type: none;
text-decoration: none;
}
/* additions */
.main-wrapper {
display: flex;
justify-content: center;
overflow-x: hidden;
max-width: 100%;
height: 100%;
}
#media only screen and (max-width: 650px) {
.logo > .name {
position: absolute;
top: 10px;
left: 35%;
}
.logo {
width: 100%;
}
.navbar {
position: relative;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
right: 0;
}
.content-container .about {
width: 100vw;
}
body {
margin: 0;
}
h2 {
white-space: nowrap;
}
.footer-text {
align-items: center;
}
}
.content-container {
width: 80vw;
}
.footer-text {
display: flex;
justify-content: center;
flex-direction: column;
}
<div class="main-wrapper">
<div class="grid-container">
<header class="header">
<div class="logo">Web Developer</div>
<nav class="navbar">
About
Projects
Contact
</nav>
</header>
<div class="hero">
<h1 class="hero-h1">ABC <br /><span class="hero-h1-color">front end developer</span></h1>
</div>
<section class="content-container about">
<h2 class="home-h2-text">Nice to <br />meet you</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<div class="content-container text">
<h3>ABCDEFG <br /><span class="text-h3-color">ABCDEFG.</span></h3>
</div>
<section class="content-container project1">
<h2 class="home-h2-text">Project 1</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<section class="content-container project2">
<h2 class="home-h2-text">Project 2</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<section class="content-container project3">
<h2 class="home-h2-text">Project 3</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<section class="content-container project4">
<h2 class="home-h2-text">Project 4</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<footer class="content-container footer">
<div class="footer-text">Let's <br> <span class="footer-text-color">Connect</span></div>
<ul>
<li>Email</li>
<li>LinkedIn</li>
<li>GitHub</li>
</ul>
</footer>
</div>
</div>
EDIT: prevent horizontal scroll w/ initial scroll. I kept the main-wrapper div I added on to add the styles too. You can use max-width: 100%; and overflow-x: hidden; to avoid horizontal scroll.
EDIT 2 set width: 80vw; on about to get the same width as before.
I have a simple page created using html and css, when I shrink the browser the button small-button goes outside of the div and I don't know why, I want to keep it in the div no matter how much I shrink the browser so that it is responsive. How can I do that?
here is my code:
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.nav {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.header {
height: 8%;
}
.nav-h1 {
text-align: center;
margin-top: 27px;
font-size: 40px;
}
a {
display: inline-block;
margin: 10px;
font-family: 'Segoe UI',sans-serif;
font-family: SegoeUI;
font-size: 16px;
font-weight: bold;
color: black;
font-weight: bold;
}
.a-container {
margin-left: 10%;
margin-top: 27px;
}
.footer {
background-color: #e8e8e8;
height: 288px;
width: 100%;
}
.alignleft {
float: left;
margin-left: 8%;
font-family: SegoeUI;
font-size: 18px;
font-weight: 900;
color: #000000;
}
.alignright {
float: right;
margin-right: 8%;
display: flex;
flex-direction: row;
}
.logo-section {
margin-top: 1.3%;
margin-left: 2%;
}
.logo-img {
padding: 6px;
}
.first-section {
width: 100%;
height: 800px;
background-image: url("/assets/images/first-image.png");
background-repeat: no-repeat;
background-size: contain;
position: relative;
float: left;
}
.first-section-p {
width: 400px;
height: 314px;
margin-left: 10%;
padding-top: 10%;
font-family: SegoeUI;
font-weight: 900;
font-size: 4vh;
font-weight: 900;
text-align: center;
color: #262262;
}
.small-button {
width: 331px;
height: 92px;
margin-left: 12%;
background-color: #e7af17;
font-family: SegoeUI;
font-size: 18px;
font-weight: 900;
color: white;
border: none;
}
.second-section-text {
color: #e8e8e8;
font-weight: 900;
font-size: 70px;
line-height: 0.7;
font-family: SegoeUI;
margin-left: 12%;
}
#media (min-width: 1281px) {
.first-section {
width: 100%;
height: 800px;
background-image: url("/assets/images/first-image.png");
background-repeat: no-repeat;
background-size: cover;
}
.small-button {
width: 331px;
height: 92px;
margin-top: 8%;
margin-left: 12%;
background-color: #e7af17;
font-family: SegoeUI;
font-size: 18px;
font-weight: 900;
color: white;
border: none;
}
}
<div class="main-container">
<div class="headers">
<div class="nav">
<h1 class="nav-h1">Logo</h1>
<div class="a-container">
<a>About</a>
<a>Vision</a>
<a>Solutions</a>
<a>Technology</a>
<a>Contact</a>
</div>
<div class="logo-section">
<img class="logo-img" src="/assets/images/facebook.png" alt="facebook logo">
<img class="logo-img" src="/assets/images/linkedin.png" alt="linkedin logo">
</div>
</div>
</div>
<div class="content">
<div class="content-inside">
<div class="first-section">
<p class="first-section-p">Turnkey platforms <br> for businesses looking to rule the online market
</p>
<button class="small-button">LEARN MORE</button>
</div>
<div class="second-section">
<p class="second-section-text">WHAT</p>
<p class="second-section-text">WHE DO</p>
<p class="second-section-text">BEST</p>
</div>
</div>
</div>
<div class="footer"></div>
</div>
make you sure that you have this meta in html file <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> and trying to change the sizes and position of the elements that you want to resize but don't define all properties
just define the properties that want to change
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.nav {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.header {
height: 8%;
}
.nav-h1 {
text-align: center;
margin-top: 27px;
font-size: 40px;
}
a {
display: inline-block;
margin: 10px;
font-family: 'Segoe UI', sans-serif;
font-family: SegoeUI;
font-size: 16px;
font-weight: bold;
color: black;
font-weight: bold;
}
.a-container {
margin-left: 10%;
margin-top: 27px;
}
.footer {
background-color: #e8e8e8;
height: 288px;
width: 100%;
}
.alignleft {
float: left;
margin-left: 8%;
font-family: SegoeUI;
font-size: 18px;
font-weight: 900;
color: #000000;
}
.alignright {
float: right;
margin-right: 8%;
display: flex;
flex-direction: row;
}
.logo-section {
margin-top: 1.3%;
margin-left: 2%;
}
.logo-img {
padding: 6px;
}
.first-section {
width: 100%;
height: 800px;
background-image: url("/assets/images/first-image.png");
background-repeat: no-repeat;
background-size: contain;
position: relative;
float: left;
}
.first-section-p {
width: 400px;
height: 314px;
margin-left: 10%;
padding-top: 10%;
font-family: SegoeUI;
font-weight: 900;
font-size: 4vh;
font-weight: 900;
text-align: center;
color: #262262;
}
.small-button {
width: 331px;
height: 92px;
margin-left: 12%;
background-color: #e7af17;
font-family: SegoeUI;
font-size: 18px;
font-weight: 900;
color: white;
border: none;
}
.second-section-text {
color: #e8e8e8;
font-weight: 900;
font-size: 70px;
line-height: 0.7;
font-family: SegoeUI;
margin-left: 12%;
}
#media (min-width: 1281px) {
.first-section {
width: 100%;
height: 800px;
background-image: url("/assets/images/first-image.png");
background-repeat: no-repeat;
background-size: cover;
}
.small-button {
width: 321px;
height: 82px;
margin-top: -28%;
margin-left: 12%;
background-color: #e7af17;
font-family: SegoeUI;
font-size: 18px;
font-weight: 900;
color: white;
border: none;
}
}
#media (max-width: 800px) {
.small-button {
margin-top: -30%;
margin-left: 14%;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<div class="main-container">
<div class="headers">
<div class="nav">
<h1 class="nav-h1">Logo</h1>
<div class="a-container">
<a>About</a>
<a>Vision</a>
<a>Solutions</a>
<a>Technology</a>
<a>Contact</a>
</div>
<div class="logo-section">
<img class="logo-img" src="/assets/images/facebook.png" alt="facebook logo">
<img class="logo-img" src="/assets/images/linkedin.png" alt="linkedin logo">
</div>
</div>
</div>
<div class="content">
<div class="content-inside">
<div class="first-section">
<p class="first-section-p">Turnkey platforms <br> for businesses looking to rule the online market
</p>
<button class="small-button">LEARN MORE</button>
</div>
<div class="second-section">
<p class="second-section-text">WHAT</p>
<p class="second-section-text">WHE DO</p>
<p class="second-section-text">BEST</p>
</div>
</div>
</div>
<div class="footer"></div>
</div>
Try setting the viewport with a meta tag.
See this resource: https://www.w3schools.com/html/html_responsive.asp
You can use the the #media css rule:
#media only screen and (max-width: 'your device width') {
.element{
//styling rules here
}
}
You can use this rule more than one time to make your website responsive for more device widths.