Click here to Skip to main content
15,921,577 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
*New to coding and desperately need some help*
My site looks great on desktop but when opened within a smaller screens (mobiles & some tablets) there's excess space on the right side of the page. And also the navbar completely disappears. Any suggestion on how I can get rid of the excess space and show the navbar on smaller screens? Have included my code :) Thanks

HTML
<pre><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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"
  />
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"
  ></script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <link
    href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@500;700&display=swap"
    rel="stylesheet"
  />
  <link
  rel="stylesheet"
  href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap" rel="stylesheet">
  <script
    src="https://kit.fontawesome.com/a56b22975c.js"
    crossorigin="anonymous"
  ></script>
  <link rel="stylesheet" href="style.css" />
    <title>FoodbySophie Website</title>
</head>
<body>
    <div>
    <p class="catering">*Catering services available for hire</p>
    
    <header>
        <img class="shop-logo w-55" src="/FBS LOGO.png" loading="lazy" width="100" height="100" >
    
        <nav class="navbar navbar-default">
            
           <div class="hover-underline-animation"> <a href="#menu">Menu</a> </div>
            <div class="hover-underline-animation"><a href="#order">Order</a></div>
            <div class="hover-underline-animation"><a href="#location">Location</a> </div>
            <div class="hover-underline-animation"><a href="#contact">Contact</a></div>
        </nav>
    </header>
<div class="container">
<section class="about" id="about">
    <div class="row">
        <div class="image">
            <img src="FBS_ISLAND GIRL_.png" alt="">
        </div>
        <div class="content">
            <h3>
              "Authentic    <br>    Caribbean  <br>  Cuisine" 
            <br> jus lik momma use tah mek it  
            </h3>
        </div>
    </div>
    <p class="share"> Like, Follow `n Share <br> <a href="https://www.instagram.com/food_by_sophie/" target="_blank">   FOOD_BY_SOPHIE   </a> </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>
    
    <section class="footer">
        <div class="box-container">
            <div class="box">
                <h3>
                    Location
                </h3>
                <a href="">1-15 Wine St <br> Tuesday and Friday <br> 11am - 14.30</a>
            </div>
    
          
            <div class="contact box" id="contact">
                <h3>
                   Contact Info
                </h3>
                <a href="">07447345269</a>
                <a href="">Foodbysophie@gmail.com</a>
            </div>
            <div class="box">
                <h3>
                   Follow Us
                </h3>
                <a href="https://www.instagram.com/food_by_sophie/" target="_blank">Instagram</a>
    
            </div>
    
        </div>
        <div class="credit"> Copyright @ 2023 by <span> Stella-Maris Ojideh</span></div>
    </section>
</div>
    <div class="loader-container">
        <img src="loader-gif.gif" alt="">
    </div>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <script src="script.js"></script>
    
</body>
</html>



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);
}

html {
    font-size: 62%;
    scroll-padding-top: 5.5rem;
    scroll-behavior: smooth;
    margin: auto;
    padding: 0;
}


.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; 
        
    }

    .container {
        overflow: hidden;
    }

    .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;
            margin: 0;
            padding: 0;
          }
          

.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: white;
        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:800px){
    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;
    }
    .about h3{
        text-align:center;
        font-size: 2rem;
    }
}


What I have tried:

Have tried playing around with the media quierirs. Managed to get it working on iPad Air sized scren (820px)
Posted
Updated 22-Jan-23 11:43am

1 solution

I am not seeing excessive space on the right, however, you have a few issues, like the disappearing navbar. To fix this issue:

1. CSS Section markers:
CSS
\\\\ Order CSS \\\\\

should be:
CSS
/* \\\ Order CSS \\\\ */


2. If using position: absolute; you need to set position: relative; on the parent element.

3. Top, Left, Right, Bottom properties only work within a position: absolute;.

4. clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); is hiding your navbar.

So, to fix the above issues, you need to make the following changes:
CSS
header {
    position: relative;
    background: #a8b98a;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* \\\ Order CSS \\\\ */

media (max-width:800px){
    header .navbar {
        position: absolute;
        background: #a8b98a;
        border-top: .1rem solid rgba(0,0,0,.2);
        border-bottom: .1rem solid rgba(0,0,0,.2);
        padding: 1rem;
    }
}

There are other issues however this fixes the disappearing navbar.

As for the space on the right, It might be your loader. I have that set to display: none; so I could see your page.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900