Привет, я новичок в веб-дизайне, создаю свой первый веб-сайт. Но у меня проблема с моей навигационной панелью заголовка, она отлично работает на рабочем столе, но когда я сжимаю консоль, фон для навигационной панели перестает растягиваться по всей ширине. Теперь я еще не делал медиа-запросы для мобильных и планшетных версий, у меня вопрос, есть ли у меня дефекты в коде, поэтому почему фон навигационной панели не растягивается, или я смогу исправить это с помощью новых правил медиа-запросов?

Мой HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css">
        <title>Document</title>
    </head>
    <body>
        <div class="container">
            <div class="nav-wrap">
               <nav class="navbar">
                   <div class="nav-logo">
                       <div id="logo">
                           <a href="index.html"></a>
                       </div>
                       <div id="site-name">
                           <h1>Trans-Atheist</h1>
                           <p>Ignorance Is Never Bliss</p>
                       </div>
    
                   </div>
                   <div class="nav-buttons">
                       <div class="button">
                          <a href="index.html" class="menu-item">Home</a>
                       </div>
                       <div class="button"> 
                          <a href="about.html" class="menu-item">About</a>
                       </div>
                       <div class="button">
                          <a href="videos.html" class="menu-item">Videos</a>
                       </div>   
     
    
                   </div>
    
               </nav>
            </div>
        </div>
      


        <div class="container">
            <div class="content">
                <div class="colunm1">
                    <div class="links">
                       <h1>Links</h1>
                       <a href="https://www.patreon.com/trans_atheist?fan_landing=true">
                        <img src="images/patreon.png" alt="this is a patreon image" width="260px" height="200px">
                       </a>

                       <a href="">
                           <img src="images/discord.png" alt="This is a discord link" width="260px" height="200px">
                       </a>

                       <a href="">
                           <img src="images/youtube.jpg" alt="This is a link to Youtube Channel" width="260px" height="200px">
                       </a>
                    </div>
                </div>
                <div class="colunm2">
                    <div class="section">
                        <h1 class="centre">About me and what i do</h1>
                         <p class="centre">I am a Ex-jw content creator and activist. 
                            I make youtube videos, including rebuttals and debunking 
                            of teachings. My aim is to help as many people  as possible 
                            to leave and wake up from religious indoctrination.
                         </p>
                         <p class="centre">Hello, i am creating videos and podcasts, enlightening people to the destructive power of cults, i see myself and others like me as educators. I do not believe in money and power, but i do need to support myself while i do this work
                            Jehovahs Witnesses Have some very destructive teachings. I want to explore and pull apart at those teachings.</p>
                        
                         <p class="centre">It would mean the world to me if you were to support me on patreon, Please find the link to my patreon on the side bar to the left on desktop and the dropdown menu above for mobile. Please also see the links to my other content like discord server and youtube.</p>   


                         <div class="video">
                            <div id="last-vid" class="vid-indiv">
                                <h3>Ex-jw My sexual abuse, waking up, and disfellowshipping by Trans-Atheist</h3>
                                <iframe width="560" height="315" src="https://www.youtube.com/embed/9-EbGF-Obhg" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                         </div>
                    </div>
                </div>
                <div class="colunm3">
                     <div class="ad-sec">
                         <h1>Ad Section</h1>
                     </div>
                </div>
            </div>
        </div>



        <div class="container">
            <div class="footer">
                <a href="index.html">Home</a>
                <p>Trans-Atheist</p>
                <p>Remember Ignorance Is Never Bliss</p>
                <p>Email: katysykes420@gmail.com</p>
            </div>
        </div>        
        
    </body>
    </html>

Мой css

*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

body{
    background-color: rgb(61, 59, 59);
    width: 100%;
}

.container-header{
    background-color: rgba(84, 14, 150, 0.568);
    background-size: 100%;
    width: 100%;    

}


.nav-wrap{
    background-color: rgba(84, 14, 150, 0.568);
    background-size: 100%;
    width: 100%; 
}

.navbar{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 40px;

}

.nav-logo{
    display: flex;
    flex-wrap: wrap;
}

#logo{
    background-image: url('/images/default.png');
    background-repeat: no-repeat;
    width: 150px; 
    height: 150px; 
    object-fit: contain;
    padding: 10px;
    margin: 10px;
}

.site-name h1{
    padding: 10px;
    margin: 10px;
}
.nav-buttons{
    display: flex;
    flex-wrap: wrap;
}

.button{
    padding: 10px;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.5s;
    text-transform: uppercase;
    height: 42px;
}

.button a{
    color: gold;
    text-decoration: none;
    transition: color 0.5s;
}

.button:hover{
    border-bottom: 1px solid gold;
}

.button a:hover{
    color: rgb(230, 215, 132);
}

h1, p, h3{
    color: gold;
}



.content{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

.colunm1, .colunm2, .colunm3{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.colunm1{
    border-right: 1px solid indigo ;
}

.colunm3{
    border-left: 1px solid indigo;
}

.centre{
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.links > a > img{
    margin-bottom: 30px;
}

.vid-indiv{
    padding-top: 40px;
}

#last-vid{
    padding-bottom: 90px;
}

.footer{
    background-color: rgba(84, 14, 150, 0.568);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
0
katy sykes 24 Ноя 2020 в 23:24

1 ответ

Лучший ответ

Проблема не в навигаторе, а в видео. Поскольку он имеет фиксированную ширину в HTML, весь .content переполняется при уменьшении экрана.

В будущем попробуйте комментировать разные разделы кода за раз, чтобы выяснить, в чем заключаются проблемы. Мне также нравится использовать временные цветные границы на элементах, чтобы четко видеть, как они себя ведут.

0
DonSeverino 24 Ноя 2020 в 22:47