Portfolio- problem z responsywnością strony - scrollSpy

Question

Witam serdecznie, napisałem stronę z użyciem bootstrapa pojawiły się jednak 2 problemy z responsywnością strony. Link do repozytorium: https://github.com/frozenfroggie/frozenfroggie.github.io/tree/master/Portfolio . Link do strony: https://frozenfroggie.github.io/Portfolio/

1. Przy kliknięciu na element nawigacyjny strona przewija się do diva o określonym ID, jednakże fixed navbar zasłania istotne elementy (mianowicie nagłówki- "PORTFOLIO" oraz "CONTACT").

Próbowałem poradzić sobie z tym problemem poprzez pobranie pozycji top danego diva i zapisanie w zmiennej a następnie dodanie do zmiennej 30px. Później zmienną posyłałem jako argument do funkcji scrollTo (plugin autorstwa Ariela Fleslera), zamiast podawac ID diva. Dzięki czemu otrzymałem oczekiwany rezultat lecz oczywiście responsywność szlag trafił..

2. Chciałem żeby zdjęcie po prawej stronie było wyśrodkowane w pionie więc użyłem kodu:

#photoContainer
{
  height: 100%;
}

#photoCentered
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Jednakże przy wyświetleniu strony w mniejszym oknie, zdjęcie przeskakiwało poniżej listy "My programming skills" i następnie próbowało się wyśrodkować przez co tworzyła się duża luka między obrazkiem a innymi elementami.

PS. Oczywiście te wszystkie strony w portfolio oraz opis umiejętności to tylko moje placeholdery xD

Answer 1

Zacznij od naprawienia błędów, które wywala Bootstrap Linter.

Comments

Oooo, nie znałem wcześniej tego narzędzia. Dzięki za uwagę!

Answer 2

Pozwoliłem sobie skomentować twój kod, bo zauważyłem kilka rzeczy... ;)

<hr class="star star2"></hr>

<hr> się nie zamyka.

<div class="form-group">
                    <div class="col-lg-offset-1 col-lg-10">
                      <input type="password" class="wborder input-lg" id="inputPassword3" placeholder="Email Adress">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-lg-offset-1 col-lg-10">
                      <input type="email" class="wborder input-lg" id="inputEmail3" placeholder="Phone Number">
                    </div>
                  </div>

Nie używasz etykiet dla pól formularza. Pola formularza muszą mieć etykiety ---> <label>
http://forum.pasja-informatyki.pl/181552/ocena-strony?show=181974#c181974

Nie używasz tagów <header>, <footer>, <main> itp.

Gdzie tag <title> ?

*{
  margin: 0;
}

Czemu zerujesz marginesy wszystkich elementów skoro używasz Bootstrapa, a ten z kolei używa Normalize.css ?

body
{
  padding: 90px;
  font-family: "Lato";
  background-color: grey;
  margin: 0px;
  background-image: url("../imgs/noisy_net.png");
  position: relative;
}

• padding 90px dla body?
• marginesu nie musisz zerować dla body, bo Bootstrap to już robi

Polecam przeczytać odnośnie semantyki
http://tutorials.comandeer.pl/html5-blog.html

Comments

Łaaał, dziękuję za wszystkie uwagi, nie spodziewałem się, że społeczność programistów jest tak pomocna.