• Autor
    Wpisy
  • #105531
    hubertwolanski
    Uczestniczka

    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ć.

    View post on imgur.com

    #105557

    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?

    #105558
    hubertwolanski
    Uczestniczka

    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 .

    #105559

    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ł.

    #105562
    hubertwolanski
    Uczestniczka

    Strona nie jest jeszcze dostępna. Czasu czas w budowie.

    #105565
    Paweł Zieliński
    Moderatorka

    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.asp

    Spró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ł

    • Ta odpowiedź została zmodyfikowana 11 miesięcy, 2 tygodnie temu przez Paweł Zieliński.
    #105629
    Gabriela Kurowska
    Moderatorka

    Hej, czy udał się rozwiązać problem?

    #105633
    hubertwolanski
    Uczestniczka

    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.

    #105670
    hubertwolanski
    Uczestniczka

    View post on imgur.com

    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.

    #105686
    Kaja Rzeczkowska
    Moderatorka

    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 🙂

    #105715
    Paweł Zieliński
    Moderatorka

    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 😉

    #105718
    hubertwolanski
    Uczestniczka

    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ło

    #105734
    Paweł Zieliński
    Moderatorka

    Cześć 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.jpg

    Czyli 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 {
    }

    #105840

    Hej! Czy problem udało się rozwiązać?

    #106271
    hubertwolanski
    Uczestniczka

    Cześć,
    Niestety, jeszcze nie.

    #106543
    Paweł Zieliński
    Moderatorka

    Zainstalowałem motyw Ashe, żeby zobaczyć co się tam dzieje.
    Jak się wejdzie w

    Wyglą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.

    #106589
    Kaja Rzeczkowska
    Moderatorka

    Hej hej, czy wskazówka Pawła pomogła? 🙂

    #106721
    hubertwolanski
    Uczestniczka

    Dziękuję za podpowiedź. Dziś to sprawdzę.

    #106722
    hubertwolanski
    Uczestniczka

    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ź !

    #106950
    Kaja Rzeczkowska
    Moderatorka

    Bardzo się cieszę, że wspólnymi siłami udało nam się rozwiązać ten problem 🙂