Need Help Centering Website Logo! (Storefront Theme)

Add this rule to your custom CSS (Appearance → Customize → Additional CSS):

@media screen and (max-width: 768px) {
   .site-branding {
      width: 100%;
   }
}

Kind of hard to do as your header is all mangled. You have broken html and divs that call for a class but there isn’t one in there. It would be easier to help you if you put it back the original way to was coded.

Also, if you’re going to customize the heck out of a theme like storefront you are better off doing that in a child theme rather than the parent.

@serafinnyc Is it possible to revert it back to the original way it was coded without losing my store’s design?

Also, how do you customize the child theme instead of the parent theme? Thanks man

@crouchingbruin It worked! Thank you so much!!!

All you’d be doing is reverting back to the original header.php file. If you added any tracking codes or anything else you’d want to copy that.

However, I’m more concerned about the divs that have no selector in them. Could cause issues later.

There is a plugin extension for this theme too to do a lot more but it’s a paid for plugin called Powerpack. It already has this look built into it as an option.

@serafinnyc That’s the thing, I already have Powerpack installed. It was working perfectly fine up until March I’d say. And then it started looking weird on mobile/tablet, was perfectly fine on desktop. Tried everything in Powerpack and within the customization options as a whole, nothing worked. But @crouchingbruin’s code did.

I did see that after. Just as a point of good code practice it should get cleaned up. Its like a broken arm or in this case a head’ er