Smartphone page layout table 
Author: Nassos K.
Visited 1494,
Followers 1,
Shared 0
Is there a way to have 2 columns instead of one at the smartphone page layout table?
Posted on the
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.
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?
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.
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
Nassos, can you provide a link to your website with the tables or a screen shot showing the 3 columns with content?
Author
https://www.corniza.gr/page-35.html
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.
<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>
.
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?
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.
>> Step 3 - Map > The Page Properties window > ▪Expert | ▪Custom Code: > 3rd option > Before closing the HEAD tag
.
ciao
.
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
... 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>
.
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
... 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
.