Jak rozróżnić wygląd nagłówka w mobile i wersji na komputer

[sirmystic]

Z racji mojej niemocy i wielokrotnych prób postanowiłem zapytać czy ktoś posiada rozwiązanie mojej dzisiejszej zagadki. 

 

Mianowicie chciałbym rozróżnić wygląd nagłówka który wyświetla się na urządzeniach mobilnych oraz zwykłych laptopach czy pc-tach. Edytując już pobrany szablon w wordpresie wykonałem obrazek nagłówka przy pomocy programu photoshop, który w przeglądarce na PC-cie wyświetla się perfekcyjnie - tzn. widać go w założonym przez mnie rozmiarze i proporcjach. Ta sama kwestia dotyczy także Tytułu witryny oraz jej opisu - oba parametry mogę edytować bezpośrednio z poziomu personalizacji szablonu.

 

Jednak jeżeli wyświetlam stronę na swoim telefonie obrazek nagłówka jest kompletnie ucięty, widać tylko jego część. 

 

Moje pytania są następujące:

W jaki sposób mogę wyłączyć wyświetlanie się Tytułu oraz opisu w przypadku wyświetlenia strony na urządzeniu mobilnym ?

Co zrobić aby obraz nagłówka był wyświetlany poprawnie w urządzeniach mobilnych. 

 

[jimmi]

Zmienić dodać odpowiednie wpisy w odpowiednim pliku coś. Niestety bardziej dokładnie teraz się nie da. Ogólnie w plikach CSS szablonu zmieniasz wygląd.

Wysłane z telefonu

 

 

 

 

[tasslehoff]

Przy pomocy media queries ustawiasz aby do np. szerokości okna wynoszącej 480px nie był wyświetlany obrazek (dispaly: none).

 

A co do poprawnego wyświetlania nagłówka na urządzeniach mobilnych to musisz popracować nad responsywnością strony, nie ma jednej porady, która to spowoduje.

[semtak]

Prawdopodobnie szablon jest zakodowany na sztywne wartości lub je sam ustaliłeś dlatego obrazek źle się skaluje. Jeżeli to możliwe staraj się używać np. wartości %. A zmiany przy różnych rozdzielczościach to tak jak tasslehoff  napisał zrobisz to za pomocą media queries.