Padding Issue

Hi there,

Since you are using a third party block plugin, I would recommend using the full width page builder container here:
https://docs.generatepress.com/article/page-builder-container/

Then use the block plugin to handle all the padding required.

Hi the full width page builder option is available only in premium version.

How can we do that in a Free Generate Press Theme, as this forum supports for Free Versions right?

And I am experiencing this in my blogs also, on mobile – the left and right paddings are large, which gives a very less space for reading and increases unnecessary scrolls.

Plus, is there any way to remove/decrease the white space between the primary navigation and the content.

I have also added the screenshots above.

Please help me with this.

Thank You.

Hi the full width page builder option is available only in premium version.

That’s not correct. The page builder metabox is available with the free GP theme as well.

Please try that first.

Hi, I did what you said and changed from default to full-width.

I even tried the contained option, but still, entire padding was lost. – https://ibb.co/NrvM0qK

I just wanted to reduce the paddings, only when viewed on MOBILE.

Is there any way to reduce it by a certain amount, rather than removing it?

Since you are using a third party block plugin, the best way to handle this is to remove all of GP’s padding then use the block plugin to handle all the padding requirements on desktop and mobile.

This method is required to have some full-width blocks as you can’t choose where you want GP padding and where you don’t – all the content is wrapped within the same container.

Hi, but I am using the wordpress editor to add blocks on my blog.

Only homepage uses the 3rd party blocks.

But, the blogs I make I use wordpress editor blocks.

And the wordpress editor blocks doesn’t have any padding alignment options.
(Example – paragraph, header, these blocks doesn’t have any padding options)

This
https://ibb.co/NrvM0qK
is the screenshot of a blog which I just made.
Link – https://questionpapershub.com/dpt-recruitment-2020/

In the screenshot the paragraph block and the header blocks as well as the title have 0 left and right padding when the “full-width” option is ON in page builder.

I just want small paddings only, so that these blocks will look good.

If you check the above blog link on mobile, you can see the LARGE Left & Right Paddings.

Is there any CSS which can help me to decrease the paddings on my mobile view????

Try this:

@media (max-width: 768px) {
    .separate-containers .inside-article {
        padding: 10px;
    }
}

Yes, the above CSS worked.

Thank You! ??

No problem ??