badget

Biggest Sale! Special Offer!

Get 30% discount on all of our single themes with this coupon code: #30%SALE

Hurry up! *Limited time offer*

[AMP][Newscard Pro] Simple format ?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #89556
    the5krunner.com
    Participant

    I am very happy with the newscard desktop format
    However I think the format is WAY too complex for small screen AMP

    Q1. Is it possible to simplify the AMP display to a simply list of TILES for each post. Like this with the BBC news app?

    BBC News App

    thank you

    #89693

    Hi 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

    #89792
    the5krunner.com
    Participant

    I 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

    #90023

    Do 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;
    }
    }
    #90024
    the5krunner.com
    Participant

    that 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)

    #90157

    Hello @the5krunner-com,

    Great! If you have any problem do not hesitate to contact us.

    Thank you!

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