Question

Здравствуйте, я делаю новый сайт, но есть проблема, которую я не могу решить.

это URL-адрес веб-сайта: https://inspiring-mayer-4c86b6.netlify.com/

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

Хорошо работает на P C и на экранах 1920x1080px. Я подумал, что важно сделать его отзывчивым, и я попробовал несколько способов сделать его отзывчивым, но кнопки на навигационной панели go вне экрана, когда я открываю веб-сайт с моего iPhone XS Max.

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

/ ---- Это мой индекс. html код .--- /

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"/>    
<title>EFPC | Welcome</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=divice-width, initial-scale=1.0">

    
<!--Style-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--Style-->    

    
    
    
<style>    

    
    body {
        background-color:#0b0c10;
        margin: 0;
        padding: 0;
        font-family:helvetica;
        
    }
    
    img {
     
    }
    
    marquee {

    }
    
    button {
  background-color:#0b0c10;  
  color:white;
  border:none;
  box-shadow: 1px 1px 1px 2px #63c91d;
  border-radius: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: all 0.5s;
  cursor: pointer;
 
    }
    
    button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

button:hover span {
  padding-right: 25px;
}

button:hover span:after {
  opacity: 1;
  right: 0;
}
    
    
    
    .navbar {
        position: fixed;
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        background-color:#0b0c10;
        Width:100%**;
        height: 70px;
        z-index: 1;
        border-bottom: 2px solid white;
        border-radius: 20px;
    }
    
    .nav {
        display:flex;
        justify-content: right;
        list-style:none;
        padding-right: 250px;
        
    }
    
    .logo {
        flex:1 1 auto;
        margin-left: 10%;
        text-transform: uppercase;
        text-shadow: 1px 1px 1px 1px ;
        letter-spacing: 1px;
        font-weight: bold;
        font-size:35px;
       text-shadow: -1px -1px 5px rgba(99, 201, 29, 1),   
                    1px -1px 5px rgba(99, 201, 29, 1),
                   -1px 1px 5px rgba(99, 201, 29, 1),
                    1px 1px 5px rgba(99, 201, 29, 1);
        
    }
    
    html {
        scroll-behavior: smooth;
    }
    
	
		a {
    color: #000;
    text-decoration: none;
	text-transform: uppercase;
	margin: 0;
    
    }
    
    
    a:hover{
        color: #000;
    }
    .banner-area {
        position: relative;
        height: 100px;
        
    }
    
    .about-area, .products-area, .service-area, .contact-area {
        position:relative;
        display:flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap:wrap;
        flex-direction: row;
        width: 100%;
        height: 700px;
    }
    .text-part {
        width: 65%;
        height: 80%;
    }
    h1 {
        font-size: 50px;
        font-family: helvetica;
    }
    p{
        font-size: 24px;
        line-height: 50px;
    }

    input {
  background-color:#d4d7de;  
  border:none;
  box-shadow: 1px 1px 1px 2px #596173 ;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: all 0.5s;
  cursor: pointer;
  height: 50px;
  width: 85px;
    }
      button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

button:hover span {
  padding-right: 25px;
}

button:hover span:after {
  opacity: 1;
  right: 0;
}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
 
}



/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}    

@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css"; 
    
   
    
</style>



</head>
<body>
     
     <div class="navbar">
       <a class="logo" style="color:white;">EFPC</a>
         
         <ul class="nav">
   
             
     <a href="index.html" class="button"><button class="button" style="height:50px; text-transform: uppercase; width: 85px;  "><span><li><strong>Home</strong></li></span></button></a>
             
     <a href="#about"><button class="button" style="height:50px; text-transform: uppercase; width: 85px;  "><span><li><strong>About</strong></li></span></button></a>
             
     <a href="#products"><button class="button" style="height:50px; text-transform: uppercase; width: 120px;  "><span><li><strong>products</strong></li></span></button></a>
             
    <a href="#services"><button class="button" style="height:50px; text-transform: uppercase; width: 120px; margin-right: 0px; "><span><li><strong>services</strong></li></span></button></a>
             
     <a href="contact.html" style="width: 100px;"><button class="button" style="height:50px; text-transform: uppercase; width: 100px; margin-right: 50px;"><li><span><strong>contact</strong></li></span></button></a>
    
     <a href="#home" style="margin-left: 100px;" class="button"><button class="button" style="height:50px; text-transform: uppercase; width: 85px; "><span><li><strong>Login</strong></li></span></button></a>
             
    <a href="#home" class="button"><button class="button" style="height:50px; text-transform: uppercase; width: 85px; m"><span><li><strong>Sign up</strong></li></span></button></a>              
         
    </ul>
     </div>
    
    <div class="banner-area" id="home"></div>
      <div class="text-part">
        
          <section class="leftpane" style="border:solid; border-radius: 10px; border-color: white; width:75%; height: 100%; float: left;">
              <h1 style="color:white; text-align: center; font-size:40px;  text-shadow:
                    -1px -1px 5px rgba(99, 201, 29, 1),   
                    1px -1px 5px rgba(99, 201, 29, 1),
                   -1px 1px 5px rgba(99, 201, 29, 1),
                    1px 1px 5px rgba(99, 201, 29, 1); " >NEWS</h1>
