Jump to content
  • 0

HTML box jak zrobić wersję mobilną lub jak sobie z tym poradzić


Adrjan77

Question

Witam,

Próbowałem znaleźć odpowiedź na nurtujące mnie pytanie, ale się nie udało, w związku z tym zwracam się do Was.

Tworzę sklep, klient potrzebował aby na stronie głównej wyświetlały mu się skrócone artykuły (CMS), więc wstawiłem w HTML box'ie tabele (czysty html, bes css, nawet nie wiem czy by ugryzł css html box, i tak wiele rzeczy mi wywalał), prosta tabela, szerokość 1100px, trzy <td>, w każdej kolumnie obrazek z tekstem, to wszystko, jednak (żadna niespodzianka) na telefonach wygląda to tragicznie. W związku z tym moje pytanie do Was, jak przygotować wersję na telefony?

Jeżeli w jednym html'boxie nie da się tego zrobić, myślałem, żeby po prostu wstawić html box'a po raz drugi (ale jak duplikować moduły też nie wiem), jeden niech będzie wyświetlany tylko na komputerach, drugi na tabletach i komórkach, i tam go sobie ładnie "wystylować" do potrzeb urządzeń mobilnych.

Pozdrawiam

PS. Prestashop w wersji 1.6

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

responsywność zależy od wykorzystywanego kodu.

jeżeli szablon oparty jest o bootstrap a tak pewnie jest to można wsadzić kod dla poszczególnych urządzeń w odpowiednie div'y

Extra small devices Phones (<768px) (Class names : .visible-xs-block, hidden-xs)
 
Small devices Tablets (≥768px) (Class names : .visible-sm-block, hidden-sm)
 
Medium devices Desktops (≥992px) (Class names : .visible-md-block, hidden-md)
 
Large devices Desktops (≥1200px) (Class names : .visible-lg-block, hidden-lg)

 

<div class="hidden-lg hodden-md visible-xs-block visible-sm-block>
wersja mobilna
</div>

<div class="hidden-sm hodden-xs visible-md-block visible-lg-block>
wersja pc
</div>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...