Storefront logo branding width

I am trying to increase with width of the site branding in Storefront, to accommodate a sentence and stop it wrapping. I have tried to sets of code for normal PC screen viewing.

1) from “jameskoster/storefront-logo-size-adjust-example.css” on GitHubGist

@media screen and (min-width: 768px) {
.site-header .site-branding, .site-header .site-logo-anchor, .site-header 
.site-logo-link, .site-header .custom-logo-link {
    width: 50%; /* Adjust this percentage up or down to make the logo larger 
    or smaller. */

and 2) my own

@media screen and (min-width: 768px) {
.site-header .site-branding { 
    width: 50%;

Neither works, with or without !important

Any ideas please!

Read more here: Storefront logo branding width

Leave a Reply

Your email address will not be published. Required fields are marked *