堆栈内存溢出
  繁体   English   中英

如何让我的网站正确显示并让我的导航栏显示在较小屏幕上的徽标下方？ 目前在台式机上显示良好

[英]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  4   1    html/ css/ optimization/ navbar/ responsive

问题描述

所以我仍然是 web 开发的新手，目前正在餐厅网站上工作，但是当我在较小的屏幕上查看页面时，它无法正确显示（不显示全宽）并且导航栏完全消失了。 我怎样才能让它在较小的屏幕上正确显示并且导航栏成为切换栏或显示在徽标下方？ 我认为我当前的 CSS 设置可能是罪魁祸首。 谢谢

我已经尝试使用 CSS 进行优化，看看它是否可以在较小的屏幕上显示整个页面，并且已经能够在 iPad Air 和更大的屏幕上实现这一点，但在较小的屏幕上仍然没有运气。

如果需要，很乐意分享我的代码

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 个解决方案

解决方案1
 0  2023-01-22 13:07:43

请查看此https://www.w3schools.com/css/css3_mediaqueries.asp以了解 CSS 响应能力和媒体查询。

请同时检查这个： https://www.w3schools.com/css/css_rwd_mediaqueries.asp

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在较小的屏幕上水平放置侧边栏？ 如何在同一行上显示我的徽标和导航栏？ 如何让我的导航栏菜单与徽标对齐？ 在较小的屏幕尺寸上，如何让我的按钮保持在显示屏下方？ HTML / CSS如何通过将其堆叠为一列来使显示响应于较小的屏幕？ 如何让我的 CSS 用显示网格 function 正确显示我的 HTML？ 如何制作带有我的徽标的导航栏并与我的背景颜色区分开来？ 如何正确制作我的 Sticky NavBar Scroll 动画？ 在较小的屏幕上将 NavBar 显示在彼此之上 我的粘性页脚在较大或较小的屏幕上显示异常，如何使这些元素缩放？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM