WebSite X5Help Center

 
Nassos K.
Nassos K.
User

Smartphone page layout table  en

Autor: Nassos K.
Visitado 1495, Seguidores 1, Compartilhado 0  

Is there a way to have 2 columns instead of one at the smartphone page layout table?  

Publicado em
15 RESPOSTAS - 2 ÚTEIS - 1 CORRIGIR
Pavel M.
Pavel M.
User

Good day. You can use a table object with two columns. Plus insert the code for the "rubber table", here you can find it by searching in messages.

Ler mais
Publicado em de Pavel M.
Nassos K.
Nassos K.
User
Autor

Good day to you too!

Thank you for your reply.

Unfortunately, the problem is that I need 3 columns for desktop layout and 2 columns for tablet and smartphone layouts. So, is there a way to use a table and solve this problem?

Please inform me about the "rubber table". What is it and how it works?

Ler mais
Publicado em de Nassos K.
Pavel M.
Pavel M.
User

About the rubber table https://helpcenter.websitex5.com/pt/post/200395

And about three columns on a computer and two columns on a smartphone - on a computer, you can try to put two tables side by side, with one column and two columns, and then hide the table with one column for lower resolutions.

Ler mais
Publicado em de Pavel M.
Nassos K.
Nassos K.
User
Autor

Hi

About the two different tables side by side. It is not workable because I do not want to lose the content of the hidden table for lower resolutions.

About the link that you sent to me. I will check it hoping for a solution.

Best regards

Ler mais
Publicado em de Nassos K.
Esahc ..
Esahc ..
Moderator

Nassos, can you provide a link to your website with the tables or a screen shot showing the 3 columns with content?

Ler mais
Publicado em de Esahc ..
Esahc ..
Esahc ..
Moderator

Nassos, If you used the text object and placed 2 pics in the first object and one pic in the second object this may give you more control, but unfortunately Evo offers little ability in this regard.

Whilst it may be difficult to justify the expense, the Professional version gives much more control. In my test the page displays 3 columns in small tablet mode by default. Pro also gives the option to decide the order of cells and the break points for each resolution. Lastly, additional resolutions can be set (up to 10 in total). I found that you can add a resolution of 320 and by default the 3 images remain on one row between 320-480px (most current mobiles) so this means only people with very old or very cheap phones will see the forced single column display.

Ler mais
Publicado em de Esahc ..
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nassos K.
... ... ...  Unfortunately, the problem is that I need 3 columns for desktop layout and 2 columns for tablet and smartphone layouts. So, is there a way to use a table and solve this problem? ... ... ... 
 (It > De) ... ... wenn Sie mit den in den verschiedenen "breakpoint"  verfügbaren Optionen nicht lösen können, ... könnten Sie versuchen, diesen EXTRA-Code zu berücksichtigen:

<style>
@media (max-width: 899px) {
#imContent {display: block !important;}
div [id^='imCell_'] img {width: 150px !important;}
div [id^='imCell_'] div {left: 10px !important; width: 190px !important; padding: 0px !important;}
div [id^='imCell_'] {float: left !important; width: 220px !important; height: 240px !important;} }
</style>

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Nassos K.
Nassos K.
User
Autor

Hi 

Thank you for the code.

Please be more specific about where I should import this code in order this code to work for a specific page?

Ler mais
Publicado em de Nassos K.
Andre E
Andre E
Moderator

Nassos,
Style tag is generaly placed in the HEAD tag of the website.

For a page: step3 select the page (not double click) select properties button, goto expert TAB
set it there after opening or before closing the HEAD tag.

Ler mais
Publicado em de Andre E
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nassos K.
Hi  Thank you for the code. Please be more specific about where I should import this code in order this code to work for a specific page?
 ... exactly where Andre  pointed out, and preferably in the 3rd  option:
>> Step 3 - Map > The Page Properties window > ▪Expert | ▪Custom Code: > 3rd  option > Before closing the HEAD tag

.

ciao

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Nassos K.
Nassos K.
User
Autor

Thank you all for your help!

I will try it as soon as go back to my office around the end of the week!

Best regards

Ler mais
Publicado em de Nassos K.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... alternatively, for two columns (- <900px), also try this variant:

<style>
@media (max-width: 899px) {#imContent {display:block !important;width:100% !important}
#imContent > div *{text-align:center !important;margin:auto !important;font-size:4vw !important}
div [id^='imCell_'] img {width:100% !important;max-width:160px !important} div [id^='imCell_'] div {padding: 0px !important}
div [id^='imCell_'] {float: left !important; width: 40% !important; height: 300px !important;margin-left:5% !important;margin-right:5% !important}
table{width:100% !important}}
</style>

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Nassos K.
Nassos K.
User
Autor

Thank you all for the solution to this post!

Any ideas about how can I make it look better?

See attached picture. 

Please inform me if there is a way to make the top and the bottom of this page(the headline and the return button at the end) to be page-wide  at the top and at the bottom of the page 

Best regards

Ler mais
Publicado em de Nassos K.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... zur Vereinfachung können Sie das Thema Ihres Screenshots in eine separate Zeile einfügen ...
... bei anderen Fragen ist es möglicherweise besser, neue Themen zu eröffnen...

Hallo, ciao

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