[Support request] Need help getting sections to resize based on inner content

[Madison]

I have three main sections of my website, here are the titles: 1) Who Are We?, 2) Our Toolkit, 3) Hire Us,

I am trying to make the contents resize based on their inner content. I have these three sections as the main frames/divs, and all the content will be centered inside them. I need the parent frame around the content to expand and contract as necessary so that it ONLY fits the content and 10% padding around the edges. That way as it scales up and down based on viewport, the layout remains consistent.

If i could get some help with this I would really appreciate. I’ve been tinkering with it for two days using different combinations of calc(), min-height: max-content, height: auto, and none of them have worked. Not sure if its something with generatepress or I’m just not putting in the right CSS.

If you resize the sections in browser inspector, you will see what I am talking about. The sections cut off the content at small viewport sizes, and add too much space at large viewport sizes. I want it to fit around the content based on viewport size so there aren’t layout issues when rescaling the website’s size.

If anyone could help I would really appreciate it!

[David]

Hi there,

select the parent Container for each of those sections and check the Sizing -> Min Height some of them have a VH value in them. Remove those and it will size to fit the content.

[Madison]

This worked, I have the sections rendering properly, but now one of the sections is missing its content, but only on mobile? any way you can check and see why that might be? I genuinely have no clue. The “Our Toolkit” section renders perfectly on desktop, but is invisible on mobile, and it persists across different browsers.

[Ying]

but now one of the sections is missing its content, but only on mobile?

I can not access your site, the password is incorrect. Did you change the password?

It sounds like the section is hidden on mobile, so select the container, check the Advanced panel, is there an additional CSS class hide-on-mobile added? or is the hide on mobile option toggled if you are using GB Pro?

Let me know!

[Author]

Posts