• 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

VPS Starter Arubacloud
0 głosów
265 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,258 wizyt
pytanie zadane 1 maja 2016 w HTML i CSS przez patryk11441 Obywatel (1,150 p.)
0 głosów
1 odpowiedź 291 wizyt
pytanie zadane 1 lipca 2017 w HTML i CSS przez Marcin Łogwinowicz Nowicjusz (200 p.)
0 głosów
1 odpowiedź 172 wizyt
pytanie zadane 9 maja 2020 w HTML i CSS przez rob Bywalec (2,440 p.)

92,452 zapytań

141,262 odpowiedzi

319,077 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...