WebSite X5Help Center

 
Nassos K.
Nassos K.
User

Smartphone page layout table  en

Author: Nassos K.
Visited 1576, Followers 1, Shared 0  

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

Posted on the
15 ANSWERS - 2 USEFUL - 1 CORRECT
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.

Read more
Posted on the from Pavel M.
Nassos K.
Nassos K.
User
Author

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?

Read more
Posted on the from Nassos K.
Pavel M.
Pavel M.
User

About the rubber table https://helpcenter.websitex5.com/en/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.

Read more
Posted on the from Pavel M.
Nassos K.
Nassos K.
User
Author

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

Read more
Posted on the from 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?

Read more
Posted on the from 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.

Read more
Posted on the from Esahc ..
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT
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>

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Nassos K.
Nassos K.
User
Author

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?

Read more
Posted on the from Nassos K.
Andre E
Andre E
Moderator
Best User of the month EN

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.

Read more
Posted on the from Andre E
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT
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

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Nassos K.
Nassos K.
User
Author

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

Read more
Posted on the from Nassos K.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

... 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>

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Nassos K.
Nassos K.
User
Author

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

Read more
Posted on the from Nassos K.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

... 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

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