Analyzing Layout and Padding Issues in Frontend Webpages

General
1

Here’s a backend screenshot for the ‘Single Post’ template:

  • The default padding for the top of the section is not properly applied, even though it’s set to 50px (default settings).
  • The padding set after the Gravatar is 5px and is displaying correctly.
  • The padding set after “Bruno BROS” is 30px and is also displaying correctly.

2003-06-02_220501
2003-06-02_2205011845×380 43.5 KB

Here’s a frontend screenshot:

  • The beginning of the first section is incorrectly placed in the header.
  • The padding for the meta tags is not correctly applied.

2023-06-02_220503
2023-06-02_2205031671×271 23.2 KB

Here’s a frontend screenshot of a page displayed using the ‘Index’ template:

  • The beginning of the first section is correctly placed under the header.

2023-06-02_220352
2023-06-02_2203521431×241 17 KB

Environment info

  • WordPress version: 6.2.2
  • Gutenberg Plugin version: N/A
  • Cwicly Plugin version: 1.2.9.7
  • Cwicly Theme version: 1.0.3
2

Hi @weedor,

Sorry to hear you’re experiencing trouble with padding.

In my understanding, this issue doesn’t appear to be a bug but rather an expected result based on the design.

Since your header has a fixed position, the section needs to accommodate the space taken up by the header, resulting in less room available.
If you wish to increase the space between the header and section, my suggestion would be to add more padding.

As for the meta tags, could you possibly share a frontend link?
That way, I can examine the issue more closely.
Thank you in advance.

As a side note, I have noticed that you have two headers on your “book a phone/video etc call” pages, but due to their fixed position, it may not be immediately apparent.
So be sure to remove one.

3

Thank you for your reply, @Araminta . I edited the “Index” template without making any changes to the section and saved it. However, it turned out to be not a good idea. I have now reset the “Index” template, and all the issues with top and bottom padding have been fixed.

I will recreate the Single Post Template and will update you on the results.

4

I can confirm that reset of template “Index” fixed all css frontend issues.

5

Thank you for confirming this, @weedor!

Please don’t hesitate to let me know if you need help with anything else.