Mobile version of the site…

[iampossible]

Hello,

1) How can someone change an element to be standard width on desktop, but become full width on mobile devices?
I am trying to make tables fit the entire width of the screen when viewed on mobile phones so the information does not looked too crammed up.

2)How can someone make sure a table with images that can normally fit very well on the desktop also fit on the mobile phone by shrinking itself. By shrinking I mean it looks the same like it does on desktop but it also fits within the width of a mobile display.

Thank You

[iampossible]

This reply has been marked as private.

[David Martin – Support]

1) This table is fullwidth:

2)

You need to contact the TablePress plugin support, it looks like the width is fixed:

—

For the most part the entire theme will fold up nicely as per our demo, however this largely can vary on what custom content you add, for example, you are using the plugin TablePress which the theme does not control.

[iampossible]

This reply has been marked as private.

[David Martin – Support]

1) No this will not impact your load time.

2) Seems like you have already fixed this?

[iampossible]

Haha, yes, played around in the custom css section and figured out a solution..

Quick Question: What does adding “visible-lg” or “hidden-sm” to extra class name of certain elements do?
1) Does it mean the element will not load when the screen size is small and therefore increase the page speed on mobile devices?
2) Or does it mean the item will load even on small screens and decrease the page speed on mobile devices but it will not be visible to the user?

Is there another option to disable certain elements from loading on mobile screens so that the page speed is high for mobile users?

Warm Regards 😀

[David Martin – Support]

Hi,

Those Bootstrap CSS classes simply hide/show on different screen sizes. It won’t improve or worsen your speed.

These classes:

visible-lg – Visible on large screens

hidden-sm – Hidden on small screens