[Resolved] Strange behaviour on mobile with table

[Matthew]

Hi,

I can’t figure out why the margin on some content changes when going on mobile.

I am using LGC with no classes set on the specific columns, so I guess it’s something to do with the theme?

On mobile the TV show air date margin on the left of the headings seems to reduce so its not in line with the previous season list.

Any ideas why this is?

[David]

Hi there,

what are you using to create the js-wpv-view-layout container that is wrapped around some of the columns? And what is its purpose?

Its either to do with that changing the specificity of the columns inside-grid-container so it picks up the main sites padding or it is cache related.

[Matthew]

Hi David,

Honestly I am not sure its something being used by Toolset. I can find out if needs be but to be honest the content wrapped in this appears fine.

The issue is with the content not in this container.

In the section below heading “TV Show Air Date & Info for the UK” this is the section thats acting odd, its just using LGC and on mobile the columns seem to lose their margin.

[David]

The LGC Columns within the js-wpv wrapper are grabbing the inside-grid-container padding from the parent grid not the columns. So chances are its a cache issue, Can you clear and disable your cache?

[Matthew]

Hi David

I have cleared my cache and disabled the cache plugin as well but still the same issue.

The LGC Columns within the js-wpv wrapper are all acting fine though, the left margin of these don’t change when on mobile. Its the LGC columns not in this wrapper above them that the left margin is changing on.

https://i.ibb.co/WKnNBSr/Screenshot-2018-12-21-at-14-48-04.png

[David]

Right, so the top columns are set to mobile-100 which in Unsemantic grid carries this property:

@media (max-width: 767px) {
    .lgc-mobile-grid-100 .inside-grid-column {
        padding: 0;
    }
}

It strips the padding. You can replace it by adding the above CSS to your own style sheet and edit the padding to match. ie. padding: 0 10px 0 10px;

Sorry i hadn’t spotted the smaller mobile columns.

[Matthew]

Ah that has solved it thanks! 🙂

[David]

You’re welcome

[Author]

Posts