Tagged: Custom post Layout for Mobile
- This topic has 5 replies, 3 voices, and was last updated 3 years, 4 months ago by Theme Horse Support Team.
-
AuthorPosts
-
June 15, 2021 at 10:33 am #89556the5krunner.comParticipant
I am very happy with the newscard desktop format
However I think the format is WAY too complex for small screen AMPQ1. Is it possible to simplify the AMP display to a simply list of TILES for each post. Like this with the BBC news app?
thank you
June 19, 2021 at 5:13 pm #89693Theme Horse Support TeamKeymasterHi the5krunner.com,
Thank You for loving our Theme. Cheers! 🙂
and Please go to ‘Appearance > Customize > Additional CSS’ and Paste the below Custom CSS code.
@media (max-width: 767px) { .post-boxed.inlined:not(.main-post) { padding: 0; } .post-boxed.inlined:not(.main-post) .post-img-wrap { margin-bottom: 0; width: 140px; height: 100px; } .post-boxed.inlined:not(.main-post) .post-content { padding-top: 10px; padding-right: 10px; } .post-boxed.inlined:not(.main-post) .post-content .entry-title + .entry-meta { margin-bottom: 0; } }
Thanks
June 22, 2021 at 9:48 pm #89792the5krunner.comParticipantI have inserted that css and it seems to make no difference
I have refreshed the cache etc etc.i have
– redirect mobile visitors to AMP enabled
– I have AMP Settings>Template Mode>Reader>AMP Legacy theme enabled
(transitional and standard seem to make no difference)thank you
June 30, 2021 at 1:41 pm #90023Theme Horse Support TeamKeymasterDo you mean you need such change for all the post on mobile view but we thought you only need such change on inline post boxed line horizontal/vertical, recent post, double category widgets. so the previous code was just for them.
Ok go to the same Additional Field and paste the below Custom CSS code.
@media (max-width: 767px) { .widget .post-boxed:before, .widget .post-boxed:after, .post-col .post:before, .post-col .post:after { content: ""; display: table; } .widget .post-boxed:after, .post-col .post:after { clear: both; } .post-boxed, .post-boxed.inlined:not(.main-post) { padding: 0; } .widget .post-boxed .post-img-wrap, .newscard-widget-horizontal-vertical-posts .post-boxed.main-post .post-img-wrap, .newscard-widget-horizontal-vertical-posts .post-boxed.main-post.inlined .post-img-wrap, .post-boxed.inlined:not(.main-post) .post-img-wrap { float: left; margin: 0 15px 0 0; width: 140px; height: 100px; } .widget .post-boxed .post-content, .post-boxed.inlined:not(.main-post) .post-content, .newscard-widget-horizontal-vertical-posts .post-boxed.main-post.inlined .post-content { overflow: hidden; display: block; padding-top: 10px; padding-bottom: 10px; padding-left: 0; } .widget .post-boxed .post-content p, .widget .post-boxed .post-img-wrap .category-meta, .post-col .entry-content, .post-col .post-img-wrap .category-meta { display: none; } .post-boxed.inlined:not(.main-post) .post-content .entry-title + .entry-meta { margin-bottom: 0; } .post-col .post { padding-bottom: 14px; } .post-col .post-featured-image { float: left; margin-right: 15px; margin-bottom: -15px; width: 140px; height: 100px; } }
June 30, 2021 at 1:46 pm #90024the5krunner.comParticipantthat looks great !!!
i think i can manage to work out how to set that as the default view in amp (tricky but i think i know how)
July 5, 2021 at 9:28 am #90157Theme Horse Support TeamKeymaster -
AuthorPosts
- You must be logged in to reply to this topic.