• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Object Storage Arubacloud
0 głosów
275 wizyt
pytanie zadane 8 października 2016 w HTML i CSS przez Sarev Nowicjusz (120 p.)

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

1 odpowiedź

+1 głos
odpowiedź 8 października 2016 przez HaKIM Szeryf (87,590 p.)
edycja 8 października 2016 przez HaKIM

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

Podobne pytania

0 głosów
1 odpowiedź 2,307 wizyt
pytanie zadane 1 maja 2016 w HTML i CSS przez patryk11441 Obywatel (1,150 p.)
0 głosów
1 odpowiedź 323 wizyt
pytanie zadane 1 lipca 2017 w HTML i CSS przez Marcin Łogwinowicz Nowicjusz (200 p.)
0 głosów
1 odpowiedź 183 wizyt
pytanie zadane 9 maja 2020 w HTML i CSS przez rob Bywalec (2,440 p.)

92,681 zapytań

141,583 odpowiedzi

320,070 komentarzy

62,041 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...