[Resolved] Padding and text restrictions

Home Forums Support [Resolved] Padding and text restrictions

Home Forums Support Padding and text restrictions

  • This topic has 14 replies, 4 voices, and was last updated 3 months ago by Ying.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #918157
    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 😊 πŸ™

    #918276
    David
    Staff
    Customer Support

    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;
        }
    }
    #1025939
    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

    #1026041
    David
    Staff
    Customer Support

    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;
    }
    #1028056
    Michael

    Thank you David πŸ™‚

    #1028249
    David
    Staff
    Customer Support
    #1697755
    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

    #1698199
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1698373
    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?

    #1698458
    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.

    #1698610
    David
    Staff
    Customer Support

    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;
    }
    #1698622
    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?

    #1698956
    David
    Staff
    Customer Support

    Looks like its working:

    2021-03-17_15-04-30

    Try clearing any browser caches.

    #1699281
    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?

    #1699332
    Ying
    Staff
    Customer Support

    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.

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.