Biały margines przy zmianie rozdzielczości - responsywnosc

pytanie zadane 20 sierpnia 2017 w HTML i CSS przez Alcomats Użytkownik (580 p.)

Witam mój problem polega na tym, że gdy zmniejszam rozdzielczość strony do 526px, to po prawej stronie pojawia sie biały margines. Próbowałem w head,body wpisać overflow-x: hidden; jednak wtedy pojawia mi się drugi pasek przewijania. Ktoś może miał taki problem ?

Strona : https://alcomats.github.io/omnifood/

Kod: https://github.com/Alcomats/omnifood

3 odpowiedzi

odpowiedź 21 sierpnia 2017 przez mitelak Pasjonat (23,330 p.)
wybrane 21 sierpnia 2017 przez Alcomats

Najlepsza

Dodawałem odpowiedź, ale nie wiem dlaczego jej nie widzę dlatego napiszę jeszcze raz :)

Problem leży w .footer-paragraph-2:after a dokładniej w jego stałej szerokości 500px. Wystarczy wraz ze zmianą rozdzielczości, albo pozbyć się tego ozdobnika, albo po prostu jego szerokość ustawić procentowo :)

komentarz 21 sierpnia 2017 przez Alcomats Użytkownik (580 p.)

Faktycznie! Jak mogłem tego nie widzieć,że ta wartość jest " sztywna ". Dzięki wielkie , problem rozwiązany!

odpowiedź 21 sierpnia 2017 przez Adam Klepacz Początkujący (440 p.)

Napisze także i tu bo wydaje mi się że znalazłem błąd i pomoże to pewnie innym bo sam miałem taki problem kiedyś.
Dodaj container ponad "rows". Jak poniżej:

 <footer class="footer">
     <div class="container">
            <div class="row">
                <ul class="footer-nav">
                    <li class="footer-nav-element"><a href="#" class="footer-nav-btn">About us</a></li>
                    <li class="footer-nav-element"><a href="#" class="footer-nav-btn">Blog</a></li>
                    <li class="footer-nav-element"><a href="#" class="footer-nav-btn">Press</a></li>
                    <li class="footer-nav-element"><a href="#" class="footer-nav-btn">iOS App</a></li>
                    <li class="footer-nav-element"><a href="#" class="footer-nav-btn">Android App</a></li>
                </ul>
                <ul class="footer-socials">
                    <li class="footer-socials-element"><a href="#" class="social-links"><span class="ion-social-facebook" aria-hidden="true"></span></a></li>
                    <li class="footer-socials-element"><a href="#" class="social-links"><span class="ion-social-twitter" aria-hidden="true"></span></a></li>
                    <li class="footer-socials-element"><a href="#" class="social-links"><span class="ion-social-googleplus" aria-hidden="true"></span></a></li>
                    <li class="footer-socials-element"><a href="#" class="social-links"><span class="ion-social-instagram" aria-hidden="true"></span></a></li>
                </ul>
            </div><!-- end of .row -->
            <div class="row">
                <div class="footer-text-box">
                    <p class="footer-paragraph-1">This webpage was created by <span class="my-name">Paweł Wojkiewicz.</span></p>
                    <p class="footer-paragraph-2">Build with <span class="ion-heart heart-icon" aria-hidden="true"></span> in the beautiful city Venlo, Netherland July 2017. </p>
                </div>
            </div><!-- end of .row -->
          </div><!-- end of .container -->
        </footer>

W nawiązaniu do dokumentacji bootstrapa.

Rows - czyli rzędy zawsze muszą być umieszczone pomiędzy znacznikami zawierającymi klasę container. Rows posiadają po obu stronach marginesy ujemne przez co układ strony rozjeżdza się.

Jeśli pomogłem proszę głosik do góry :)

odpowiedź 20 sierpnia 2017 przez turtelian Obywatel (1,760 p.)

dziwne u mnie dziala normalnie bez maginesu, przynajmniej przy zabawie oknem na pccie

komentarz 20 sierpnia 2017 przez Alcomats Użytkownik (580 p.)

nawet jak zmniejszysz ponizej tej wartosci ? to nie masz białego paska-marginesu obok ?

komentarz 20 sierpnia 2017 przez turtelian Obywatel (1,760 p.)
edycja 20 sierpnia 2017 przez turtelian

przepraszam faktycznie ponizej pewnej rozdzielczosci pojawia sie margines, zle popatrzylem

@media only screen and (max-width: 526px) {
 +    
 +    .work-step-list {
 +        width: 70%;
 +        margin: 40px auto;
 +    }

problem musi lezec tu jako ze nie przegladnalem calego kodu to dokldnie nie wiem , ale podejrzewam ze margin powinien byc bez tych 40 px (moge sie mylic jestem jeszcze poczatkujacym)