AMP styles and header image

New Contributor

I've enabled Google AMP for our blog, however, when adding the logo, the header text still displays inline, which makes the header looks weird.
I think it should either hide the blog header text or have the logo and text on different lines.

 

Ideally, would be great if we could add custom CSS to modify the header ourselves, as described in:
https://www.ampproject.org/docs/tutorials/create/presentation_layout.

 

Hubspot Support suggested adding CSS as per the link above. However the code doesn't seem to be included when in AMP mode.

 

Any help is greatly appreciated.

8 Replies 8
Community Manager

Hey @marcioj

 

I thinks what you'd need to do here is to add specific AMP styling to the CSS stylesheet that you're using on the page, but it's possible that the specific CSS that you're using here is not supported by AMP

I would check out this resource to see if the code you're adding is supported: https://www.ampproject.org/docs/guides/responsive/style_pages 

Reply
0 Upvotes
Highlighted
Occasional Contributor

@nicolebrenner wrote:

Hey @marcioj

 

I thinks what you'd need to do here is to add specific AMP styling to the CSS stylesheet that you're using on the page, but it's possible that the specific CSS that you're using here is not supported by AMP

I would check out this resource to see if the code you're adding is supported: https://www.ampproject.org/docs/guides/responsive/style_pages 


AFAIK it is not possible to define AMP styles in CSS in Hubspot. When you enable AMP support, the rendering of AMP pages does not load the CSS of the template but its own. The same happens with the Head section of the page.

But now, I am curious, how would you add the AMP CSS?

Hubspot's AMP support is quite poor, that's why I am surprised about your response Smiley Happy

Community Manager

@jlamb do you have any additional insight here?

Reply
0 Upvotes
New Contributor

Any news on this?

Regular Contributor
@marcioj @nicolebrenner,

AMP will only allow the <style amp-custom> tag to be read one time. When this is turned on in Content Settings, it becomes a part of {{ standard_header_includes }} and is added to the very top of the page.

Because of this, it isn’t possible to add custom styling outside what HubSpot offers in Content Settings.

I can definitely see the merit of this, and it might be worth creating an Idea post for this. Similar to Site Header/Footer HTML, having an area to input additional custom styling would be helpful.
Community Manager

Thanks @Jlamb1 !

Reply
0 Upvotes
New Contributor

I created this idea: https://community.hubspot.com/t5/HubSpot-Ideas/AMP-Styles/idi-p/74370

 

Because I've been also struggling with an issue where the page title is showing on the page right below the logo, pushing all of the contents above below the fold. Seems like I should be able to write a quick CSS style to correct this, but currently there is no way of doing that.

 

I also opened a related idea that you may be interested in upvoting:

https://community.hubspot.com/t5/HubSpot-Ideas/AMP-Styles-for-Code-Blocks/idi-p/74347

Reply
0 Upvotes
Occasional Contributor

I am experience this AMP issue as well and HubSpot in the last week is still looking for an answer.

Reply
0 Upvotes