CSS Snippets

Below you’ll find CSS snippets to achieve small tasks that might not be included in Theme Settings. These snippets can be added to AppearanceCustom CSS if using SiteOrigin CSS, CustomizeAdditional CSS or your child theme style.css file.

Change the WooCommerce Mini-Cart Dropdown Direction

If your mini-cart is at the edge of your screen and the contents are being hidden out of view during hover, use this snippet to change the drop-down direction to the left.

.main-navigation .shopping-cart .shopping-cart-dropdown {
	right: 0;

Change the WooCommerce Product Archive Hover Background Color

.woocommerce ul.products li.product .loop-product-thumbnail {
	background: #00a76a;
#masthead, #masthead .top-bar, .archive-entry, #colophon.footer-active-sidebar, .post-navigation, .comment-reply-title, #colophon .site-info {
    border: none;

Remove List Type Widget Decorative Borders

#colophon .widget.widget_archive ul li, #colophon .widget.widget_categories ul li, #colophon .widget.widget_meta ul li, #colophon .widget.widget_recent_comments ul li, #colophon .widget.widget_recent_entries ul li, #masthead-widgets .widget.widget_archive ul li, #masthead-widgets .widget.widget_categories ul li, #masthead-widgets .widget.widget_meta ul li, #masthead-widgets .widget.widget_recent_comments ul li, #masthead-widgets .widget.widget_recent_entries ul li, #secondary .widget.widget_archive ul li, #secondary .widget.widget_categories ul li, #secondary .widget.widget_meta ul li, #secondary .widget.widget_recent_comments ul li, #secondary .widget.widget_recent_entries ul li {
    border: none;

Remove Widget Title Decorative Borders

.heading-strike:after, .heading-strike:before {
    content: none;

Adjust the Site Title Font Size for Mobile

Adjust the breakpoint and font-size values as required.

@media (max-width: 768px) {
	#masthead .site-branding .site-title {
		font-size: 64px;

Remove the Site Title/Logo Padding and Max-Width Constraint for the Default Header Layout

.site-header .top-bar ~ .container {
    max-width: none;
    padding: 0;