Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Table addon responsiveness

Featured Lock Resolved Bug
Hi there...

I have made a table but when i look on it with mobile view of shows like in the attachment... when i tilt my phone in horizontal view it's okay...
How do i fix this?

Site:

Https://Klaassien.vulperia.synology.me

Attachments (1)

  • Screenshot_20190825-221430_Firefox.jpg
    Screenshot_20190825-221430_Firefox.jpg 193 KB

8 Answers

Paul Frankowski - Staff

3 weeks ago #Permalink
Hi,
sorry, maybe it's late night, but I don't see any table on the home page.
And table from "prijzen" is displayed OK on iPhone view.

so please tell me where exactly I should look at

Paul Frankowski - Staff

3 weeks ago #Permalink
Aaaa I guess... Contact page.
---
Inside template custom CSS or Page Custom CSS please add

@media (max-width: 580px) {
#sppb-addon-1565638983927 .sppb-addon-table-main .sppb-addon-content
{margin-left: 20px;}
}


probably it can be set also from addon settings, but I see only front-end so I have to improvise

Robert

3 weeks ago #Permalink
I am sorry mate for not giving the exact link... I was so tired... tried a lot to get this right and contacting you was my last resort...
I have added the css but it's not completely right... I have added a screenshot from mobile as attachment again... I you prefer i could send you a login...

http://klaassien.vulperia.synology.me/contact-2

Attachments (1)

  • Screenshot_20190826-062821_Firefox.jpg
    Screenshot_20190826-062821_Firefox.jpg 220 KB

Paul Frankowski - Staff

3 weeks ago #Permalink
I will ask in a different way, How you imagined it would be in the mobile view?
---
Now you can read all the table fields.
Also on very old, small mobile screen.

Robert

3 weeks ago #Permalink
Well, the header is displayed in every row now... I would like to have it displayed as the normal table in desktop view but smaller...


Header (3 colums)
Day of the week - begin time - end time
Next day - begin time - end time
Etc.

I chose for a table to organize it decently and clearly... if it isnt possible i have to do it like the pricing...

Paul Frankowski - Staff

3 weeks ago #Permalink
Well, the header is displayed in every row now.

Sorry, it was designed to be like that, as I told you before to show all info also on very small screens as well.

If you need a classic table, use HTML table with Bootstrap4 styles, for example inside Text or Raw HTML addon. More: https://getbootstrap.com/docs/4.0/content/tables/
and https://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_tables.cfm

Robert

3 weeks ago #Permalink
Okay so i have been playing with the table for mobile view... now it looks like this... (see attachment) maybe it's more clear now to show you what i meant earlier...

It isnt possible to get the header over the whole width of the table?

Attachments (1)

  • Screenshot_20190828-214142_Firefox.jpg
    Screenshot_20190828-214142_Firefox.jpg 222.2 KB

Paul Frankowski - Staff

3 weeks ago #Permalink
This may help (NEW CUSTOM CSS CODE)

@media (max-width: 580px) {
#sppb-addon-1567018783178 .sppb-addon-table-main {width: 100%;background: #ff0098;}
}


iphone.jpg

Attachments (1)

  • iphone.jpg
    iphone.jpg 22.1 KB


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 121
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 110
Toufiq

Toufiq

Total Accepted Answers: 82
Kamruzzaman Alam

Kamruzzaman Alam

Total Accepted Answers: 5
FUTURECLIENT

FUTURECLIENT

Total Accepted Answers: 2

115

Templates

296321

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us