时间戳

首页 > 解决方案 > 处理导航栏和网格响应

html - 处理导航栏和网格响应

问题描述

我似乎无法解决以前不是问题的问题：

我的导航栏是全角和移动的，即使在断点上方我的网格框在移动设备上也没有响应，即使我已将其设置为 1fr 列和 (6, fr) 行。

https://codepen.io/arian-wardak/pen/QWKyzdj

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="utf-8">
    <title>Services - Quantum Marketing</title>
    <link rel="stylesheet" type="text/css" href="css/quantum.css">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>  
<nav>
    <ul>
        <li><a href="quantum.html">Home</a></li>
        <li><a  class="active" href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="account.html">Account</a></li>
        <li><a href="cite.html">Cite</a></li>
    </ul>
</nav>
<div class="grid-services">
    <div class="grid-item item-1">
        <img src=img/coding.png alt="Coding Icon" width="64" height="51">
        <h4>Web Development</h4>
        <div class="button">Choose</div>
    </div>
    <div class="grid-item item-2">
        <img src=img/search.png alt="Search Icon with a Dollar Sign" width="64" height="64">
        <h4>Search Engine Optimization</h4>
        <div class="button">Choose</div>
    </div>
    <div class="grid-item item-3">
        <img src=img/copywriting.png alt="Notepad and Pencil Icon" width=64 height=57>
        <h4>Copywriting</h4>
        <div class="button">Choose</div>
    </div>
    <div class="grid-item item-4">
        <img src=img/email.png alt="Email Icon" width=64 height=64>
        <h4>Email Marketing</h4>    
        <div class="button">Choose</div>
    </div>
    <div class="grid-item item-5">
        <img src=img/social.png alt="Social Media Icon" width=64 height=45>
        <h4>Social Media Marketing</h4>    
        <div class="button">Choose</div>
    </div>
    <div class="grid-item item-6">
        <img src=img/retargeting.png  alt="Bullseye Icon" width=64 height=64>
        <h4>Retargeting</h4> 
        <div class="button">Choose</div>
    </div>
  </div>        
</main> 
<footer> 
    Copyright © 2020 Ariana Wardak. All Rights Reserved. | Privacy Policy Disclaimer | Designed by <a href="https://www.linkedin.com/in/arian-wardak/">Ariana</a>
</footer>
</body>    
</html>    
    
* { 
    box-sizing:border-box;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    outline: none;
}

body {
    background-color: dimgray;
    color: black;
}

main {
    grid-area: main;
    text-align:center;
    overflow: hidden;
    white-space: normal;
}

h1 {
    padding: 20px;
    color: white;
    text-align: center;   
}

h3 {
    color: white;
    text-align: center;    
}

h4 {
    padding: 30px;
    color: white;
    text-align: center;    
}

.content {
    margin: 0;
    padding: 0;
    background-color: white;
    color: black; 
}

.content img {
    height: auto;
    padding-right: 20px;
    margin: 0;
}


nav {
    overflow: hidden;  
    background-color: deepskyblue;
    font-size: smaller; 
}

ul {
    display:block;
    text-decoration: none;
    text-align: center;
    list-style: none;   
    float: right;
}

li {
    float: left;
    }

li a {
    display: block;
    color: white;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    padding: 15px;    
}

li a:hover {
    background-color: deepskyblue;
}


li a.active {
    background-color: navy;
}

.hero {
    text-align: center;
    background-color: navy;
    padding: 200px 0;
}


.faq {
    padding: 50px;
}

.accordion {
    width: 90%;
    max-width: 1000px;
    margin: 2rem auto;
    min-height: 300px;
}
.accordion-item {
    background-color: #fff;
    color: #111;
    margin: 1rem 0;
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
    padding: 0.5rem 3rem 0.5rem 1rem;
    min-height: 3.5rem;
    line-height: 1.25rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.accordion-item-header::after {
    content: "\002B";
    font-size: 2rem;
    position: absolute;
    right: 1rem;
}
.accordion-item-header.active::after {
    content: "\2212";
}
.accordion-item-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
    padding: 1rem;
    line-height: 1.5rem;
    text-align: left;
    border-top: 1px solid;
    border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}


.grid-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  
    grid-template-rows: 300px 300px;
    padding: 20px;
    height: 100vh;
    grid-gap: 20px;
}

.grid-item {
    background-color: navy;
    padding: 20px;
}

button,
.button, 
.button-services, 
.button-contact {
    background-color: deepskyblue;
    display: inline-block;
    padding:10px 25px;
    margin: 15px 20px;
    font-weight: bold;
    border-radius: 5px;
    color: white;
    text-decoration: none;
}

button:hover,
.button:hover,
.button-services:hover, 
.button-contact:hover {
    background-color: dimgray;
    color: deepskyblue;
    cursor: pointer;
    transition: all 0.1s ease;
}

.faq {
    padding: 50px;
}

.accordion {
    width: 90%;
    max-width: 1000px;
    margin: 2rem auto;
    min-height: 300px;
}
.accordion-item {
    background-color: #fff;
    color: #111;
    margin: 1rem 0;
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
    padding: 0.5rem 3rem 0.5rem 1rem;
    min-height: 3.5rem;
    line-height: 1.25rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.accordion-item-header::after {
    content: "\002B";
    font-size: 2rem;
    position: absolute;
    right: 1rem;
}
.accordion-item-header.active::after {
    content: "\2212";
}
.accordion-item-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
    padding: 1rem;
    line-height: 1.5rem;
    text-align: left;
    border-top: 1px solid;
    border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}

