[Resolved] Change Mobile Breakpoint on Marketer

Home Forums Support [Resolved] Change Mobile Breakpoint on Marketer

Home Forums Support Change Mobile Breakpoint on Marketer

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1088053
    Niklas

    I’m using the Marketer layout and want to change the mobile breakpoint. I want tablet and laptop to look the same but right now the layout treats a tablet like a phone.

    #1088755
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Most of the mobile stuff in GP uses 768px. Unfortunately, it’s not possible to change that value right now, as it’s hardcoded in the CSS files.

    What exactly are you trying to adjust? When the sidebar collapses below the content? We can likely use CSS to fix it.

    Let me know πŸ™‚

    #1090264
    Niklas

    Yes, I want the sidebar to be included on tablets as well. So the only time the posts get “stacked” is when someone is using a mobile phone

    #1090406
    Niklas

    Also, since I’m already bugging you. Is there an easy way to move the category + comment tag to sit right next to the date above the post content but under the title? Basically like this:

    <span class=”posted-on”>blah blah</span> | <span class=”cat-links”><span class=”screen-reader-text”>Categories</span>blah blah</span> | <span class=”comments-link”>Leave a comment</span>

    #1090788
    Tom
    Lead Developer
    Lead Developer

    Assuming that your sidebar is 30% wide, try this CSS:

    @media (max-width: 768px) and (min-width: 700px) {
        .tablet-grid-30 {
            float: left;
            width: 30%;
        }
    
        .tablet-grid-70 {
            float: left;
            width: 70%;
        }
    
       .right-sidebar .site-main {
            margin-right: 20px !important;
        }
    }

    As for your second question, try this:

    add_filter( 'generate_header_entry_meta_items', function() {
        return array(
            'author',
            'categories',
            'comments-link',
        );
    } );
    
    add_filter( 'generate_footer_entry_meta_items', function( $items ) {
        return array_diff( $items, [ 'categories', 'comments-link' ] );
    } );

    Hope this helps πŸ™‚

    #1091496
    Niklas

    So, the first code worked. The only problem is that when you make the screen smaller than 700px and the sidebar disappears, its left with empty space and the content area remains at 70% no matter how small the screen gets. So, even a screen that is at 300px, the content only fills 70% of the screen.

    The second worked! Thanks. Is there a way to edit the wording though. Let’s say I want the categories to say “Published in <link>category</link>” for example? I don’t mind going into CSS files etc to edit that. Just having a hard time finding where to do it.

    #1092000
    Tom
    Lead Developer
    Lead Developer

    Any chance you can link me to your site so I can see the tablet issue?

    We can use this filter to add things to the post meta: generate_inside_post_meta_item_output

    For example:

    add_filter( 'generate_inside_post_meta_item_output', function( $output, $item ) {
        if ( 'categories' === $item ) {
            return 'Published in ';
        }
    
        return $output;
    }, 10, 2 );
    #1092018
    Niklas

    Sure. Sorry for the r-rated domain: http://thedickslip.com/

    #1092573
    Tom
    Lead Developer
    Lead Developer

    The sidebar should just go below the content at that point. Right now it doesn’t look like the CSS I provided is active – is it still added?

    Let me know πŸ™‚

    #1092956
    Niklas

    Crap, sorry. I changed it to test something else and forgot to change it back. Your code is now live on the site!

    #1093445
    Tom
    Lead Developer
    Lead Developer

    You have this CSS added:

    @media (max-width: 925px) {
        .content-area.grid-70 {
            width: 60%;
        } 
    }

    Try adding this:

    @media (max-width: 700px) {
        .content-area.grid-70,
        .sidebar.grid-30 {
            width: 100%;
        }
    }
    #1094441
    Niklas

    replacing it worked! Thanks a lot for the help

    #1094818
    Tom
    Lead Developer
    Lead Developer

    You’re welcome πŸ™‚

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