Remove padding under date/comments/author box on mobile devices

Homepage Forums Free Support Forum BoldR Lite BoldR Lite Support Remove padding under date/comments/author box on mobile devices

Note about WordPress 5.0:
Our themes are compatible with WordPress 5.0. However not all functionality are guaranteed to work as expected with the new editor (Gutenberg) that comes with 5.0.

We highly recommend installing the Classic Editor plugin, which will bring back the usual editor if you run into any issue or just do not like the new editor.

An update to bring full compatibility with Gutenberg is being worked on, but has been postponed because of the recent fast-paced evolution of the Gutenberg project until WP 5.0 release. More info about the release of WordPress 5.0 announced on a short 2-days notice can be found here: New 5.0 Target Date.

Remove padding under date/comments/author box on mobile devices

This topic contains 1 reply, has 2 voices, and was last updated by  iceable 3 weeks, 4 days ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #24377
    Remove padding under date/comments/author box on mobile devices

    osk
    Participant

    Hi,
    Your theme works great for me for some time now, but there is one thing that I’m struggling with. The text on mobile devices is too narrow and quite hard too read. This is happening because of the padding under data/comments/author box.

    I would like either to:
    Remove padding under data/comments/author box. So the box itself stays there, the article starts to the right of the box as default, but after a few sentences, when the data/comments/author box is no longer there, it would start from the very left ignoring the box width. (preferred scenario)
    OR
    Remove data/comments/author box at all and make the text start at the very left from the beginning, if that scenario is easier to implement.

    The crucial thing is that I would like it to apply only on mobile devices. On desktop there is enough space for wide text and I actually like the box and padding a lot there.

    Any suggestions how to improve this will be highly appreciated.

    #24384
    Reply to: Remove padding under date/comments/author box on mobile devices

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Hi, I believe this has been discussed in an other thread (quite a long time ago though, it would take some digging to find it) and the following appeared to be a pretty satisfying solution.

    You can copy/paste this code into Appearance > Customize > Additional CSS.

    What it does on mobile is move the date and comment counts above the title, and let the thumbnail and post content go full width. Please give it a try and let me if this works for you!

    @media (max-width: 767px) {
        .postmetadata {
            float: none;
            width: 100%;
            margin-bottom: 20px;
            margin-right: 0;
        }
        .postmetadata span {
            display: inline-block;
            text-align: center;
            padding: 0.5rem
        }
    
        .meta-date {
            background-color: #7082af;
            width: auto;
        }
        .meta-date span {
            padding: 0 0.175rem;
            font-size: 13px !important;
            line-height: initial;
        }
    
        .meta-comments a {
            color: #ccc;
            display: inline-block;
        }
        .meta-comments .comments-count {
            font-size: 1em;
            line-height: initial;
            padding-left: 0.25em;
        }
        .postmetadata .meta-author {
            display: none;
        }
    
        .post-contents {
            width: 100%;
        }
        .thumbnail {
            float: none;
            margin-bottom: 20px;
            margin-right: 0;
        }
    }
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.


PayPal Verified
Secured by PayPal
Secure Credit Card payments powered by Stripe