Krzysztof zapytał 7 lat temu Witam
Mam stronę praktycznie na ukończeniu, ale pojawił się nieoczekiwanie pewien problem z responsywnością a właściwie to chyba ze skalowaniem.
Mam (na stronie głównej) układ ze zdjęciem po lewej stronie i jedną kolumną tekstową po prawej stronie zdjęcia. Aby to wyglądało tak jak sobie to wymyśliłem musiałem zmniejszyć prawy margines dla zdjęcia oraz lewy margines dla kolumny tekstowej. U mnie na laptopie 15” przy powiększeniu 100% wygląda idealnie jak chciałem:
screen1
Jednak jak się zwiększy powiększenie to kolumna tekstowa chowa się za zakładkę menu, a zdjęcie jest ucinane:
Jeszcze gorzej wygląda to na tablecie lub smartfonie. Responsywność na smartfonie jest chyba prawidłowa bo najpierw jest tekst a następnie fotka. Tyle tylko, że tekst jest ucięty – przesunięty w lewo a zdjęcie ucięte i przesunięte w prawo. Mniej więcej podobnie jak zostały zmienione (zmniejszone) marginesy:
screen3
screen4
Próbowałem i kombinowałem na różne sposoby. Nawet na dwa różne sposoby zrobiłem ten sam efekt, ale z problemem sobie nie poradziłem.
Czy mógłby ktoś mi podpowiedzieć jak sobie z tym poradzić tak, aby na różnych laptopach i smartfonach te elementy były prawidłowo wyświetlane (skalowane bez przesunięcia), pomimo zmian w marginesach? Czy można to skorygować jakąś formułą w CSS-ie? Będę wdzięczny za podpowiedzi.
Strona jest na wordpresie, plugin Visual Composer.
http://www.krzybol.ayz.pl…rogesteron.com/
Pozdrawiam
Krzysiek