Niechciany suwak poziomy - "rozlany element", obraz na 100% wysokości i szerokości, responsywność niektórych elementów

Question

Cześć.

Od jakiegoś czasu tworzę stronę internetową - www.oceanfreeride.com, z której jestem bardzo zadowolony. Jednak jest kilka problemów, z którymi się borykam, a których nie potrafię sam rozwiązać. Dopiero się uczę html i css, więc często korzystam z elementów gotowych i nie zawsze potrafię je później ogarnąć.

1. Wygląda na to, że któryś z elementów "rozlał" mi się i przez to pojawił się suwak poziomy, który na dobrą sprawę niczego nie ukrywa poza kawałkiem szarego tła. W jaki sposób odnaleźć który to element?

2. Po załadowaniu się strony pierwszym elementem jest obraz na całą jej szerokość i wysokość. Na komputerze wygląda spoko, jednak ze smartfonami mam problem. Dodałem właściwość, żeby w pionie wyświetlało inny obraz niż w poziomie, a w poziomie chciałbym, żeby ten zwykły był po prostu skalowany i najlepiej zawsze na 100% wysokości i szerokości ekranu.. Jednak ani jeden, ani drugi nie wyświetla się dobrze.

3. Belka nawigacyjna na smartfonach zamienia się w rozwijane menu, które w niektórych sytuacjach wyświetlane jest na równi z tekstami strony, a nie przed nimi oraz nie ma tła. Dzieje się tak kiedy zamiast użyć przycisku "Start" sami zjedziemy odrobinę w dół.

4. Minigalerie z kotwicami, blokami i workami nie mają za grosz responsywności, przez co na telefonach nie są dobrze wyświetlane. Domyślam się, że problem leży w tym, że w css mam podane wartości w pixelach, jednak jeszcze nie potrafię tego naprawić.

Gdyby ktoś wiedział jak rozwiązać któreś z tych problemów, albo w jak to opisać po angielsku, żeby znaleźć wyjaśnienie w googlach, to byłbym wdzięczny.

Pozdrawiam

Answer 1

Element, który Ci się „rozlał”, to zdjęcia.

<div class="col-sm-3">
          <div class="folio-item wow fadeInLeftBig animated" data-wow-duration="1000ms" data-wow-delay="400ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 400ms; animation-name: fadeInLeftBig;">
            <div class="folio-image">
              <img class="img-responsive" src="images/portfolio/Stary/stary2-maly.JPG" alt="">
            </div>
            <div class="overlay">
              <div class="overlay-content">
                <div class="overlay-text">
                  <div class="folio-info">
                    <h3>s/y Stary</h3>
                    <p>North-West Passage 2006</p>
                  </div>
                  <div class="folio-overview">
                    <span class="folio-link"><a class="folio-read-more" href="#" data-single_url="portfolio-stary.html"><i class="fa fa-link"></i></a></span>
                    <span class="folio-expand"><a href="images/portfolio/Stary/stary2.JPG" data-lightbox="portfolio"><i class="fa fa-search-plus"></i></a></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

Oraz na niższych rozdzielczościach film na yt.

Co do reszty:

Źle zaimplementowałeś elementy z bootstrapa.

Odpal konsolę i tam zacznij edytować kod. Nie będą to trwałe zmiany, a będziesz widział jaki jest skutek.

Powinno się przydać:

~ http://getbootstrap.com/css/#grid