stackoom
  简体   繁体   中英

How do I make my website display properly and get my navbar to display under the logo on smaller screens? Currently shows fine on desktops

 原文  2023-01-22 13:03:03  5   1    html/ css/ optimization/ navbar/ responsive

Question

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"> <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>

<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> <a href="https://www.instagram.com/food_by_sophie/" target="_blank"> <i class="fa-brands fa-instagram"> </i> FOOD_BY_SOPHIE  </i> </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>

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

}

1 answers

solution1
 0  2023-01-22 13:07:43

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How do I make my sidebar horizontal on smaller screens? How do I get my logo and navbar on the same line? How do I get my navbar menu to line up with logo? How do I get my button to stay below my display on smaller screen sizes? HTML/CSS How do I make the display responsive for smaller screens by stacking this as a column? How do I get my CSS to display my HTML with the display grid function properly? How do I make a Navbar with my logo and differentiate with my background color? How do I make my Sticky NavBar Scroll Animate properly? Display NavBar on top of each other in smaller screens My sticky footer displays weirdly on bigger or smaller screens, how do I make these elements to scale?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM