Where is this styling coming from? - Blog post listing .hs-featured-image max-width: 50%

[me2019]

Hi! I know basic CSS and HTML, but HubL is confusing as heck to me, to give you an idea of my abilities.

We are trying to take the post listing page and pull the featured image and title of the first few posts to display on our main domain. However, there's something enforcing a max-width of 50% on the featured image and I can't tell what it is - it's not our stylesheet, it's not the browser, and I can't even tell if it's on Hubspot's end or where I might find it. I've trawled through the Design Manager "control+F"-ing for .hs-featured-image and max-width to no avail.

Attached is a screenshot of the inspector tool results but you can also see it yourself at blog.bellinghamelectric.com/blog/

Appreciate any info you can offer. Thanks!

What I see using the inspectorWhat happens when I click "blog:20"

[JonStanis]

It is in a combined CSS file so it could be coming from a module or CSS file. 

It's not ideal, but you could override the 50% max with rule with a !important rule attached to the .hs-featured-image class.

[me2019]

Adding a "max-width" line to the class in the main stylesheet fixed the issue. Thanks!

[BenSBM]

Hi @me2019 

I believe that HubSpot is outputting some default styles directly to a <style> tag on the page. I am not aware of a way to prevent this from occuring. Edit to add: viewing source, you can see a <style> tag with some css for default HubSpot items - I've checked a few other sites on HubSpot and see the same there as well, indicating that it is a default behaviour of HubSpot.

If you want to edit this, you would need to declare the .hs-featured-image class in your CSS and add your styles, or you could change the class name on the image to one of your choosing and define the styles for that new class.

[me2019]

Thank-you! Adding a max-width setting fixed the issue. Although, interestingly, max-width seems to override a "width: 50%" setting on the same class in the stylesheet even though it seems like it should only override if width is trying to exceed max-width. 

Edit: Well, it fixed the formatting on the Hubspot end but not what showed up on the other end... Our best guess is that the XML code is pulling info from the RSS feed, and that RSS feed is setting the hardline code of 50% width.

Wanted to clarify this in case someone else is trying to do the same thing.