Skalowanie strony na ekranie w całości

Dział dotyczący opisu sprawdzonych rozwiązań. Znajdziesz tutaj m. in. tutoriale Wordpress.
no avatar
saszaw90
 
Posty: 11
Reputacja: 0 pkt
Od: 3 sie 2017, o 13:38

Skalowanie strony na ekranie w całości

przez saszaw90 » 24 mar 2018, o 12:24

Witam,

pracuję nad stroną. Mam zainstalowaną wtyczkę MetaSlider. Chciałbym, aby fotografia skalowała się na ekranie w całości.

W zeszłym roku udało mi się to dokonać. Umieściłem poniższe kody i zadziałało. Z powodu braku wolnego czasu wygasł mi hosting i musiałem zrobić od nowa. Męczę już od kilku dni i nie wiem, co robię źle.

Kod: Zaznacz cały
#sticky_header {
   height: 50px;
}


W pliku header.php odwołałem też do pliku style.css i umieściłem tą linię pomiędzy <head></head>
Kod: Zaznacz cały
<link href="style.css" rel="stylesheet" type="text/css">


W tym pliku też jest:

Kod: Zaznacz cały
<div style="height: calc(100vh - 50px); object-fit: cover;">
      <?php echo do_shortcode('[metaslider id="74"]'); ?>
</div>


Moja witryna: http://wedpixels.pl

Nie chce zadziałać :( Co źle robię?
Ostatnio edytowano 27 mar 2018, o 13:14 przez saszaw90, łącznie edytowano 3 razy

Avatar użytkownika
Fibbo
Bloger
 
Posty: 222
Reputacja: 25 pkt
Od: 20 mar 2017, o 10:55

Re: Skalowanie strony na ekranie w całości

przez Fibbo » 25 mar 2018, o 14:17

Cześć,

po błędach w konsoli widać że plik style.css nie jest ładowany. Napisałeś że dodałeś do headera linkowanie arkusza kaskadowego, a ten arkusz wrzuciłeś na serwer? Poza tym zamiast dorabiać dodatkowe style.css'y i tak dalej to najlepiej utworzyć motyw potomny i to na nim wykonywać wszystkie modyfikacje. Dzięki temu przy późniejszych aktualizacjach motywu nie będzie trzeba wprowadzać zmian od zera. Ewentualnie drugim rozwiązaniem jest przejście do Wygląd -> Personalizacja -> Dodatkowy kod CSS i tam wkleić kod css.

Powodzenia! :)
I <3 Wordpress.

no avatar
saszaw90
 
Posty: 11
Reputacja: 0 pkt
Od: 3 sie 2017, o 13:38

Re: Skalowanie strony na ekranie w całości

przez saszaw90 » 25 mar 2018, o 21:15

Cześć,

plik style.css się ładuje. Jak dodam inny kod np. żeby nadać inny kolor menu, to na stronie się zmienia.

Próbowałem już opcji "Dodatkowy kod CSS" i nadal nic.

Dla mnie to dziwne, ponieważ na poprzednim hostingu napisałem identycznie ten sam kod i zadziałało. Wciąż się zastanawiam, gdzie popełniam błąd.

Avatar użytkownika
Fibbo
Bloger
 
Posty: 222
Reputacja: 25 pkt
Od: 20 mar 2017, o 10:55

Re: Skalowanie strony na ekranie w całości

przez Fibbo » 25 mar 2018, o 21:18

Obrazek
I <3 Wordpress.

no avatar
saszaw90
 
Posty: 11
Reputacja: 0 pkt
Od: 3 sie 2017, o 13:38

Re: Skalowanie strony na ekranie w całości

przez saszaw90 » 25 mar 2018, o 23:39

Miałeś rację. Coś jest nie tak z plikiem style.css. Nie jest ładowany.

Rozumiem, że te błędy wynikają z braku plików .js w motywie?

Jak rozwiązać ten problem?

Avatar użytkownika
Fibbo
Bloger
 
Posty: 222
Reputacja: 25 pkt
Od: 20 mar 2017, o 10:55

Re: Skalowanie strony na ekranie w całości

przez Fibbo » 26 mar 2018, o 10:02

Błąd wynikał ze złego podlinkowania .css'a, ale widzę że już sobie poradziłeś. :) Gratulacje!
I <3 Wordpress.

no avatar
saszaw90
 
Posty: 11
Reputacja: 0 pkt
Od: 3 sie 2017, o 13:38

Re: Skalowanie strony na ekranie w całości

przez saszaw90 » 27 mar 2018, o 13:20

Tak udało mi się. Pasek menu jest widoczne.

Wszystko fajnie, ale fotografia się nie skaluje.

Jak zmniejszę okno przeglądarki to jest taki efekt:

Obrazek

Pod fotografią jest brzydki szary pasek.

Chciałbym, żeby tak nie było.

Avatar użytkownika
Fibbo
Bloger
 
Posty: 222
Reputacja: 25 pkt
Od: 20 mar 2017, o 10:55

Re: Skalowanie strony na ekranie w całości

przez Fibbo » 27 mar 2018, o 14:17

Problem z tego typu wyświetlaniem będzie zapewne tylko na tabletach o dużej wysokości i niskiej szerokości, bo na standardowych ekranach wszystko wyświetla się poprawnie. Jest to spowodowane tym, że fotografia ma mieć pełną szerokość, a więc nie jest możliwe by poprawnie wyświetlała się na dużych wysokościach. Możesz do zmienić ustawiając dla konkretnych wysokości i szerokość (razem):
Kod: Zaznacz cały
.metaslider .slides img {
    width: auto;
}


Z tym że wtedy nie będzie widoczna cała fotografia, a zaledwie jej część. W tym momencie proponuję np. ostylować poszczególne slajdy i ustawić odpowiedni background-position, tak by przedstawiały główną część zdjęcia.

Powodzenia! :)
I <3 Wordpress.




  • Podobne tematy
    Odpowiedzi
    Wyświetlone
    Ostatni post

Powrót do Baza wiedzy Wordpress

Kto przegląda forum Wordpress

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 1 gość