Grafika na tablecie i telefonie

[barthy]

Witam...
Na stronie mam duży obrazek w position: fixed.
Na monitorze wygląda OK, ale... na tablecie, gdy powiększam tekst, obrazek zasłania całą przestrzeń i tekstu nie widać.

Czy jest jakiś sposób, aby ta fotka nie wyświetlała się na tabletach i innych sprzętach mobilnych?
Czy jest może jakieś inne rozwiązanie?

strona to: http://modameska-artur.pl/site/

Chodzi o tego Pana po prawej stronie

Temat dosyć pilny. Czekam na odpowiedź.

[Heyek]

Cześć, spróbuj dopisać do obrazka wysokość i szerokość w %.
Zmień z:
<img class="facet" src="/site/images/man.png"/>

Na:
<img style="width: 30%; height: 100%;" class="facet" src="/site/images/man.png"/>

Podałem przykładowe dane. Musisz pokombinować. Jak tak ustawisz to obrazek będzie się zwiększał lub zmniejszał od wielkości ekranu/przybliżenia.

[barthy]

Faktycznie...
Nie wiem dlaczego na to nie wpadłem

[Kartofelek]

dał byś jakieś min-width dla strony bo przy malych rozdzielczościach kolo zasłania menu

[barthy]

OK
Siedzi ładnie
Dzięki...

A teraz jakieś rozwiązanie pozycji "fixed" na mobilne i tablety...
Gdzieś był jakiś skrypt do tego, ale nie mogę go znaleźć...

Na IE sprawdzałem (mobilnie ofc) i fixed nie działa. Facet przesuwa się wraz ze scrollem strony.

[Kartofelek]

Olej fixed na mobilkach. Wykorzystaj css media queries i zrób dodatkowe stylowanie dla urządzeń mobilnych. Chodzi o to że jak ktoś ci telefonem ma ściągać takiego kolesia, to już nigdy nie wróci na tą stronę. Dlatego imo ja bym go wywalił.
Jeżeli jednak lubisz zabawy masochistyczne i psucie humoru innym to zawsze możesz wymusić pozycję za pomocą jQuery (oczywiście wcześniej załącz do html bilbiotekę jquery):

CSS:

Kod:

#super_kolo {position:absolute; top:0; right:0; .....}

jQuery:

Kod:

$(document).ready(function() {
     $(window).scroll(function () {
          $('#super_kolo').css({top : $(document).scrollTop()}); //to ustawi ci kola w prawym górnym rogu
     });
});

[nebruu]