Please could somebody help me with flex for pushing my footer down / expanding the content to fit?
https://jsfiddle.net/9xjy78gj/
Hopefully it's clear to see from the site what my issue is.
I'd just like to use flex to push the footer down and expand the content div appropriately, without using set heights for the content div etc. if possible?
Many thanks!
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="page_wrap">
<header>
<a href="/">
<h1>Close<span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Range</h1>
</a>
<hr />
</header>
<div id="refinement">
<form>
<div class="form_component">
<select id="narrow">
<option value="select" selected disabled>Please Select</option>
</select>
</div>
<div class="form_component">
<input id="driving" type="radio" name="travelmode" value="Driving" checked /> <i class="fa fa-car" aria-hidden="true"></i>
</div>
<div class="form_component">
<input id="walking" type="radio" name="travelmode" value="Walking" /> <i class="fa fa-male" aria-hidden="true"></i>
</div>
</form>
</div>
<div id="jquery_placeholder">
<!-- JQuery loads PHP output into here-->
</div>
<div id="place_results_wrap">
<!-- and here -->
<div id="content">
<h2>Let's explore!</h2>
<i class="fa fa-globe" aria-hidden="true"></i>
</div>
</div>
<footer class="footer">
<div id="google">
<img src="/assets/i/google.png" alt="Powered by Google" />
</div>
</footer>
</div>
</body>
</html>
CSS
a, a:hover
{
text-decoration: none;
}
body
{
font-family: 'Open Sans', sans-serif;
background: #ECECEA;
font-size:16px;
}
#page_wrap
{
width:100%;
}
header
{
background: #fff;
text-align: center;
padding: 1.250em;
}
header h1
{
font-size: 6em;
font-weight: 400;
color: #655e5e;
margin: 0;
display: inline-block;
}
#media screen and (max-width: 550px)
{
header h1 {
font-size: 3em;
}
}
header hr
{
max-width: 36em;
margin-bottom: 0px;
}
header .fa-map-marker
{
color: #ec3b3b;
font-size: 1.2em;
}
#refinement
{
padding: 0.5em 1.25em 1.25em;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
#refinement form
{
display: flex;
justify-content: center;
}
.form_component
{
margin: 0 0.4em;
display: none;
}
.form_component i.fa
{
font-size: 1.4em;
color: #655e5e;
}
#content
{
text-align: center;
background: #655e5e;
padding: 1.25em;
}
#content h2
{
color: #fff;
font-weight: 400;
font-size: 4em;
margin: 0;
}
#media screen and (max-width: 415px) {
#content h2
{
font-size:2em;
}
}
#content i.fa-globe
{
font-size: 18em;
color: #fff;
}
.place_results
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding: 1.25em 0;
}
.next_page
{
padding: 0 1.250em;
width: 100%;
text-align: center;
}
.next_page button
{
background-color: #fff;
border: none;
color: #655e5e;
padding: 0.3125em 2em;
text-decoration: none;
display: inline-block;
font-size: 1em;
font-weight: 600;
cursor: pointer;
border-radius: 1.25em;
}
.next_page button:hover
{
background-color: #f6f6f6;
}
.place
{
width: 24em;
height: 27em;
margin: 1.25em;
display: flex;
flex-direction: column;
-webkit-box-shadow: 5px 6px 20px 0px rgba(158,155,158,0.75);
-moz-box-shadow: 5px 6px 20px 0px rgba(158,155,158,0.75);
box-shadow: 5px 6px 20px 0px rgba(158,155,158,0.75);
background: #fff;
}
#media screen and (max-width: 1920px) {
.place
{
width: 30%;
}
}
#media screen and (min-width: 900px)
and (max-width: 1366px){
.place
{
width: 45%;
}
}
#media screen and (min-width: 768px)
and (max-width: 1366px){
.place
{
width: 44%;
}
}
#media screen and (min-width: 415px)
and (max-width: 760px){
.place
{
width: 90%;
}
}
#media screen and (max-width: 415px) {
.place
{
width: 90%;
}
}
.place_image
{
width: 100%;
height: 14.0625em;
background-size: cover !important;
background-clip: content-box !important;
}
.place_description
{
padding: 0.625em;
display: flex;
flex-direction: column;
flex: 1 1 0;
background: #fff;
}
.distance_container p.distance
{
font-weight:600;
}
.place_description p, .place_description a
{
color: #655e5e;
font-weight: 400;
margin: 0;
}
.place_description .place_open p
{
margin: 0;
color: #49b51c;
}
.place_description i.fa
{
width: 1.25em;
}
.place_title
{
flex: 1 1 0;
}
.place_title h3
{
color: #655e5e;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
margin: 0;
font-size: 1.4em;
line-height: 1.3;
}
#media screen and (max-width: 415px) {
.place_title h3
{
font-size: 1.2em;
}
}
.rating_container
{
width: 100%;
}
.rating_bar {
width: 6.875em;
height: 1.313em;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png);
background-repeat: repeat-x;
background-position: 0 0;
}
.rating {
height: 1.313em;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png);
background-position: 0 100%;
background-repeat: repeat-x;
}
.place_description .place_location
{
margin-bottom: 0.625em;
}
.place .distance_container, .place .vicinity_container, .place .place_phone_container
{
display: flex;
}
#load_container
{
padding: 1.25em;
text-align: center;
}
#load i.fa-spin
{
font-size: 4em;
color: #ec3b3b;
}
#jquery_placeholder
{
display:none;
width:100%;
}
footer
{
padding: 1.25em;
text-align: right;
background: #fff;
}
footer #google img
{
width: 10em;
}
#error
{
padding: 1.25em;
background: #ec3b3b;
}
#error p
{
font-size: 1.2em;
margin: 0;
color: #fff;
text-align: center;
}
#error i.fa-exclamation-circle
{
color: #fff;
}
Flexbox can do that providing you use flex-direction:column like so:
If you don't want sections to expand to take up spare space, just remove the flex:1.
html,
body {
height: 100%;
}
body {
min-height: 100%;
text-align: center;
/* for demo */
}
.page-wrap {
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
background: pink;
}
footer {
background: rebeccapurple;
color: #fff;
}
aside {
flex: 1;
background: orange;
}
main {
flex: 1;
background: grey;
}
<div class="page-wrap">
<header>
<h1>Header</h1>
</header>
<aside>I'm a secondary header</aside>
<main>I'm main content</main>
<footer>
<h1>Footer</h1>
</footer>
</div>
Related
So I'm still new to web developing and currently working on a restaurant site but when I view the page on smaller screens it's not displaying properly (not show full width) and the navbar is completely gone. How can I get this to properly show on smaller screens and the navbar to either become a togglebar or display under the logo? I think my current CSS setting might be to blame. Thanks
I have tried optimising with CSS and see if it can show the full page on smaller screens and have been able to achieve that for iPad Air and bigger screens but still no luck on smaller ones.
Happy to share my code if needed
HTML
<body>
<p class="catering">*Catering services available for hire</p>
<header>
<img class="shop-logo w-55" src="/FBS LOGO.png">
<nav class="navbar navbar-default">
<div class="hover-underline-animation"> Menu </div>
<div class="hover-underline-animation">Order</div>
<div class="hover-underline-animation">Location </div>
<div class="hover-underline-animation">Contact</div>
</nav>
</header>
<section class="about" id="about">
<div class="row">
<div class="image">
<img src="FBS_ISLAND GIRL_.png" alt="">
</div>
<div class="content">
<h3>
<span class="line-1"> "Authentic </span> <span class="line-2"> <br> Caribbean </span> <span class="line-3"><br> Cuisine" </span>
<span class="line-4"><br> jus lik momma use tah mek it </span>
</h3>
</div>
</div>
<p class="share"> Like, Follow `n Share <br> <i class="fa-brands fa-instagram"> </i> FOOD_BY_SOPHIE </i> </p>
</section>
<section class="order" id="order">
<h3 class="sub-heading">
Order Now
</h3>
<h1 class="heading">
Collection Only
</h1>
<form action="https://formsubmit.co/a5f5a32519da94e6ed9ceef9fd5cf8af" class="form-alert" method="POST">
<!- Honeypot -->
<input type="text" name="_honey" style="display: none;">
<!- Disaple Captcha -->
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_next" value="https://sprightly-meerkat-b47b9e.netlify.app/">
<div class="inputBox">
<div class="input">
<span>
Your name
</span>
<input type="text" name="name" placeholder="Enter your name">
</div>
<div class="input">
<span>
Your number
</span>
<input type="number" name="number" placeholder="Enter your number">
</div>
</div>
<div class="inputBox">
<div class="input">
<span>
Your order
</span>
<input type="text" name="order" placeholder="Enter your order">
</div>
<div class="input">
<span>
Additional orders
</span>
<input type="text" name="extras" placeholder="Extras">
</div>
</div>
<div class="inputBox">
<div class="input">
<span>
How much
</span>
<input type="number" name="amount" placeholder="How many orders">
</div>
<div class="input">
<span>
Collection date & time
</span>
<input type="datetime-local" name="time">
</div>
</div>
<div class="inputBox">
<div class="input">
<span>
Your message
</span>
<textarea name="message" placeholder="Enter your message" id="" cols="30" rows="10"></textarea>
</div>
</div>
<input type="submit" value="Order now" class="btn btn-dark">
</form>
</section>
CSS
#import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital#1&family=Nunito:wght#200;300;400;600;700&display=swap');
:root{
--green:#27ae60;
--black:#192a56;
--light-color:#666;
--box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
outline: none;
border: none;
text-transform: capitalize;
transition: all .2s linear;
}
html {
font-size: 62%;
scroll-padding-top: 5.5rem;
scroll-behavior: smooth;
}
.loader-container {
position:fixed;
top: 0; left: 0;
height: 100%;
width: 100%;
z-index: 10000;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.loader-container img{
width: 35rem;
}
.loader-container.fade-out{
top: 110%;
opacity: 0;
}
header {
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #a8b98a;
display: flex;
align-items: center;
justify-content: center;
}
.hover-underline-animation {
display: inline-block;
position: relative;
color: white;
}
.hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: white;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
header .navbar a{
font-size: 40px;
border-radius: .5rem;
padding: .5rem 1.5rem;
color: white;
text-decoration: none;
font-family: 'Hi Melody', cursive;
}
.navbar a:hover {
font-size:88px;
font-size-adjust: 20px;
}
img.shop-logo {
width: 650px;
border-radius: 50%;
margin-bottom: -0px;
border: 10px;
margin-top: 0;
}
body {
background: #a8b98a;
}
.about .row{
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: center;
}
.about {
background: #fbe7d7;
padding-right: 10px;
padding: 20rem 9% 40rem 0rem;
}
.about .row .image {
flex: 1 1 45rem;
position: absolute;
display: block;
}
.about .row .image img{
max-width: 1250px;
max-height: inherit;
height: inherit;
width: inherit;
padding-top: 100px;
}
.about .row .content {
flex: 1 1 45rem;
}
.about h3{
text-align: end;
}
.about .row .content p{
color: #aa401b;
font-size: 45px;
text-align: center;
font-family: 'Hi Melody', cursive;
font-weight: bolder;
}
.line-1 {
margin-right: 80px;
padding-left: 0px;
font-family: 'Hi Melody', cursive;
font-weight:bolder;
color: #d45a28;
font-size: 100px;
line-height: 0;
}
.line-2 {
margin-left: 5px;
padding-left: 150px;
font-family: 'Hi Melody', cursive;
font-weight:bolder;
color: #d45a28;font-family: 'Hi Melody', cursive;
font-size: 100px;
line-height: 1;
}
.line-3 {
margin-left: 5px;
padding-left: 100px;
font-family: 'Hi Melody', cursive;
font-weight:bolder;
color: #d45a28;
font-size: 100px;
line-height: 1;
}
.line-4{
margin-left: 5px;
padding-left: 100px;
font-family: 'Hi Melody', cursive;
font-weight:bolder;
color: #d45a28;
font-size: 40px;
line-height: 1;
}
.share {
color: #d45a28;
font-weight: bolder;
font-size: 20px;
float:right;
padding-top: 80px;
text-decoration: none;
font-family: 'Hi Melody', cursive;
padding-top: 250px;
}
.share a {
color: #d45a28;
text-decoration: none;
font-weight: bolder;
}
.sub-heading {
color: black;
text-align: center;
margin-top: 30px;
padding-top: 20px;
}
.heading {
color: black;
text-align: center;
}
.order form {
max-width: 90rem;
border-radius: .5rem;
box-shadow: var(--box-shadow);
border: .1rem solid rgba(0,0,0,.2);
background: #fff;
padding: 1.5rem;
margin: 0 auto;
}
.order form .inputBox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.order form .inputBox .input {
width: 49%;
}
.order form .inputBox .input span{
display: block;
padding: .5rem 0;
font-size: 1.5rem;
color: var(--light-color);
}
.order form .inputBox .input input,
.order form .inputBox .input textarea{
background: #eee;
border-radius: .5rem;
padding: 1rem;
font-size: 1.6rem;
color: var(--black);
text-transform: none;
margin-bottom: 1rem;
width: 100%;
}
.order form .inputBox .input input:focus,
.order form .inputBox .input textarea:focus{
border: 1rem solid var(--green);
}
.order form .inputBox .input textarea{
height: 20rem;
resize: none;
}
.order form .btn {
margin-top: 0;
}
.order {
padding-bottom: 20px;
}
.footer .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap: 1.5rem;
text-align: center;
}
.footer .box-container .box{
padding: 5rem 0;
font-size: 2.5rem;
color: var(--black);
}
.footer .box-container a{
display: block;
padding: 5rem 0;
font-size: 1.5rem;
color: var(--light-color);
text-decoration: none;
}
.footer .box-container a:hover{
color: black;
text-decoration: none;
}
.footer .credit {
text-align: center;
border-top: .1rem solid rgba(0,0,0,.1);
font-size: 2rem;
color: var(--black);
padding: .5rem;
padding-top: 1.5rem;
margin-top: 1.5rem;
}
.footer .credit span {
color: black;
}
.footer {
background: #fbe7d7;
}
\\\\ Order CSS \\\\\
.order .sub-heading {
color: white;
}
.order .heading {
color: white;
}
.catering {
color: #d45a28;
text-align: right;
font-size: 20px;
padding-top: 40px;
padding-right: 10px;
font-weight: bold;
font-family: 'Times New Roman';
}
#media (max-width:991px){
html {
font-size: 55%;
}
header{
padding: 1rem 2rem;
}
section{
padding: 2rem;
}
}
#media (max-width:850px){
.about {
display: block;
text-align: center;
padding-bottom: 900px;
}
.content {
text-align: end;
}
.catering {
text-align: center;
}
p .share {
text-align: center;
}
.about .row .image img {
display: block;
position:absolute;
padding-top: 150px;
justify-content: center;
height: auto;
margin-right: 10px;
}
.share{
padding-left: 5000px;
}
}
#media (max-width:800px){
header .icon #menu-bars{
display: inline-block;
}
header .navbar {
position: absolute;
top: 100%; left: 0; right: 0;
background: #a8b98a;
border-top: .1rem solid rgba(0,0,0,.2);
border-bottom: .1rem solid rgba(0,0,0,.2);
padding: 1rem;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
header .navbar.active{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
header .navbar a{
display: block;
padding: 1.5rem;
margin: 1rem;
font-size: 2rem;
background: #eee;
}
.image {
display: block;
text-align: center;
}
.about .row .image img{
height: auto;
width: 40%;
margin-left: 200px;
}
.home .home-slider .slide .content h3{
font-size: 5rem;
}
.about h3{
text-align:center;
font-size: 2rem;
}
}
#media (max-width:400px){
html {
font-size: 50%;
}
.dishes .box-container .box img {
height: auto;
width: 100%;
}
.order form .inputBox .input {
width: 100%;
}
.about {
display: block;
text-align: center;
}
.content {
text-align: end;
}
.catering {
text-align: center;
}
p .share {
text-align: center;
}
.about .row .image img {
display: block;
position:absolute;
padding: 200px 0 200px 0;
justify-content: center;
height: auto;
margin-right: 1000px;
}
}
Please check this https://www.w3schools.com/css/css3_mediaqueries.asp for learning CSS responsiveness and media queries.
Also check this one please: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
So I have my personal website and I have paragraphs within it. When viewed on a large screen it looks fine however on a phone it is in a single column and I would like to fix that. I have a screen shot with what I mean and a code pen with the code. I have tried using #media screen and (mad-width:) however it does not help.
#media only screen and (max-width: 500px) {
.masthead {
padding: 3em 0;
}
#media screen and (max-width: 600px) {
.column-left {
display: none;
}
}
#media screen and (max-width: 1800px) {
.button {
display: none;
}
}
.masthead-heading {
font-size: 3em;
}
.content-footer {
padding: 2em 2.5em;
}
}
.about,
.about-content,
.skills,
.skills-content,
.title::after,
.text {
color: white;
}
.navbar {
background-color: #ac5fdb;
color-scheme: 100%;
}
.content-footer {
padding: 2px 0;
text-align: center;
background-color: #ac5fdb;
color-scheme: 100%;
text-decoration: none;
max-height: 2000px;
}
.footer-text {
padding-bottom: 70px;
}
.content-footer>p {
color: grey;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
html {
scroll-behavior: smooth;
background-color: #1e2029;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* all similar content styling codes */
section {
padding: 100px 0;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
.about,
.services,
.skills,
.teams,
.contact,
footer {
font-family: "Poppins", sans-serif;
}
.about .about-content,
.services .serv-content,
.skills .skills-content,
.contact .contact-content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
section .title {
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 60px;
padding-bottom: 20px;
font-family: "Ubuntu", sans-serif;
}
section .title::before {
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: #1e2029;
transform: translateX(-50%);
}
section .title::after {
position: absolute;
bottom: -8px;
left: 50%;
font-size: 20px;
color: #ac5fdb;
padding: 0 5px;
background: #1e2029;
transform: translateX(-50%);
}
/* navbar styling */
.nav-link {
color: #fff;
}
.navbar {
position: fixed;
width: 100%;
z-index: 999;
padding: 30px 0;
font-family: "Ubuntu", sans-serif;
transition: all 0.3s ease;
}
.navbar.sticky {
padding: 15px 0;
background: #ac5fdb;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .logo a span {
color: #ac5fdb;
transition: all 0.3s ease;
}
.navbar.sticky .logo a span {
color: #fff;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
display: block;
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #ac5fdb;
}
.navbar.sticky .menu li a:hover {
color: #ffff;
}
/* menu btn styling */
.menu-btn {
color: #fff;
font-size: 23px;
cursor: pointer;
display: none;
}
.scroll-up-btn {
position: fixed;
height: 45px;
width: 42px;
background: #ac5fdb;
right: 30px;
bottom: 10px;
text-align: center;
line-height: 45px;
color: #fff;
z-index: 9999;
font-size: 30px;
border-radius: 6px;
border-bottom-width: 2px;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.scroll-up-btn.show {
bottom: 30px;
opacity: 1;
pointer-events: auto;
}
.scroll-up-btn:hover {
filter: brightness(90%);
}
/* home section styling */
.home {
display: flex;
background: url("/Files/banner.jpg");
height: 90vh;
color: #fff;
min-height: 90vh;
background-size: cover;
background-attachment: fixed;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
width: 100%;
display: flex;
}
.home .max-width .row {
margin-right: 0;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: #ac5fdb;
font-weight: 500;
}
.home .home-content a {
display: inline-block;
background: #ac5fdb;
color: #fff;
font-size: 25px;
padding: 12px 36px;
margin-top: 20px;
font-weight: 400;
border-radius: 6px;
border: 2px solid #ac5fdb;
transition: all 0.3s ease;
}
.home .home-content a:hover {
color: #ac5fdb;
background: none;
}
/* about section styling */
.about .title::after {
content: "who I am";
}
.about .about-content .left {
width: 45%;
}
.about .about-content .column-left img {
height: 400px;
width: 400px;
object-fit: cover;
border-radius: 6px;
}
.about .about-content .right {
width: 55%;
}
.about .about-content .right .text {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
}
.about .about-content .right .text span {
color: #ac5fdb;
}
.about .about-content .right p {
text-align: justify;
}
.about .about-content .right a {
display: inline-block;
background: #ac5fdb;
color: #fff;
font-size: 20px;
font-weight: 500;
padding: 10px 30px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid #ac5fdb;
transition: all 0.3s ease;
}
.about .about-content .right a:hover {
color: #ac5fdb;
background: none;
}
/* skills section styling */
.skills .title::after {
content: "what i know";
}
.skills .skills-content .column {
width: calc(50% - 30px);
}
.skills .skills-content .left .text {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.skills .skills-content .left p {
text-align: justify;
}
.skills .skills-content .left a {
display: inline-block;
background: #ac5fdb;
color: #fff;
font-size: 18px;
font-weight: 500;
padding: 8px 16px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid #ac5fdb;
transition: all 0.3s ease;
}
.skills .skills-content .left a:hover {
color: #ac5fdb;
background: none;
}
.skills .skills-content .right .bars {
margin-bottom: 15px;
}
.skills .skills-content .right .info {
display: flex;
margin-bottom: 5px;
align-items: center;
justify-content: space-between;
}
.skills .skills-content .right span {
font-weight: 500;
font-size: 18px;
}
.skills .skills-content .right .line {
height: 5px;
width: 100%;
background: lightgrey;
position: relative;
}
.skills .skills-content .right .line::before {
content: "";
position: absolute;
height: 100%;
left: 0;
top: 0;
background: #ac5fdb;
}
.skills-content .right .html::before {
width: 100%;
}
.skills-content .right .css::before {
width: 90%;
}
.skills-content .right .js::before {
width: 75%;
}
.skills-content .right .php::before {
width: 70%;
}
.skills-content .right .mysql::before {
width: 50%;
}
/* services section styling */
.contact {
background-color: #1e2029;
}
.title,
.head,
.text {
color: #fff;
}
.services,
.teams {
color: #fff;
background-color: #1e2029;
}
.services .title::before,
.teams .title::before {
background-color: #1e2029;
color: #ffff;
}
.services .title::after,
.teams .title::after {
background: #111;
content: "what I've made";
}
.services .serv-content .card {
width: calc(33% - 20px);
background: #222;
text-align: center;
border-radius: 6px;
padding: 50px 25px;
cursor: pointer;
transition: all 0.3s ease;
}
.services .serv-content .card:hover {
background: #ac5fdb;
}
.services .serv-content .card .box {
transition: all 0.3s ease;
}
.services .serv-content .card:hover .box {
transform: scale(1.05);
}
.services .serv-content .card i {
font-size: 50px;
color: #ac5fdb;
transition: color 0.3s ease;
}
.services .serv-content .card:hover i {
color: #fff;
}
.services .serv-content .card .text {
font-size: 25px;
font-weight: 500;
margin: 10px 0 7px 0;
}
/* contact section styling */
.contact .title::after {
content: "get in touch";
}
.contact .contact-content .column {
width: calc(50% - 30px);
}
.contact .contact-content .text {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.contact .contact-content .left p {
text-align: justify;
}
.contact .contact-content .left .icons {
margin: 10px 0;
}
.contact .contact-content .row {
display: flex;
height: 15px;
align-items: center;
}
.contact .contact-content .row .info {
margin-left: 30px;
background-color: #1e2029;
}
.contact .contact-content .row i {
font-size: 25px;
color: #ac5fdb;
}
.contact .contact-content .info .head {
font-weight: 500;
}
.contact .contact-content .info .sub-title {
color: #fff;
background-color: #1e2029;
}
.contact .right form .fields {
display: flex;
background-color: #1e2029;
}
.contact .right form .field,
.contact .right form .fields .field {
height: 45px;
width: 100%;
margin-bottom: 15px;
background-color: #1e2029;
}
.contact .right form .textarea {
height: 80px;
width: 100%;
background-color: #1e2029;
}
.contact .right form .name {
margin-right: 10px;
background-color: #1e2029;
}
.contact .right form .field input,
.contact .right form .textarea textarea {
height: 70%;
width: 100%;
border: 1px solid lightgrey;
border-radius: 6px;
outline: none;
padding: 0 15px;
font-size: 17px;
font-family: "Poppins", sans-serif;
transition: all 0.3s ease;
background-color: #1e2029;
}
.contact .right form .field input:focus,
.contact .right form .textarea textarea:focus {
border-color: #b3b3b3;
background-color: #1e2029;
}
.contact .right form .textarea textarea {
padding-top: 10px;
resize: none;
background-color: #1e2029;
}
.contact .right form .button-area {
display: flex;
align-items: center;
background-color: #1e2029;
}
.right form .button-area button {
color: #fff;
display: block;
width: 160px !important;
height: 45px;
outline: none;
font-size: 18px;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
flex-wrap: nowrap;
background: #ac5fdb;
border: 2px solid #ac5fdb;
transition: all 0.3s ease;
}
.right form .button-area button:hover {
color: #ac5fdb;
background: none;
}
.fa-twitter,
.fa-github,
.fa-linkedin {
color: white;
}
.navbar-toggler-icon {
color: #ac5fdb;
}
.about,
.skills {
background-color: #1e2029;
}
#media (max-width: 991px) {
.services .max-width {
padding: 0;
}
.services .serv-content,
.services .serv-content .card {
width: 100%;
}
}
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://kit.fontawesome.com/3263ba6030.js" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/3263ba6030.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Edward Wynman</title>
<link rel="icon" type="image/x-icon" href="Files/PFP.jpg">
</head>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Edward Wynman</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="courses.html">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Projects</a>
<li class="nav-item">
<a class="nav-link" href="/Files/Resume.pdf">Resume</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<body>
<section class="home">
<div class="jumbotron text-center">
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Edward Wynman</div>
<div class="text-3">And I'm a <span class="typing">
<script>
$(document).ready(function () {
// typing text animation script
var typed = new Typed(".typing", {
strings: ["Student", "Developer", "Engineer"],
typeSpeed: 100,
backSpeed: 60,
loop: true
});
var typed = new Typed(".typing-2", {
strings: ["Student", "Developer", "Engineer"],
typeSpeed: 100,
backSpeed: 60,
loop: true
});
});
</script>
</span></div>
Email Me!
</div>
</div>
</section>
</section>
<section class="about" id="about">
<div class="max-width">
<h2 class="title">About me</h2>
<div class="about-content">
<div class="column-left" id="pic">
<img src="/Files/PFP.jpg" alt="">
</div>
<div class="column right">
<div class="text">I'm Eddie and I'm a <span class="typing-2"></span></div>
<p>At the age of <strong>thirteen</strong> I started programming and have taught myself a thing or two since then. Topics that interest me are <strong>web development,
UX Design , and Software Engineering </strong>Now, I'm a Computer Science student at
<strong> Montclair State University </strong>. I am currently seeking 2023 Summer internship opportunities in Software Engineering and Web Development. I am also pursuing a minor in <strong>Data Science</strong> This website showcases some
of <strong>my
abilities and skills.</strong>
</p>
Download Resume
Read More
</div>
</div>
</div>
</section>
<section class="skills" id="skills">
<div class="max-width">
<h2 class="title">My skills</h2>
<div class="skills-content">
<div class="column left">
<div class="text">My Skills</div>
<p>Over the years I have taken a lot from the classes I have taken and they have led me to a specfic set of skills. I am proficcient in Java, Python, C, JavaScript, HTML, CSS, PHP, Adobe Creative Suite Apps, and I am proficcient in MS Office products
as well.
</p>
Read more
</div>
<div class="column right">
<div class="bars">
<div class="info">
<span>Java</span>
<span>100%</span>
</div>
<div class="line html"></div>
</div>
<div class="bars">
<div class="info">
<span>Python</span>
<span>90%</span>
</div>
<div class="line css"></div>
</div>
<div class="bars">
<div class="info">
<span>JavaScript</span>
<span>80%</span>
</div>
<div class="line js"></div>
</div>
<div class="bars">
<div class="info">
<span>HTML | CSS </span>
<span>70%</span>
</div>
<div class="line php"></div>
</div>
<div class="bars">
<div class="info">
<span>PHP</span>
<span>50%</span>
</div>
<div class="line mysql"></div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="content-footer">
<section class="footer-text">
<strong>Say hi to me on these social networks:</strong>
</section>
<ul class="social">
<i class="fab fa-twitter fa-2x mr-3"></i>
<i class="fab fa-github fa-2x mr-3"></i>
<a href="https://www.linkedin.com/in/edward-wynman/" target="_blank"><i
class="fab fa-linkedin fa-2x mr-3"></i></a>
</ul>
</footer>
</body>
You need to remove the width: 50%; on .about .about-content .right using a media query. The reason it's rendering like that is that it's using 50% of the available space on mobile, which is not much.
Could look something like this:
#media only screen and (max-width: 800px) {
.about .about-content .right {
width: 100%;
}
}
Here you go...
Add the following:
#media only screen and (max-width: 768px) {
.about .about-content .right {
width: 100% !important;
}
}
Hey in your codepen you made a mistake. The max-width needs to go from wider screens to smaller ones and not the oposite way, because, as the lower value in the page will always overwrite the further up ones, your media queries will never be met.
Put the max-width media queries at the end of the css or at least after the element you want to have a different style on smaller screens.
Then start with the highest number (max-width="1800px") and end with the lowest one (max-width="500px").
so:
//default (bigger than 993px)
.class {
font-size: 10px;
}
//992px and smaller
#media screen and (max-width:992px){
.class {
font-size: 20px;
}
}
//767px and smaller
#media screen and (max-width:767px){
.class {
font-size: 24px;
}
}
//600px and smaller
#media screen and (max-width:600px){
.class {
font-size: 32px;
}
}
Just like Cervus and Kameron have pointed out
.about .about-content .right {width: 100%}
is your main fix, then the next issue is the padding left and right on your max-width class because of
box-sizing: border-box
it will render 100% and then remove 80px of space on either side. If viewed on a small device it will be removing to much of the available space for example on 320px wide screen half the available space would be removed.
.max-width {padding: 0 80px}
Might be better being
.max-width {padding: 0 20px}
And then at a larger media query it can update to 80px when it fits.
While developing my website I have came across a problem with my footer and form. My footer seems to be appearing through the form on devices but not on the computer and I'm sure this could be issues with widths of devices? So I kept trying to fix it and still haven't been able to fix it. I'm still learning as I go along and I would be grateful if someone could help me get rolling with my website again. code snippets and images below, kindest regards, Caelan.
body {
background-color: black ;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3{
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a{
text-decoration: none;
}
.gallery{
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content{
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius:10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: .4s;
background-color: whitesmoke;
}
.content:hover{
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: .6s;
}
.productcard-image{
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p{
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6{
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card{
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list{
padding: 5px;
}
.fa{
color: #ff9f43;
font-size: 26px;
transition: .4s;
}
.fa:hover{
transform: scale(1.3);
transition: .6s;
}
.productcardbutton{
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border:0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1{
background-color: #2183a2;
}
.buy-2{
background-color: #3b3e6e;
}
.buy-3{
background-color: #0b0b0b;
}
#media(max-width: 1000px){
.content{
width: 46%;
}
}
#media(max-width: 750px){
.content{
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
margin-bottom: -60vh;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type=submit]{
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type=submit]:hover{
background: rgb(19, 41, 238);
}
#media screen and (max-width:600px) {
.form1{
width: 90%;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this
christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li>Home</li>
<li>Products</li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right">About Us</li>
</ul>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br>
<form action="">
<input type="email" name="email" id="email" placeholder="Enter your email">
<input type="text" name="name" id="name" placeholder=" Enter your name">
<textarea name="message" id="message" cols="30" rows="10" placeholder="Enter your message here"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo" ></a>
</div>
<p class="website__rights">© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved</p>
<div class="social__icons">
</div>
</div>
</section>
</div>
</body>
</html>
I've adjusted the css to remove the height and margin on the containers:
body {
background-color: black;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: "Courier New", Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span
>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li>Home</li>
<li>Products</li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right">About Us</li>
</ul>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br />
<form action="">
<input
type="email"
name="email"
id="email"
placeholder="Enter your email"
/>
<input
type="text"
name="name"
id="name"
placeholder=" Enter your name"
/>
<textarea
name="message"
id="message"
cols="30"
rows="10"
placeholder="Enter your message here"
></textarea>
<input type="submit" value="Send" />
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo"
/></a>
</div>
<p class="website__rights">
© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved
</p>
<div class="social__icons"></div>
</div>
</section>
</div>
</body>
</html>
I'm using margins for my form but when I am testing the responsive layout the distance between the navigation bar increases if the screen width is a greater size. Therefore, I have also tried auto height but it still has a big gap between the navigation bar and the form.
I have also tried #media screen.
I had help yesterday with a similar problem to this, but now I'm encountering another one as its not with the footer but with the form itself.
I would kindly like to ask for help, and if you find a solution explain the changes so I can also learn from it! Kindest regards, Caelan : ).
body {
background-color: black;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: "Courier New", Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
margin-top: -200px;
height: auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
margin-top:-250px;
height: auto;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span
>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li>Home</li>
<li>Products</li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right">About Us</li>
</ul>
</div>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br />
<form action="">
<input
type="email"
name="email"
id="email"
placeholder="Enter your email"
/>
<input
type="text"
name="name"
id="name"
placeholder=" Enter your name"
/>
<textarea
name="message"
id="message"
cols="30"
rows="10"
placeholder="Enter your message here"
></textarea>
<input type="submit" value="Send" />
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo"
/></a>
</div>
<p class="website__rights">
© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved
</p>
<div class="social__icons"></div>
</div>
</[![section][1]][1]>
</div>
</body>
</html>
I analyzed your code. You have just to remove the height: 100vh from your .container.
The next step is to remove the margin-top: -250px from your .form1. then it should look good.
Bonus Tip: the unit vh stands for viewport-height (browser height). so 100vh is 100% of the viewport height.
First problem is the "about myself" (home_about_box), doing something that will not allow me to put it on top of an image. I think it has something to do with the margin, but I have not found a solution.
Second problem is that the images in the Portfolio section (portfolio_home), will not touch each other, it leaves a blank space between the pictures.
Last problem is with having a horizontal scrollbar on the bottom of my page. I have searched for a solution, but not found any.
If you have any solution, I would appreciate you posting the code and an explanation, as I am quite new to this!
Cheers! Any constructive feedback is well appreciated!
HTML
<section class="home.about">
<div class="about.bg">
<div class="home_about_box">
<h1>About Myself</h1>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
</div>
</div>
</section>
<section class="portfolio_home" id="portfolio">
<h1>Some of my work</h1>
<figure class="port-item">
<!-- Portfolio 1 -->
<img src="https://i.imgur.com/eBRYWII.png" alt="portfolio item"/>
<figcaption class="port-desc">
<p>Geofilters</p>
</figcaption>
</figure>
<!-- Portfolio 2 -->
<figure class="port-item">
<img src="https://i.imgur.com/gAfgliA.png" alt="portfolio item"/>
<figcaption class="port-desc">
<p>Quixz eSports</p>
</figcaption>
</figure>
<!-- Portfolio 3 -->
<figure class="port-item">
<img src="https://i.imgur.com/IjoGmUT.png" alt="portfolio item"/>
<figcaption class="port-desc">
<p>3D Renders</p>
</figcaption>
</figure>
<!-- Portfolio 4 -->
<figure class="port-item">
<img src="https://i.imgur.com/4zymXa8.png" alt="portfolio item"/>
<figcaption class="port-desc">
<p>Backgrounds</p>
</figcaption>
</figure>
</section>
<section class="cta">
<div class="container">
<h1 class="title title-cta">Want to see more?
<span>Then what are you waiting for?</span>
</h1>
See More
</div>
</section>
CSS
* {
box-sizing: border-box;
transition: all ease-in-out 250ms;
}
body {
margin: 0;
font-family: "Lato", sans-serif;
text-align: center;
}
img {
max-width: 100%;
height: auto;
padding: 1em .5em 0;
background-size: cover;
}
.container {
width: calc(100%-4px);
margin: 0 auto;
}
/* Header
========= */
header {
position: absolute;
width: 100%;
}
nav ul {
margin: 0;
padding: 1em 0;
list-style: none;
}
nav li {
display: inline-block;
margin: .5em
}
nav a {
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
font-size: .9rem;
padding: .5em;
color: #FFF;
}
nav a:hover,
nav a:focus{
color: #DDD;
}
#media (min-width: 60rem) {
.logo{
float: left;
text-align: center;
align-content: center;
}
nav{
float: right;
text-align: center;
margin-right: 1em;
}
}
/* Buttons
========== */
.button_top {
display: inline-block;
font-size: 1.3rem;
text-decoration: none;
text-transform: uppercase;
border-width: 2px;
border-style: solid;
border-color: #174FC1;
padding: .5em 1em;
color: #FFF;
}
.button_top:hover,
.button_top:focus {
background: #174FC1;
color: #FFF;
}
.button_dark {
display: inline-block;
font-size: 1.3rem;
text-decoration: none;
text-transform: uppercase;
border-width: 2px;
border-style: solid;
border-color: #FFF;
padding: .5em 1em;
color: #FFF;
margin-bottom: 1em;
}
.button_dark:hover,
.button_dark:focus {
background: #FFF;
color: #000;
}
#media (min-width: 25rem) {
.button_top {
font-size: 1.7rem;
padding: .3em 1em
}
}
#media (min-width: 60rem) {
.button_top {
font-size: 2.4rem;
padding: .3em 1em;
margin-top: -1em;
}
}
#media (min-width: 25rem) {
.button_dark {
font-size: 1.7rem;
padding: .3em 1em
}
}
#media (min-width: 60rem) {
.button_dark {
font-size: 2rem;
padding: .3em 1em;
}
}
.clearfix::after,
section::after,
footer::after{
content: "";
display: block;
clear: both;
}
/* Typography
========= */
.title {
font-size: 2rem;
margin-bottom: 1.6em;
margin-top: 5em;
}
.title span {
font-weight: 300;
display: block;
font-size: 1.3rem;
}
.title-cta {
margin: 0 0 1em;
}
#media (min-width: 60rem) {
.title{
font-size: 4rem;
margin-top: 1.5em;
}
}
h1 {
font-weight: 800;
margin-top: 0;
}
.unstyled-list {
margin: 0;
padding: 1.3em;
list-style-type: none;
text-align: left;
}
/* Home.hero
========= */
.home-hero {
background-image: url(https://i.imgur.com/yUFKqAe.jpg);
background-size: cover;
background-position: center;
padding: 1em;
color: #FFF;
width: 100vw;
height: 100vh;
}
#media (min-width: 25rem) {
.home-hero{
width: 100vw;
height: 100vh;
}
}
#media (min-width: 60rem) {
.home-hero{
width: 100vw;
height: auto;
}
}
#media (min-height: 30rem) {
.home-hero{
width: 100vw;
height: 100vh;
}
}
/*Home About */
.home_about_box {
background-color: #232323;
font-size: .8em;
padding: 4em;
outline: 2px solid #174fc1;
outline-offset: -3em;
color: #FFF;
position: relative
}
.home_about_box h1 {
color: #174fc1;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.3em;
background: #232323;
padding: 0 0.5em
}
#media (min-width: 25rem) {
h1 {
font-size: 1.6rem;
}
.home_about_box h1 {
top: 1.3rem;
}
}
#media (min-width: 60rem) {
h1 {
font-size: 1.2rem;
}
.about.bg {
background-image: url(https://i.imgur.com/aTF2hwR.jpg);
padding: 5em;
}
.home_about_box {
font-size: .8em;
width: 25em;
margin: 0;
}
.home_about_box h1 {
top: 1.5rem;
}
}
/* portfolio
*/
.portfolio_home {
margin: 1.8em 0 0;
background-size: cover;
}
.portfolio_home h1 {
color: #174FC1;
font-size: 3em;
margin: auto;
padding: 0 0 .3em 0;
}
.port-item {
margin: 0;
position: relative;
}
.port-item img {
display: block;
}
.port-desc {
position: absolute;
z-index: 100;
bottom: 0em;
left: 0em;
right: 0em;
color: #FFF;
background: rgba(0,0,0,.75);
padding-bottom: 1em;
padding-top: 1em;
}
.port-desc p {
margin: .5em;
background-size: 100% 100%;
}
#media (min-width: 40rem) {
.port-item {
width: 50%;
float: left;
}
}
#media (min-width: 60rem) {
.port-item {
width: 33.3333334%;
float: left;
overflow: hidden
}
.port-desc {
transform: translateY(150%);
}
.port-item:hover .port-desc {
transform: translateY(0%)
}
}
/* CTA
*/
.cta{
background-color: #174fc1;
padding: 0.1em;
}
.cta h1 {
margin-top: 1em;
color: #FFF
}
/* Footer */
footer {
background: #232323;
color: #FFF;
}
Firstly you need to minimize the codepen like the this you don't need everything in it.
First Problem:-
For the first issue make sure your z-index is greater than the element overlapping it in your case it's .port-desc giving a z-index of 100 so you need something more than 100.
.home_about_box {
background-color: #232323;
font-size: 0.8em;
padding: 4em;
outline: 2px solid #174fc1;
outline-offset: -3em;
color: #fff;
z-index: 101;
}
Second Problem:-
You need to remove the padding on left and right I assume that's what you meant when you say they are not touching.
img {
max-width: 100%;
height: auto;
padding: 1em 0.5em 0;
background-size: cover;
}
Third Problem:-
The scrollbar is due to width being 100wh, you can update the width to be 100%.
#media (min-height: 30rem) {
.home-hero {
width: 100%;
height: 100vh;
}
}