-
I have tables on the below page:
https://zanzan.tw/web-design
Can I make the table center in the desktop view while full-width in the mobile view? -
Hi there,
You can try this CSS:
@media only screen and (max-width: 768px) { body.page-id-42215 .wp-block-table { margin-right: 0; margin-left: 0; } } -
Thanks.
I often add some class to the custom additional CSS so that it can be used in the same object as the below image. Can I to this to the specific table element in the same way?
https://imgur.com/gOh0XBu -
Hi there,
looking at the page you shared. I see a layout like this for each of your tables:
Container Block #1
—- Container Block #2
—- —- Table BlockSelect Container Block #2
And set the blocks alignment to default:https://app.screencast.com/aMjgW2YEEfMVF
Then in Spacing > Margin Left & Right set it to
auto
Then in Sizing > Max Width set the max width of the container eg. 500px.What this will do is container the max width of the table and center it.
-
Hi there
Thanks for your recommendation.
I did just as what you suggested. But table didn’t show in full wide. It seems there is default margin or padding in the whole page? If so, how can I adjust this in the theme’s setting?Ps.I took the screenshot as you did with the screencast. If you can see them, just let me know.
Page:
https://zanzan.tw/blank
https://zanzan.tw/web-designScreenshot:
https://app.screencast.com/Vp1MH2ndm2hoU
https://app.screencast.com/n2SUUSixuMV4t -
a couple of options
Option A – remove the theme padding
In the page editor you can set the Layout > Content Container to Containedhttps://docs.generatepress.com/article/content-container/
This removes the Padding ( set in Customizer > Layout > Container ) from that page.
This means any content wide enough will span the width of the container.NOTE: Setting the Content Container to Full Width will make it so the page expands 100% the width of the browser on any screen size.
Option B – make a single block extra wide
Select a block eg. the image block and in the blocks toolbar set the alignment to Wide Width
This will force that block to overcome the themes padding. -
Thanks.
I make the theme’ default padding to be 0. Clear used CSS with Perfmatters and Clear cache with Kinsta.
However, I still see the padding space in the mobile view. Is anything wrong?https://app.screencast.com/9JLk4WEfwMp5N
https://app.screencast.com/F430sLwVD8j0R
https://app.screencast.com/ZqYnTFe0aqQok -
Can you disable your cache plugin so we can see the code?
Let me know 🙂
-
In additional to Knista hosting cache, I use no cache plugin. Can you specify in more detail so I can do it for you? Thanks.
-
I make the theme’ default padding to be 0.
Are you referring to the content padding in the customizer?
https://docs.generatepress.com/article/content-padding/I’m still seeing the 40px of default padding on the
web-designpage.Let me know 🙂
-
Yes. That’s desktop view. In the wide screen mode, the padding is somewhat irrelevant.
I set the padding to be 0 in the mobile view. But I cannot see the effect. My wonder comes from mobile view. -
Can you disable any optimisation / cache plugins so we can take a closer look
-
Yes. I’d ready to do this. But I don’t know which plugin you mean. The only optimisation plugin I used should be Perfmatters. I don’t use any cache plugin. Should I disable perfmatters?
-
Yes, please. All plugins that are for performance, please disable them. And also the Kinsta cache.
-
Hi there,
You are right. I create a staging site. The site of of caching.
When I disabled the Perfmatters, the mobile page finally changed to full-width view.
Is this helpful to you?https://stg-zanzan-test.kinsta.cloud/web-design
https://app.screencast.com/CH1HO0X8VTVmN
https://app.screencast.com/vxcXXVlaYnUIl
https://app.screencast.com/ySyMud5KqE8Nj -
So it’s a cache problem, you will need to check the settings of the cache services (especially those related to CSS ) and make sure all cache is cleared 🙂
- You must be logged in to reply to this topic.