Generic selectors
Exact matches only
Search in title
Search in content
Filter by Categories
Advanced Scripts
Amazon SES
Amazon Web Services
BasePress
Blocksy Theme
Brand Building
Bricks Builder
BunnyShell
Cloudflare
CSS
Digital Marketing
Elementor
Email Marketing
Entrepreneurship
Fluent CRM
Fluent Forms
Fluent SMTP
GoDaddy
Google Fonts
HTML
Hydrogen Pack
JavaScript
Jetpack
Kadence Theme
LiveCanvas
Meta Box
Online Business
Oxygen Builder
OxyMade
PHP
Piotnet Forms
Pods
SaaS
Scripts Organizer
Search Engine Optimization
Social Media Marketing
Swiss Knife
Web Design
Web Development
Web Strategy
WordPress
Work From Home
Zion Builder

Custom Style the AMPforWP Templates [CSS Snippet]

Managed by:
Mohammed Wasim Akram
✼ Disclaimer: SyncWin is user-supported therefore this page may contain our affiliate links and if you purchase something using those links, we may get some commission without any additional cost to you. Click to Learn More.

Please note we want to keep things crystal clear that this page may contain some of our affiliate links. Also, we don't know, use or recommend every product we link to, so please do your due diligence before making your buying decision.

However, there are very few selected products that we trust, use, and recommend to our readers and community, and we always mention that on our website which you could also find on our dedicated Recommendation Page.

Hence, if you make a purchase using any of those links, then it is safe to assume that we might get a small amount of commission without any additional cost to you, which helps and encourages us to produce more helpful content like this for you.

Feel free to explore our Legal Policy Pages.

If you're looking for a way to style your AMP page built with AMP for WP plugin then find the powerful custom CSS code to style them as per your requirement.

/* AMP for WP Flex Column Style */

.sp-lt {
display: flex;
flex-direction: column;
flex: 1 0 20%;
order: 2;
max-width: 237px;
margin-left: 50px;
}

/* AMP for WP Container Style */

.content-wrapper {
margin-top: 50px;
}

/* AMP for WP Page Title H1 */

.amp-post-title {
font-family: Segoe UI;
font-size: 36px;
font-style: normal;
font-weight: 700;
Color: #000428;
}

/* AMP for WP Page H2 Headings Style */

.cntn-wrp h2 {
font-family: Segoe UI;
font-size: 32px;
font-style: normal;
font-weight: 500;
Color: #000428;

}

/* AMP for WP Page H2 Subheadings Style */

.cntn-wrp h3 {
font-family: Segoe UI;
font-size: 28px;
font-style: normal;
font-weight: 500;
Color: #000428;
}

/* AMP for WP Page Content Styles */

.cntn-wrp p {
font-family: Segoe UI;
font-size: 18px;
font-style: normal;
font-weight: 400;
Color: #2a3348;
}

/* AMP for WP Social Icons Style */
.ss-ic li a {
border-radius: 180px;
background-color: #004E92;
padding: 10px;
}

/* AMP for WP Comment Box Style */
.form-submit #submit {
background-color: #004E92;
}

/* AMP for WP Post Tag Style */

.amp-tags .amp-tag a {
font-family: Segoe UI;
color: #fff;
background-color: #004e92;
padding: 6px;
border-radius: 3px;
line-height: 2em;
text-transform: capitalize;
font-weight: 400;
font-size: 14px;
}

/* AMP for Image Alignment Style */

@media (min-width: 1200px) {
.aligncenter {
width: 70%;
}
}

@media (min-width: 768px) {
.aligncenter {
width: 70%;
}
}

Ways to Add This Snippet to Your Website?

There are multiple ways of adding this code snippet to your site, but we recommend using the Advanced Scripts or Scripts Organizer plugin as they allow adding various types of codes to your WordPress site such as PHP, JavaScripts, CSS etcetera.

Apart from that, the team behind both of these plugins are very talented and they constantly keep improving the plugins by fixing bugs and adding new features, and the best part is that they are doing it all based on the feedback of the actual users which simply means that they care.

You could also use the Code Snippets plugin as it is also a great option for free but limited in features and capabilities as compared to the above-mentioned options.

Pay Attention Before Using the Snippet!

I would strongly suggest you test these snippets on your staging site and when you think they work, then you try them on your live site as it's not our responsibility if something goes wrong though we're ready to help on implementation if you need it.

Although they work well for me and the other people still you should be extra cautious and careful to implement any code snippet on your site due to different stacks of tools and backend environments.

Related Code Snippets

Remove Specific Items from the WordPress Toolbar [PHP Snippet]

If you want to remove specific items from the WordPress Toolbar to declutter it and make things organized then this code snippet would help you achieve just that.

Read More
Fix Unclosed Oxygen Pro Menu in Safari [CSS Snippet]

If you're struggling with the unclosed broken Oxygen Builder pro menu on the Apple Safari Browser then this code CSS Code Snippet would help you fix that issue.

Read More
1 2 3 7

Leave Your Feedback

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
WordPress Support - Sidebar Widget Ad Banner Image - SyncWin
Advanced Scripts WordPress Plugin - Image Ad Banner - SyncWin
Top menu-circlecross-circlechevron-down-circle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram