Skip to content

Instantly share code, notes, and snippets.

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 */
}
@jamiemarsland
jamiemarsland / gist:dfa1f1a1e19e92e4e450bcbf9b2af91d
Last active October 13, 2022 18:24
Reverse Gutenberg Columns on Mobile (use 'reverse-mobile' as class for Column)
@media (max-width: 768px) {
.reverse-mobile {
flex-direction: column-reverse;
}
}
.wp-block-navigation .wp-block-navigation-item__label:hover {
background-color: #CE4520;
border-radius: 25px;
color:white;
}
.wp-block-navigation .wp-block-navigation-item__label {
padding:10px;
}
.wp-block-image
{
border-radius: 76% 24% 67% 33% / 30% 30% 70% 70% ;
}
.wp-block-image:nth-child(2)
{
border-radius: 56% 44% 66% 34% / 52% 50% 50% 48%
}
.roundedpics {
border-radius: 25px;
}
@jamiemarsland
jamiemarsland / gist:fc53718a7e062ee3c81f26503d3a38c7
Created June 28, 2021 14:50
CSS to fix image in column to bottom of Cover Block
.wp-block-cover.alignfull,
.wp-block-columns {
margin-bottom: 0;
padding-bottom: 0;
}
@jamiemarsland
jamiemarsland / gist:4af06d5cb0e67b2e4903f49b7ba8adeb
Created June 7, 2021 09:18
Glassmorphism Code for Gutenberg
.glass
{
background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
.background {
background-color: #533cd245;
padding:45px;
box-shadow: 1px 1px 50px 1px #000;
transition: box-shadow 0.3s ease-in-out;
}