[Resolved] Padding and text restrictions

[Michael]

Hi there 🙂
We are almost done with the major things of our site.
Now I am trying to tweak a few things that look a bit odd.

First couple of tweaks is on the top part of the front page: https://www.dropbox.com/s/b5onujt5d4tcbtg/Screenshot%202019-06-03%2008.57.03.png?dl=0

Basically padding on a few different areas, both increase and decrease. Is this css fixes, or some theme settings? If css, can you please provide a suggestion?

Second tweak is for desktop users, a bit further down on the front page: https://www.dropbox.com/s/ti7gqb96qzvc5p9/Screenshot%202019-06-03%2009.06.02.png?dl=0
What would be best practice to “align” the image with header and text, so that the header and text does not go too far out to the right of the image? By that I mean, should I make the images wider (to match the 530 px width) or should I somehow restrict the header and text to not go wider than the image?

Third tweak is the mobile menu. The distances between the menu items, once I click the hamburger, is quite far. It seems to be tied to the Menu Item Height. But I don’t want to change that, since it affects the logo size. Is there another way to just change the distances?

Thank you 😊 🙏

[David]

Hi there,

1. Spacing between img / title / text in columns -try this CSS:

.db-column h4 img {
    margin-bottom: 1em;
}

.db-column h4 {
    margin-bottom: 0.5em;
}

.db-column hr {
    margin-top: 20px;
}

2. The sections with you ‘post grid’ give it a Custom class of post-grid and add this CSS:

.post-grid .inside-grid-column {
    max-width: 380px;
}

3. Yes the menu item height does control the logo height. This CSS should allow you to set the Logo height and then reduce the menu item height.

@media (max-width: 768px) {
    .navigation-branding img, .site-logo.mobile-header-logo {
        height: 60px !important;
    }
}

[Michael]

Hi David,
Excellent support as always.
I have question, as a sort of fine tweak, regarding #2 – is there a simple way for me to center each column row? If you look at the site on desktop now, there is a relatively large blank section to the right of the columns. So I was thinking if there is a way for me to center the grid, without affecting the text, header, or images.

Does my explanation make sense? I made a quick sketch to try and make sense of my words… 🙂
https://www.dropbox.com/s/e2n2pzpjv0e7zot/Sketch.jpg?dl=0

[David]

So remove this CSS:

.post-grid .inside-grid-column {
    max-width: 400px;
}

Then we limit the width to the content of the column and use auto margins to center it:

.post-grid .inside-grid-column > * {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

[Michael]

Thank you David 🙂

[David]

You’re welcome

[Michael]

Hi again David,
I just updated to the latest GP and also latest WP (7). That did something to my spacing on the first page on (www.smidbleen.dk).

Here is a screenshot of before (right) and after (left). https://www.dropbox.com/s/hv33zwm9w009s0w/Screenshot%202021-03-16%20at%2018.47.17.png?dl=0

As you can see the “bottom margin” has increased a lot. I can’t make sense of it. It is the same when scrolling down the page. The margin beneath each text is significantly increased.

Further down the page: https://www.dropbox.com/s/iqhnwrjdk385kjq/Screenshot%202021-03-16%20at%2018.49.47.png?dl=0

In each screen shot is the css you provided last time, which now seems to have no effect?

Can you help?

Regards
Michael

[Elvin]

Hi Michael,

This is actually a known issue with WP 5.7.

Check this: https://github.com/WordPress/gutenberg/pull/27995

The quick fix for this is by adding this CSS:

p:empty:before {
    display: none;
}

But this should really be addressed by WordPress devs. All themes are affected by this change.

[Michael]

Hi Elvin,
I don’t use the Block Editor at all – so the quick fix does nothing for me. I tried to add it in the Simple CSS, but nothing changed.

I have updated the two images with some more explanation. Please see here:
https://www.dropbox.com/s/hv33zwm9w009s0w/Screenshot%202021-03-16%20at%2018.47.17.png?dl=0
https://www.dropbox.com/s/iqhnwrjdk385kjq/Screenshot%202021-03-16%20at%2018.49.47.png?dl=0

Perhaps David can help me? Since he assisted with the fixes the previous time?

[Michael]

Quick update:
I talked to another tech person, and he found that an element following a div looked like this previously:
<p></p>

But after the update it looks like this:
<p>::before</p>

If that is causing the difference, I don’t know. And I don’t know how to fix it.

In the meantime I have reset my sites to an earlier version of WP. But I have left this installation on the WP5.7: shop.bleiefri.no – so at least you can look at that to see it live.

[David]

The explanation that Elvin provided here is the issue.

In WP 5.7 they introduced some CSS so as empty paragraphs occupy space on the front end. It was a terrible idea and they will be reverting that change hopefully in the next update.

The CSS Elvin provided should fix the issue – if it doesn’t then try this CSS:

p:empty,
p:empty:before {
    display: none;
    margin-bottom: 0 !important;
}

[Michael]

Hi again 🙂

Ok – I added the CSS, but it made no difference. Please see here: https://shop.bleiefri.no/

Perhaps it’s because I don’t use the block editor at all? I have installed a WP team developed plugin called Classic Editor.

In any case, for the time being I have reverted to WP5.x on my main sites. The only one with WP5.7 is my testing site shop.bleiefri.no.

Could there be any other problem causing this?

[David]

Looks like its working:

Try clearing any browser caches.

[Michael]

You’re right! Normally when I add code in the Simple CSS, it shows the changes immediately. That’s why I assumed it did not work.

That’s good.

You wrote that this problem would hopefully be sorted in a coming update – will I need to remove the CSS at that point? Or will it become superfluous?

[Ying]

Hi Michael,

We just assume WP will fixed it in their next update, but nothing is sure.

You could either keep it or remove it if WP really fixed the issue someday, there won’t be any difference in front end.

[Author]

Posts