Deleting padding around title in landing page template

Highlighted
New Contributor

I am a very beginner in CSS, so this might be a relatively basic question!

 

I'm using one of the vast styles that HubSpot provides for a few landing pages. The title of the page is always contained within a gray bar that spans the width of the page. When seen on mobile, there is too much top and bottom padding around the text that makes the gray bar pretty wide and takes up most of the real estate of the page "above the fold." I would like to decrease the padding so that it doesn't take up so much space, but I haven't been able to figure out how to do that. 

 

I've gone into Design Manager to played with some padding lines under "Vast Site Setup --> vast-style.css" but the lines I've changed haven't fixed this problem. 

 

Thank you for your help!

Reply
0 Upvotes
2 Replies 2
Top Contributor

Hey,

 

Since you want to change this only on mobile, you'll need to edit or add CSS to the mobile section of the CSS.

 

You'll want to look for something like this:

 

@media screen and (max-width: 767px) {

 

and in there edit or add padding for that top banner section. I don't have Vast installed at the moment, but if you link to a page you're working on, I can take a look at what CSS you need.

Reply
0 Upvotes
New Contributor

Thanks!

 

This is the page that I am working on: https://info.craighospital.org/craig-connect-workers-comp-newsletters-sign-up.

Reply
0 Upvotes