Skip to main content

CSS Snippets

You can use these snippets to quickly make adjustments to the layout, elements, menus, etc of your superblog. Just add the new CSS in the "Custom CSS" section and click the "Deploy" button.

Manipulate the image's max-width​

Increase the image width to exceed the max-width of the blog post's content. 

.se-component.se-image-container.__se__float-none img {
    max-width: 120%;
    width: 120%;
    margin-left: -10%;
}

@media (max-width: 768px) {
    .se-component.se-image-container.__se__float-none img {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
    }
}

Manipulate the iframe's max-width​

Increase the iframe width to exceed the max-width of the blog post's content. 


.se-component.se-video-container.__se__float-none {
    max-width: 140% !important;
    width: 140% !important;
    margin-left: -20% !important;
    position: relative;
}

.se-component.se-video-container.__se__float-none figure {
    width: 100% !important;
    padding-bottom: 56.25% !important;
    margin: 0 !important;
}

.se-component.se-video-container.__se__float-none iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 768px) {
    .se-component.se-video-container.__se__float-none {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
}

Center-align the post title​

.post-title {
    text-align: center;
}