.contact {
    max-width: 700px;
    margin: auto;
}
.form { 
   max-width: 700px;
   text-align: center;
   margin: 20px auto;
    display: grid;
    grid-template-columns: 1fr 1em 2fr;
    grid-gap: 0.3em 0.6em;
    grid-auto-flow: dense;
    align-items: center;

}    

input, label {
    display: block;
}

textarea {
    resize: vertical;
    max-height: 300px;  
}

 
.profile {
    background-color: white;
    padding: 20px;
    margin: auto;
    color: black;
    max-width: 800px;
    text-align: center;

}

.profile h4 {
    color: black;

}
    
.citations {
    background-color: white;
    padding: 20px;
    margin: auto;
    color: black;
    max-width: 800px;
    text-align: center;

}

.wrapper{
    position: relative;
    width: 500px;
    background-color: navy;
    margin: auto;
}

.profile_card{
    height: 400px;
    background: navy;
    padding: 50px 25px;
    position: relative;
    z-index: 1;
    padding: 20px;
}

.profile_card{
    color: #fff;
    text-align: center;
}

.profile_card .profile_img img{
    width: 80px;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
}

.profile_card .profile_img .name{
    font-size: 24px;
    font-weight: 500;
    margin: 15px 0 5px;
}

.profile_card .profile_img .place{
    font-size: 14px;
    font-weight: 300;
}

.profile_card .place .icon{
    margin-right: 10px;
}

.profile_icons{
    display: flex;
    margin: 30px 0;
    justify-content: center;
}

.profile_icons .profile_item{
    margin-right: 15px;
}

.profile_icons .profile_item:last-child{
    margin-right: 0;
}

.profile_icons .icon,
.profile_icons .number{
    font-size: 24px;
}

.profile_icons .title{
    font-size: 12px;
    text-transform: uppercase;
    margin: 10px 0;
}

.profile_btn{
    background-color: deepskyblue;
    padding: 10px;
    border-radius: 25px;
    width: 200px;
    margin: 0 auto;
    color: white;
    cursor: pointer;
}

.profile_btn:hover{
    background: #ffc208;
}

.settings_btn{
    width: 50px;
    height: 52px;
    position: absolute;
    bottom: 20px;
    left: 225px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.settings_btn{
    right: 0;
    box-shadow: inset 2px -2px 3px ##00bfff;
}

.settings_btn:hover{
    padding: 2px;
    background-color: dimgray;
}

.profile_slider{
    width: 325px;
    height: 400px;
    background: #fff;
    color: #7b7a82;
    position: absolute;
    top: 25px;
    left: 0;
    font-size: 14px;
    transition: bottom 0.2s ease;
}

.profile_slider li{
    height: 80px;
    border-bottom: 1px solid #eceff4;
    padding: 15px;
}

.profile_slider li:last-child{
    border-bottom: 0;
}

.profile_slider li .slider_item,
.profile_slider li .slider_left{
    display: flex;
}

.profile_slider li .slider_item{
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.profile_slider img{
    width: 35px;
    border-radius: 50%;
    margin-right: 10px;
}

.profile_slider .item{
    text-align: left;
    font-size: 12px;
}

.profile_slider .item_email{
    font-weight: 300;
    margin-top: 5px;
}

.profile_slider .btn{
    width: 100px;
    padding: 8px 10px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
}

.profile_slider .btn.btn_following{
    background: #6a60c3;
    color: #fff;
}

.profile_slider .btn.btn_following:hover{
    background: #8178d1;
}

.profile_slider .btn.btn_follow{
    border: 1px solid #7b7a82;
}

.profile_slider .btn.btn_follow:hover{
    color: #fff;
    background: #7b7a82;
}

.profile_slider.active{
    left: 100%;
}

.settings_btn.active{
    background: #00bfff;
}

.settings_btn i{
    transition: transform 0.2s ease;
}

.settings_btn.active i{
    transform: rotate(360deg);
}

.citations h4 {
    color: black;
}

footer {
    margin-bottom: 120px;
    padding: 6px;
    background-color: deepskyblue;
    color: #ffffff;
    text-align: center;
    font-size: smaller;
}

@media screen and (max-width: 400px) {

nav { 
    float: none;
}    
 
    }    
ul {   
    float: none;
}    
    
li {
    float: none;
    width: 100%; 
    padding: 0;

  }
    
.hero {
    text-align: center;
    padding: 180px 20px;  
}
        
.connect {
    margin: 0;
    background-color: white;
    color: black; 
}
  
.connect img {
    padding: 50px;
}
    
.content {
     padding: 20px 8px;
   }
 }

.grid-services {
    grid-template-columns: 1fr;
    height: auto;
    grid-template-rows: repeat(6, 1fr);  
    height: auto;
  }
    
.form {
   display: flex;
   flex-direction: row;
    color: white;
 }

.form label {
   flex: none;
   display: block;
   width: 250px;
   font-weight: bold;
   font-size: 1em;
    display: inline-block;
 }

 .form label.right-inline {
   text-align: right;  
   padding-right: 8px;
   padding-left: 10px;
   width: 300px;
 }
 
 .form .input-control {
   flex: 1 1 auto;
   display: block;
   margin-bottom: 10px;
   margin-right: 8px;
   padding: 4px;
   margin-top: -4px;
 }


footer {
    grid-area: footer;
    margin: 0;
    padding: 6px;
    background-color: deepskyblue;
    color: #ffffff;
    text-align: center;
    font-size: smaller;
}

标签： htmlcss

解决方案

您可以使用 Bootstrap 类navbar；它已经定义了断点，因此您可以在较小的网页尺寸下拥有一个漂亮的网格框。

推荐阅读