CSS for Mobile Site banner only

[TheGrayUmbrella]

My shop is using the Blockshop theme. On the collections pages, I’m using a Puppet Vendors profile banner at the top. It looks good on the desktop version, but on the mobile version (see attached) I am trying to figure out how to use CSS to A) center the name in the banner (as opposed to justified left) and B) reduce some of that gigantic white space below the name? And to have both of these changes ONLY apply to the mobile site. I’ve been trying so many different things and just cannot figure out anything that works. Thanks in advance!

[Howie10]

With third party stuff, the best way to figure stuff out is to learn how to find the class name of something. Any css code with a wrong class selector isn’t gonna work. So with that in mind, in Chrome, you can right-click on your page, click Inspect. This will bring up a Developers tool. In the top left corner, click the square with arrow like shown.

Then click on the element you want to select. In your case it’s an h1 class called pv-brand-name.
Just go to your banner in the theme editor, and scroll down to custom css. Css has a format. Just follow the format. This is where you can fool around and see what works and what doesn’t.
So now you have an h1 tag and you know the selector, or at least you can find it.
Next you want to tell it what to do. text-align: center sounds reasonable.
Maybe try this
.pv-brand-name {
text-align: center !important;
}
Change the selector to h1 if you wish.

Now comes the part where you want to target mobile screens only. You put this before the code
@media screen and (max-width: 749px)
Then wrap your code in the same brackets
You’ll come to something like this in the end:

@media screen and (max-width: 749px) {
    .pv-brand-name {
        text-align: center !important;
    }
}

[TheGrayUmbrella]

Thank you, that worked!