- Ten temat ostatnio został zaktualizowany 1 rok temu przez
.
- Wpisy
Cześć.
Zwracam się z prośbą o pomoc w rozwiązaniu takie problemu:
W motywie Ashe mam obrazek nagłówka. I jego szerokość dostosowałem do wymagań motywu. Niestety obrazek nagłówka wygląda dobrze tylko na PC i ew. tablecie. Przy podglądzie na telefon zostaje jego wysokość, ale szerokość nie dostosowuje się do rozdzielczości ekranu telefonu.
Szukałem jak to rozwiązać. i wiem że w CSS można zmienić dając przy width: albo max albo 100%.
Natomiast nie widzę gdzie mógłbym to w dodatkowym CSS wprowadzić.Hej! Dzięki za przesłanie screenów. A czy z ciekawości próbowałeś wrzucić inne obrazki w to miejsce i sprawdzić czy ten problem występuje?
Cześć.
Tak sprawdzałem dwa inne tła. Zapisałem je w zalecanej rozdzielczości i każde tak działa w wersji mobilnej. Różni się szerokością, w zależności od rozdzielczości ekranu .A czy podałbyś jeszcze adres strony? Ja niestety w tym zakresie nie umiem pomóc, ale dzisiaj dyżur będzie miał jeszcze Paweł.
Cześć Hubert,
z obrazkami można poradzić sobie na kilka sposobów.1. Jest taka właściwość @media, która działa tylko w określonych warunkach, czyli po media do dajesz warunki i wtedy wyświetla się to co masz w nawiasach{}
Poniżej link do tutorialu
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
w twoim przypadku można by było jeszcze spróbować
with: 100 vw;
Gdzie vw to szerokość okna przeglądarki zamiast 100% bo procenty mogą się odnosić do ramki, w której jest ramka z obrazkiem.2. Zdjęcia w css można wyświetlać w ramce na różne sposoby i podejrzewam, że tu jest problem
object-fit – odpowiada jak wyświetlają się obrazki
fill — jest to ustawienie domyślne. Rozmiar obrazu jest zmieniany tak, aby wypełnić zadany wymiar. W razie potrzeby obraz zostanie rozciągnięty lub zgnieciony w celu dopasowania
contain — Obraz zachowuje swoje proporcje, ale jest zmieniany w celu dopasowania do podanego wymiaru
cover – Obraz zachowuje proporcje i wypełnia zadany wymiar. Obraz zostanie przycięty w celu dopasowania
none — rozmiar obrazu nie jest zmieniany
scale-down — obraz jest skalowany w dół do najmniejszej wersji „brak” lub „zawieranie”.
Poniżej link do tutorialu na stronie są strzałki next i prev znajdziesz tam więcej przykładów.
https://www.w3schools.com/css/css3_object-fit.aspSpróbuj
object-fit: cover;Fajne, że jest prevka, ale z niej nic nie wyczytam musiałbym zobaczyć kod na stronie lub wordpress’a wtedy można by było więcej napisać.
Daj znać, czy pomogło
Pozdrawiam,
PawełCześć,
Jeszcze nie, jestem w trakcie sprawdzania wszystkich podpowiedzi. Kilku rzeczy muszę się też nauczyć, bo nie jestem biegły w CSS i HTML dlatego zajmuje mi to więcej czasu.Puki co zrobiłem to co w czerwonej ramce. I nie działa, tzn to jak ja to zrobiłem nie działa. Bardzo prawdopodobne jest to, że robię coś źle.
Jeżeli jest jakaś możliwość @Paweł Zieliński abyś mógł spojrzeć na kod, to ja bardzo chętnie.
Nie jestem tak dobra w CSS, ale zanim w poniedziałek przyjdzie Paweł, spojrzałam na ten kod i masz tak: width: 100vw; !important, a średnik musi być po important!, bo on zamyka width. Tak samo przy object-fit. Jak to poprawisz, to kod “zobaczy” !important i będzie nadpisywał to, co napisałeś. Może to jest powód 🙂
Dzięki Kaja,
sokole oko 😉
Myślę że to jest to.Zawsze jednak jak walczę z nie swoim kodem, to wrzucam zapytanie do chatGPT i opisuję czego dokładnie potrzebuję.
ChatGPT większości przypadków podaje dobre rozwiązanie, a jak się myli to przynajmniej naprowadza na rozwiązanie.Daj znać czy rada Kaji pomogła.
Pozdrawiam,
PawełP.S.
Będę śledził wątek, to się odezwę wcześniej, jak by co 😉Popracowałem, także z GPT
finalnie mam takie kody w CSS
@media screen and (max-width: 550px) {
.entry-header {
width: 100vw !important;
height: auto !important;
object-fit: cover !important;
}
}@media screen and (max-width: 690px) {
.entry-header {
width: 100vw !important;
height: auto !important;
object-fit: cover !important;
}
}Ale też nie działa.
Na smartfonie jak za duże było tak zostałoCześć Hubert,
może selektory są za “słabe” w linku masz grafikę jak to działa.
https://i.pinimg.com/736x/3c/54/9f/3c549fc74cc673352205451656af611a–coding-starwars.jpgCzyli nie samo “.entry-header” tylko trzeba zobaczyć co jest przed i po i to dopisać.
Możesz zawsze dodać id
czyli id=”ala-bala-cala”
id – może być tylko jedno o takiej nazwie na stronie (czytaj – mogę używać id do różnych elementów, ale każde musi być inne)
Wtedy odwołujesz się do niego przez “#”
czyli
#ala-bala-cala
Przykład:
#ala-bala-cala.entry-header div p {
}Zainstalowałem motyw Ashe, żeby zobaczyć co się tam dzieje.
Jak się wejdzie wWygląd > Dostosuj
To tam znajdują się ustawienia nagłówka, na samej górze pod obrazkami jest film jak tego używać, oraz jest opis:
———–
Kliknij „Dodaj obrazek”, aby przesłać plik z komputera. Motyw działa najlepiej, jeśli wielkość nagłówka obrazka wynosi 1300 × 500 pikseli — po załadowaniu obrazek będzie można przyciąć tak by idealnie pasował.
———–
Zamiast kombinować z wpisami css stwórz obrazek o wymiarach 1300x500px, i zobacz czy wszystko działa. Na filmie, jest informacja, żeby obrazek ustawiać w pozycji góra-środek, nie wiem czy jest to w wersji darmowej ale jak podmienisz sam obrazek, to te ustawienia powinny zostać niezmienione.
Zrób tak aby na obrazku wszystko co ważne było bliżej środka i góry.Paweł bardzo dziękuję za pomoc. Wróciłem do ustawień nagłówka. Obrazek nagłówka miał dobre rozmiary, natomiast to co zepsuło wygląd na smartach to wyświetlanie Sloganu. Wyłączyłem to i już wyświetla się poprawnie.
Jeszcze raz bardzo serdecznie dziękuję za pomoc i każdą podpowiedź !
- UWAGA! Forum tylko dla studentek i studentów Interaktywnej Akademii WordPressa Musisz się zalogować by odpowiedzieć w tym temacie.
