Skip to content

Instantly share code, notes, and snippets.

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|80"}}},"backgroundColor":"accent-5","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-accent-5-background-color has-background" style="padding-bottom:var(--wp--preset--spacing--80)"><!-- wp:group {"align":"wide","style":{"position":{"type":"sticky","top":"0px"},"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:0"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
<h2 class="wp-block-heading" style="font-style:normal;font-weight:700">Learn <strong>WordPress </strong><br>in three easy steps...</h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|80"}}},"backgroundColor":"accent-5","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-accent-5-background-color has-background" style="padding-bottom:var(--wp--preset--spacing--80)"><!-- wp:group {"align":"wide","style":{"position":{"type":"sticky","top":"0px"},"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:0"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
<h2 class="wp-block-heading" style="font-style:normal;font-weight:700">Learn <strong>WordPress </strong><br>in three easy steps...</h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->
<!-- wp:group {"align":"full","style":{"color":{"gradient":"linear-gradient(180deg,rgb(4,14,25) 50%,rgba(155,81,224,0) 50%)"},"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60","right":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-background" style="background:linear-gradient(180deg,rgb(4,14,25) 50%,rgba(155,81,224,0) 50%);padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:columns {"verticalAlignment":"center","align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}},"border":{"radius":"51px"}},"backgroundColor":"accent-4"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center has-accent-4-background-color has-background" style="border-radius:51px;padding-top:var(--wp--preset--spacing--40);paddi
@jamiemarsland
jamiemarsland / gist:e7922db36962503784fa08b9c6e67afb
Created November 19, 2024 09:45
Remove Negative Margin on Images in WordPress
@media only screen and (max-width: 768px) {
.wp-block-image {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
This file has been truncated, but you can view the full file.
<?xml version="1.0" encoding="UTF-8" ?>
<!-- This is a WordPress eXtended RSS file generated by WordPress as an export of your site. -->
<!-- It contains information about your site's posts, pages, comments, categories, and other content. -->
<!-- You may use this file to transfer that content from one site to another. -->
<!-- This file is not intended to serve as a complete backup of your site. -->
<!-- To import this information into a WordPress site follow these steps: -->
<!-- 1. Log in to that site as an administrator. -->
<!-- 2. Go to Tools: Import in the WordPress admin panel. -->
<!-- 3. Install the "WordPress" importer from the list. -->
@jamiemarsland
jamiemarsland / gist:583a33fbec759dd07896b8ba76a5451e
Created May 14, 2024 18:44
Remove negative margins on mobile
@media (max-width: 768px) {
[style*="margin-top:-"] { margin-top: 0 !important }
[style*="margin-right:-"] { margin-right: 0 !important }
[style*="margin-bottom:-"] { margin-bottom: 0 !important }
[style*="margin-left:-"] { margin-left: 0 !important }
}
@jamiemarsland
jamiemarsland / gist:2cc05e0c3146629c2fcc9947acb0cfca
Created May 14, 2024 04:53
Disable Negative Margins Globally on mobile
/* CSS to reset any negative margins on mobile devices */
@media (max-width: 768px) {
* {
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
}
}
html {
scroll-behavior: smooth;
}
html {
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
.scroller {
scroll-snap-align: start;
}
@jamiemarsland
jamiemarsland / gist:f27cb41835286e8045f3bfe4ac8947b7
Created October 13, 2022 18:25
Add Background image to Gutenberg Columns Block
.shorts {
background-image: url('https://woo.us2.instawp.xyz/wp-content/uploads/2020/09/product-w-jeans1.jpg');
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}