<!-- Slideshow container -->
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-ef5db8e0-d439-47e7-a3df-53e0daaa7e65"></div>
          </section>
    </div>
    <section class="rightpane" style="color:white; float:right; border:solid; border-radius: 10px; width:51%; height: 100%; display:inline-block;"> <h1>Welcome to EFPC!</h1><p> The website is under development , stay tuned for new updates everyday! Best regards,  
        <em><br> ~  The EFPC team ~</em></p></section>
    
        
   
   
    <div class="about-area" id="about"></div>
          <div class="text-part">
         <h1>About Us</h1>
         <p>Welcome to our website, here you can read some information about us.</p>
    </div>


</body>
</html>

/ --- Это мой стиль. css код --- /

  header {
 
    }
    
    body {
        background-color: white;
        margin: 0;
        padding: 0;
        font-family:helvetica;
        
    }
    
    img {
     
    }
    
    marquee {

    }
    
    button {
  background-color:#d4d7de;  
  border:none;
  box-shadow: 1px 1px 1px 2px #596173 ;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: all 0.5s;
  cursor: pointer;
    }
    
    button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

button:hover span {
  padding-right: 25px;
}

button:hover span:after {
  opacity: 1;
  right: 0;
}
    
    
    
    .navbar {
        position: fixed;
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        background-color:#d4d7de;
        Width:100%;
        height: 70px;
        z-index: 1;
    }
    
    .nav {
        display:flex;
        justify-content: right;
        list-style:none;
        padding-right: 250px;
    }
    
    .logo {
        flex:1 1 auto;
        margin-left: 10%;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: bold;
        font-size:35px;
        color:
    }
    
    html {
        scroll-behavior: smooth;
    }
    
	
		a {
    color: #000;
    text-decoration: none;
	text-transform: uppercase;
	margin: 0;
    
    }
    
    
    a:hover{
        color: #000;
    }
    .banner-area {
        position: relative;
        height: 100px;
        
    }
    
    .about-area, .products-area, .service-area, .contact-area {
        position:relative;
        display:flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap:wrap;
        flex-direction: row;
        width: 100%;
        height: 700px;
    }
    .text-part {
        width: 65%;
        height: 80%;
    }
    h1 {
        font-size: 50px;
        font-family: helvetica;
    }
    p{
        font-size: 24px;
        line-height: 50px;
    }

    input {
  background-color:#d4d7de;  
  border:none;
  box-shadow: 1px 1px 1px 2px #596173 ;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: all 0.5s;
  cursor: pointer;
  height: 50px;
  width: 85px;
    }
      button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

button:hover span {
  padding-right: 25px;
}

button:hover span:after {
  opacity: 1;
  right: 0;
}
  /* Media Section */
  
  @import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css"; 
    
@media screen and (max-width: 600px) {
/* Stylings for all devices with screens with a width of 600px or less.*/
}
@media screen and (max-width: 992px) {
/* all screens with a max width of 992px or less */
}
@media screen and (min-width: 992px) {
/* all screens with a width of 992px or higher */ 
}

`@import url('mainstyles.css');`

Любая помощь будет оценена, спасибо!

Alex Leo · Answer 1 · 26 января 2020

Если вы осмотрите сайт в консоли Google, вы заметите, что вы задали свой @ media-запрос несколько раз. Некоторые из запросов являются пустыми, и я думаю, что их синтаксис неправильный, так как Chrome жалуется на неизвестное имя свойства. Я считаю, что правильный синтаксис должен быть

@media only screen and (min-width: 600px)...

Если вы осмотрите свою HTML голову, вы найдете стиль CSS после

<!--Style-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--Style-->

Удалите все медиазапросы и прошлые следующее:

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Затем пометьте класс nav следующим:

 <ul class col-10 col-s-7 nav>

Приведенное выше значение является только ориентировочным.

Вы увидите, что при изменении размера навигационная панель будет реагировать.

Обратите внимание, что в игре есть запас - насколько я вижу - для этого может потребоваться некоторая полировка.

Обратите внимание, что мои инструкции предназначены для отладки - если вы довольны результатами, вы должны переместить запросы в ваш файл. css.

Забыл упомянуть, это может быть полезно read - также посмотрите Bootstrap или Foundation для лучшей отзывчивости веб-сайта.

Мой сайт не реагирует на небольшие устройства

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Мой сайт не реагирует на небольшие устройства

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы