- This topic has 12 replies, 2 voices, and was last updated 4 years, 3 months ago by Tom.
-
AuthorPosts
-
December 1, 2019 at 8:42 am #1088053Niklas
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.
December 1, 2019 at 7:27 pm #1088755TomLead DeveloperLead DeveloperHi 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 π
December 2, 2019 at 11:06 am #1090264NiklasYes, 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
December 2, 2019 at 12:41 pm #1090406NiklasAlso, 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>
December 2, 2019 at 6:11 pm #1090788TomLead DeveloperLead DeveloperAssuming 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 π
December 3, 2019 at 5:33 am #1091496NiklasSo, 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.
December 3, 2019 at 9:26 am #1092000TomLead DeveloperLead DeveloperAny 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 );
December 3, 2019 at 9:37 am #1092018NiklasSure. Sorry for the r-rated domain: http://thedickslip.com/
December 3, 2019 at 8:20 pm #1092573TomLead DeveloperLead DeveloperThe 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 π
December 4, 2019 at 5:05 am #1092956NiklasCrap, sorry. I changed it to test something else and forgot to change it back. Your code is now live on the site!
December 4, 2019 at 10:03 am #1093445TomLead DeveloperLead DeveloperYou 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%; } }
December 5, 2019 at 5:36 am #1094441Niklasreplacing it worked! Thanks a lot for the help
December 5, 2019 at 9:28 am #1094818TomLead DeveloperLead DeveloperYou’re welcome π
-
AuthorPosts
- You must be logged in to reply to this topic.