where to find the correct css file

Developer Support CMS Development
1

Hi there - I’m a longtime wordpress user, but new to hubspot development, I’m trying to update the sizing on the hero image for a website https://www.onedegreecapital.com/contact-test - I can see when I inspect the page that I need to change the padding here: .atmc-hero {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 6rem 0;
}

but I’m unable to find this css file anywhere in the file assets. I have searched for it which yielded several options but none of them have the css file that I need. It looks like it should be in main.css but I can’t seem to find this actual reference when I look at the various main.css that are in the files.

2

Hi @lain207

If you look at the file’s URL it’s https://www.onedegreecapital.com/hs-fs/hub/3918859/hub_generated/template_assets/38227284649/1698355808751/marketplace/GiantFocal/Atomic/css/main.css

So it should be in the Design Manager under @marketplace > GiantFocal > Atomic > css > main.css

Since Atomic is a Marketplace theme, in order to edit the CSS file you’ll need to create a child theme.

Alternatively, as a quick workaround (but not best practice), you could add your CSS directly to the page by edting the page, going to the Settings tab > Advanced options > Head HTML and adding it between <style> tags.

I hope that helps!

3

I thought that’s where it would be, but in @marketplace > GiantFocal > Atomic > css > main.css I don’t see the code that needs to be updated, which is where I’m stuck.

4

@lain207 - sorry about that. I probably should have thought my answer through a little more!

In most themes based on the HubSpot boilerplate, main.css pulls in several other stylesheets using an include tag, so the CSS won’t be on the main.css file itself.

I don’t have the Atomic theme on my portal since it’s a paid theme, but I do have Atomic Lite (free) which I’m assuming uses a similar structure.

I found your snippet under @marketplace > GiantFocal > Atomic > css > _backgrounds.css:

atomic_theme.png
atomic_theme.png814×440 83.3 KB

Again, you’ll need to create a child theme to edit the code.

For theme specific questions you can always contact the people who built the theme for support (GiantFocal in this case). If you look for the theme on the Marketplace you’ll find their support website and email there.

5

Thank you so much! That’s where it is - and there is already a copy. I cannot thank you enough - this is exactly what I needed.