我试图弄清楚为什么图片在我们的联系页面上使用Bootstrap 3的行.当我最小化谷歌浏览器上的屏幕它看起来很好,但当我在iPhone上查看页面时 - 它正在寻找像这样:

(我可以看到Stack图片上传功能不起作用.因此我链接到域--imgbb上的图片):

我想到它可能是下面的课程,搞乱了.我必须为我使用的一些核心类使用前缀,所以我不会影响整个站点.在这种情况下,我想在屏幕上显示20px页边距<768px.有人建议我将所有代码连续包装,因为容器在后端调用并具有自己的样式.

/* Make a 20px margin on mobile devices */
@media (max-width: 768px) {
        .mk .row {
            margin-left: 20px !important;
            margin-right: 20px !important;
        }
}

我希望横幅上的背景图片在移动设备上占据全宽.有没有人知道如何解决这个问题？我几乎陷入困境.

我试图找出与问题无关的代码.

.mk .row [class*="col-"] {
        padding-right: 5px;
        padding-left: 5px;
    }

    
    .mk-page-header { 
        background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url(https://vou.dk/Cms/333780ed-bd2b-4513-9186-af155e172a57.jpg)
        no-repeat; 
        position: relative; 
        background-size: cover; 
    }
    .mk .row {
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .page-caption { 
        padding-top: 170px; 
        padding-bottom: 174px; 
    }
    .page-title { 
        font-size: 46px; 
        line-height: 1; 
        color: #fff; 
        font-weight: 600; 
        text-align: center; 
    }
    
    .card-section { 
        position: relative; 
        bottom: 140px;
        margin-bottom: -80px;
    }
    .card-block { 
        padding: 20px 80px 50px 80px;
        box-shadow: 20px 20px 50px grey;
        background-color: #fff;
    }
    .section-title { 
        margin-bottom: 40px;
    }

    .img-responsive-mk {
        width: 35% !important;
    }
   
    @media (max-width: 768px) {
        .img-responsive-mk {
            width: 100% !important;
        }
        .card-block {
            padding: 10px;
            margin-left: 10px;
            margin-right: 10px;
        }
        .page-title {
            font-size: 30px;
        }
        .mk-heading {
          font-size: 24px;
        }
        h2 {
            font-size: 1.5em;
        }
        h3 {
            font-size: 1em;
            text-align: center;
        }
        /* Make a 20px margin on mobile devices */
        .mk .row {
            margin-left: 20px !important;
            margin-right: 20px !important;
        }
        /* Owerwrite the core padding on a row */
        .contact-icon .row {
          margin-left: 0px !important;
            margin-right: 0px !important;
        }
        
    }

 
  

      

          

              

                  

                      
KONTAKT VORES SUPPORT
                  
              
          
      
  
  
  

      

          

              

                  

                      
HAR DU SPØRGSMÅL?
                      
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                  
                  

                      

                          

                              
                                
                              
                              
Ring til os
                          
                          

                              
                                
                              
                              
Skriv til os
                          
                          

                              
                                
                              
                              
Facebook