Веб-сайт черный космос в нижней части экрана на мобильном телефоне

У меня возникли некоторые большие проблемы с моим веб-сайтом, изменяющим его размер, чтобы соответствовать размеру телефона, я попробовал все там в сети и не могу найти ничего, что исправляет эту проблему.

В настоящее время у меня есть проблема, где, когда я открываю эту ссылку на моем телефоне ссылку здесь

Он помещает черное пространство внизу страницы, а затем показывает мой логотип, повторенный снова по какой-то причине.

Может ли кто-нибудь помочь с этим?

Спасибо

2 ответа

  1. .wrapInner {
    text-align: center;
    }
    .Contents>.Logo {
    margin: 15% 0 0 0;
    }
    .Contents>.SearchInput {
    margin: 0 auto;
    }
    

    Попробуйте это, чтобы начать. Вам нужно будет заменить поля на эти.

    И прекратите использовать фиксированные ширины у вас есть ширины, установленные на количество пикселей везде.

    Добавьте это к вашему телу

    body{
    width: 100%
    }
    

    вам также нужно будет настроить его в ваших Media quires.
    Затем перейдите вниз по списку и установите все ваши контейнеры с шириной 100% вместо того, что вы получили их…

  2. Я собираюсь догадаться, что это будет работать для вас, потому что это, кажется, то, что ваша проблема. Идея заключается в том, что он будет фиксировать ширину веб-страницы к ширине устройства. (Кстати, материал Lorem Ipsum Dolor просто показывает, что ширина остается такой же, как ширина устройства независимо от того, что, и высота все, что меняется.)

    var deviceWidth;
    function checkDimensions() {
      deviceWidth = window.innerwidth;
      document.getElementById('body').style.width = deviceWidth + "px";
      }
    <body id="body" onLoad="checkDimensions()">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet neque, eleifend dignissim dolor. Suspendisse aliquam enim ac gravida feugiat. Donec congue erat a dignissim egestas. Praesent accumsan risus eros, nec pulvinar ipsum aliquet id. Etiam vehicula consequat dolor at accumsan. Morbi tincidunt ac odio quis gravida. Nam dictum vel felis maximus vestibulum. Phasellus tincidunt suscipit mattis. Quisque pharetra dui a ultricies dictum.
    
    Aliquam egestas ornare ex sit amet mattis. Etiam ullamcorper libero eu tellus rutrum cursus. Aenean sit amet metus augue. Proin feugiat augue et metus porta feugiat. Duis feugiat nibh sit amet risus tempor, vel pellentesque tellus vehicula. Nunc in pulvinar ex, eget viverra est. Vivamus suscipit ante sit amet massa mattis lacinia. Nullam quis ultricies diam. Vivamus ut lacus a enim egestas imperdiet vel a mauris. Ut porttitor vitae sapien nec sodales. Donec hendrerit magna elit, vitae interdum mauris vehicula nec. Quisque at tempor odio. Nulla non maximus lacus. Vestibulum lacinia felis felis, ac feugiat lectus vehicula eu. Sed semper leo porta odio posuere interdum. Ut et enim pharetra eros commodo scelerisque sit amet sed leo.
    
    Nam lacinia ex nec faucibus mattis. Integer eget lobortis odio. Phasellus quis turpis sapien. Nam vulputate est ut enim imperdiet, id tincidunt elit tincidunt. Sed ligula tortor, lobortis et ligula quis, venenatis efficitur neque. Donec massa est, porta quis consectetur eget, accumsan vel metus. Ut ut enim sit amet orci sodales consequat. Phasellus sed purus ac tellus pellentesque tristique. Curabitur porttitor consequat varius. Donec vulputate purus pretium orci pretium laoreet. Proin ac tortor eget sem pharetra viverra. Donec finibus maximus risus.
    
    Sed suscipit lacinia leo, et fermentum sem gravida eget. Mauris at luctus nibh, at malesuada mauris. Praesent malesuada elit nec sollicitudin eleifend. Curabitur in lobortis magna. Sed dictum odio ultricies libero rhoncus pharetra. Sed vel euismod risus. Ut lobortis nibh ipsum, quis lobortis elit suscipit ut. Fusce finibus rutrum faucibus. Proin suscipit vitae nisi at imperdiet. Phasellus rutrum tortor tempor, blandit purus non, congue metus. Donec sodales lacus ut magna dapibus consequat. Pellentesque consectetur ante in elit varius pulvinar.
    
    Morbi mollis velit sed nibh tristique pretium. Aenean consequat velit vel auctor vestibulum. Nam erat ex, molestie pharetra nibh eget, venenatis bibendum tellus. Mauris malesuada tortor fringilla elit gravida, quis porta metus tincidunt. Fusce sit amet volutpat tellus. In vitae tortor id orci placerat tincidunt. Mauris velit felis, feugiat eu ante imperdiet, congue facilisis magna. Donec ultrices lacinia consectetur. Integer eu sollicitudin nisi, ac facilisis velit.
    
    Etiam egestas dolor sed sagittis viverra. In id velit pellentesque, vestibulum lectus ac, vestibulum arcu. Nullam lacinia facilisis quam, et pretium lectus fringilla nec. Vivamus efficitur mauris mi, lacinia ornare justo aliquet in. Cras massa neque, finibus nec quam ut, porta aliquet neque. Aenean efficitur dui libero, et fermentum purus lobortis a. Nulla et enim vel justo laoreet eleifend in vitae erat. Aliquam consequat nulla nunc, eu aliquet eros sollicitudin sed.
    
    Vestibulum vel ipsum nec enim rhoncus porta. In pretium, nibh ut feugiat fringilla, ante arcu tristique risus, ultricies venenatis urna urna ut eros. Fusce molestie condimentum magna, quis blandit justo viverra ac. Cras ut leo eu nisi cursus ullamcorper sit amet vitae neque. Fusce non dolor sodales, commodo enim id, sodales tortor. Nulla suscipit ornare tincidunt. Praesent vitae felis enim. Pellentesque semper velit dictum, dictum nulla vitae, finibus velit. Integer viverra orci non odio congue, et elementum justo semper. Phasellus sollicitudin elit in justo facilisis, vel facilisis tortor malesuada. Curabitur ac diam vel ligula rutrum commodo sed in est. Nunc ornare finibus dui a condimentum. Nunc faucibus commodo ipsum, eget viverra nibh.
    
    Vivamus faucibus euismod vehicula. Phasellus non congue quam. Pellentesque at tellus ut augue pharetra ullamcorper. Donec sed finibus lacus, quis bibendum purus. Etiam accumsan tristique odio, vitae accumsan est pellentesque in. Sed maximus tellus quis est tristique, quis vulputate mauris cursus. Integer venenatis sollicitudin enim eget sagittis. Mauris et sollicitudin arcu, a faucibus felis. Cras sed vehicula massa. Aliquam erat volutpat.
    
    Nunc tristique fringilla mauris eget laoreet. Nulla iaculis eros eu arcu malesuada posuere. Maecenas eleifend viverra sapien nec blandit. Duis efficitur, est eget scelerisque eleifend, eros ante dignissim velit, eu porttitor magna ligula in felis. Nullam varius efficitur faucibus. Sed sodales libero dolor, et interdum tellus venenatis ac. Morbi quis vestibulum mi, in malesuada leo. Quisque pharetra convallis dolor non euismod. Phasellus vestibulum nec massa eget eleifend. Proin sed turpis venenatis odio molestie aliquam. Nulla eu urna eu risus ultrices tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Quisque feugiat dolor turpis, eu porttitor sapien auctor eget. Aliquam iaculis diam justo, ac fermentum magna rhoncus non. Nunc facilisis accumsan fringilla.
    
    Duis blandit enim arcu, nec ultricies tellus posuere luctus. Cras sed volutpat ipsum. Vestibulum fringilla, purus sit amet pulvinar euismod, risus nisl vehicula nunc, et bibendum lectus est ac ligula. Praesent a magna sed nisl porta luctus. Praesent sollicitudin efficitur tempor. Curabitur iaculis justo eu risus tempor, vitae commodo nibh dapibus. Nunc quis interdum ex. Etiam ac velit ullamcorper massa luctus condimentum. Sed fermentum, justo non facilisis malesuada, nisi justo egestas sapien, porta maximus sapien urna ut diam. Sed egestas hendrerit diam eget porttitor. Nulla congue magna sem, id tempor lorem vestibulum eu.
    
    In placerat, mi at egestas suscipit, nisl nisl lacinia dui, eget aliquet est nibh at tellus. Maecenas in porttitor magna. Donec id orci at diam dictum semper. Curabitur consectetur interdum tellus nec efficitur. Nam iaculis justo odio, quis porta enim aliquet vitae. Vestibulum ac molestie felis. Proin eu lorem id ex ultrices accumsan et sit amet sem. Mauris sit amet neque vitae elit faucibus varius. Vestibulum nec tincidunt sapien, ac semper metus. Suspendisse a risus at nisl rhoncus porttitor vel sit amet est. Donec mattis pulvinar dui a feugiat.
    
    Duis a dolor in tellus mollis ullamcorper. Morbi dapibus maximus tortor, eu volutpat nisi dapibus quis. Nam sodales eget odio quis elementum. Fusce condimentum tellus vitae lorem rhoncus viverra. Duis quis condimentum quam. Donec vel interdum nisi, et consectetur mi. Vivamus eleifend nisl nec pulvinar fringilla. Quisque finibus, orci sit amet placerat imperdiet, sapien eros rutrum neque, efficitur vehicula lorem metus nec massa.
    
    In facilisis bibendum nisi sit amet interdum. Phasellus tellus arcu, molestie ac arcu sed, mollis consectetur eros. Aliquam dignissim vestibulum ornare. Mauris iaculis justo pellentesque leo placerat pharetra. Duis eget ornare nulla. Nam sed odio eu est malesuada bibendum. Aliquam eu ligula nibh. Suspendisse feugiat velit augue, commodo venenatis neque varius in. Maecenas vitae urna faucibus, consectetur tortor eu, pretium eros. Sed at pulvinar elit. Donec consequat ligula urna, ac tempus magna ultricies ac. Sed quis neque gravida, sodales lacus sit amet, ullamcorper arcu. In suscipit finibus nisl hendrerit finibus.
    
    Nulla nec scelerisque lacus. Donec a diam vitae lorem consectetur laoreet a ac ex. Etiam vulputate purus turpis, nec ultrices ex gravida in. Ut laoreet laoreet molestie. Cras sed sodales lorem. Etiam orci mauris, aliquet vel diam id, semper aliquet urna. Sed porta nisl ac neque finibus, ac venenatis dui consectetur. Nullam at suscipit ex, nec porttitor erat. Ut vehicula imperdiet nulla, sed auctor quam eleifend et. Proin viverra arcu sit amet erat pretium molestie. In pellentesque, diam eu vulputate maximus, sapien ante egestas magna, vitae venenatis dui magna at libero. Praesent euismod dapibus tellus at sagittis. Curabitur pellentesque augue tellus, sit amet commodo lacus tempor id.
    
    Proin pharetra laoreet purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet ex sed urna accumsan, tristique molestie magna vestibulum. Duis et odio felis. Nullam id mauris a ligula dignissim accumsan. Sed rhoncus arcu vitae iaculis pellentesque.
    
    Maecenas placerat ac ante et semper. Donec iaculis mauris in leo lobortis, vitae maximus lacus fringilla. Nunc pharetra ligula sit amet dapibus ultrices. Aliquam erat volutpat. Curabitur lobortis a eros eu laoreet. Nulla rutrum quam ipsum, a tristique ligula ornare vitae. Nunc finibus nec nunc id egestas. Suspendisse pharetra rhoncus mauris, et suscipit urna dictum ac. Nunc pretium risus nec tincidunt viverra. Phasellus nisl purus, accumsan a mi et, commodo lobortis ante. Etiam lectus dui, fermentum et lacus sit amet, luctus interdum felis.
    
    Phasellus aliquet diam dolor, sed pretium augue sollicitudin ut. Etiam fringilla diam eget libero vulputate aliquet. In tincidunt, quam dictum porta ullamcorper, nulla neque suscipit lacus, vel tempus ligula sapien a augue. Vivamus molestie a odio at tempor. Nullam id rhoncus neque. Vestibulum pellentesque commodo mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sagittis tincidunt pellentesque. Aliquam commodo risus vitae nisl facilisis dapibus.
    
    Aenean viverra eleifend ligula, eu ullamcorper tortor tristique ut. Proin dignissim elementum aliquet. Pellentesque at turpis dolor. Quisque libero leo, fringilla eu lectus et, iaculis laoreet tortor. Nulla sollicitudin metus sit amet diam pretium, eget ullamcorper nisl scelerisque. Nullam ullamcorper molestie semper. Donec sit amet nisi a nibh dignissim mattis et sed neque. Pellentesque non mi non lectus blandit fringilla. Phasellus congue facilisis dapibus.
    
    Integer sagittis orci sed tortor fermentum egestas. Vivamus ac varius nisl. Sed pulvinar rhoncus augue. Cras nec velit eleifend, lobortis augue in, cursus sem. Maecenas sed lacus pretium, consequat ipsum non, sodales nibh. Nulla et dolor vehicula elit posuere faucibus eget eget odio. Mauris eu est vel lacus consequat mollis vitae eu lacus. Sed vulputate nisi nisl, at rutrum diam volutpat quis. In augue odio, viverra et dui non, tincidunt eleifend dolor. Praesent hendrerit purus id gravida convallis.
    
    Nulla maximus quis ipsum nec fermentum. Curabitur dapibus enim vitae semper pellentesque. Maecenas lobortis lobortis magna, ut porttitor felis dignissim eget. Morbi efficitur vehicula mi, vitae cursus ex viverra sed. Etiam imperdiet odio et ligula ultricies, sit amet vulputate nibh sodales. In sollicitudin, velit quis varius molestie, velit lacus sollicitudin velit, eu congue elit felis quis arcu. Pellentesque fermentum lacus eu urna maximus placerat. Vestibulum sem magna, iaculis nec neque vel, blandit mollis ex. Suspendisse a dui tellus. Nulla facilisi. Praesent varius tristique rhoncus. Mauris sed blandit mauris. Praesent ultrices velit id diam ornare dictum.</p>
    </body>