Elementy szersze niż okno - CSS

Gdy sprawdzam swoją witrynę za pomocą przeglądarki Safari na smartfonie (iPhone) lub MacBooku, niektóre elementy mojej witryny są szersze niż okno przeglądarki, np. the body -tag. Sprawdziłem stronę za pomocą narzędzia deweloperskiego i wydaje się, że zaczyna się na szerokości 600 pikseli i poniżej. Nie widzę tego problemu w Chrome.Elementy szersze niż okno - CSS

Możesz zobaczyć zrzut ekranu tutaj i zobaczyć, że okno ma szerokość 375px, ale body -tag ma 439px szerokości.

jestem stosowania tej zasady CSS ponieważ czytałem to powinno rozwiązać problem, ale to nie jest dla mnie, niestety.

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

Oto strona mówię: http://www.firma-info.no

Mam nadzieję, że ktoś ma radę dla mnie.

Z góry dzięki!

Źródło

2017-02-08 dahlsdata-tahira

Może używać 'display: flex' razem z właściwością 'flex-wrap' Właściwość: http://cssreference.io/property/flex-wrap/ – elementzero23

Musisz podać ** minimalny przykład działania **, aby replikować problem tutaj w pytaniu. Dodawanie linków do zewnętrznych stron jest bezużyteczne, ponieważ pytanie staje się niejednoznaczne po rozwiązaniu problemu. Opublikuj swój znacznik i arkusz CSS (minimalna kwota wymagana do odtworzenia zachowania) tutaj. – BenM

@BenM Chciałbym dodać przykład, który pokazuje problem, ale jeśli dodaję mój znacznik w jsfiddle lub codepen problem nie występuje. Ale wciąż jest tam na mojej stronie internetowej. Czy masz porady dotyczące sposobu, w jaki mogę replikować ten problem? –

ja testuje na Firefox na pulpicie w Responsive View

Ale odkryłem, że chmury w tle. x1, .x2 etc. powoduje, że okno ma większą szerokość niż oczekiwano. Jest tak w przypadku, gdy chmury są pod koniec ich animacji.

Po prostu overflow: hidden; do #page wykonuje zadanie.

Nie wiem, czy to na pewno powoduje twój problem, ale może i tak pomóc. Chciałbym

Polecam również przy użyciu transformaty tłumaczyć przenieść chmury zamiast margines wewnątrz animacji.

Źródło

2017-02-15 11:06:36

Dziękuję bardzo! To rozwiązało problem. –

Można to łatwo naprawić, wprowadzając funkcję bootstrap lub ustawiając szerokość na wartość procentową, a nie na piksel.

Bootstrap ma specjalne klasy div dla rozmiaru kolumny, które dostosowuje się do wielkości ekranu i jest dość łatwe do wdrożenia

CZYLI

<div class="col-xs-2 col-sm-2"></div> 
      <div class="col-sm-8 col-xs-12" align="center" id="content">

trzeba zaimplementować to w tagu głowy dokumentu

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Źródło

2017-02-16 17:23:07

To może naprawić problem, ale nie wierzę, że w tym 2 pliki javascript i duże ramy + nieprawidłowe html __align = "center" __ pasuje do tego problemu. –

Przykro nam, że możesz dodać 2 takty w lewo i w prawo, gdy jest średnie, aby je wyśrodkować, gdy strona jest duża i po prostu pozostaw je puste. –

dać przepełnienie-x: hidden na tagu ciała w css

Źródło

2017-02-22 06:54:49 ashfaqrafi

Elementy szersze niż okno - CSS

Odpowiedz

Powiązane problemy