Implement a max width for the site

[travjenkins]

Description

The site can get as wide as any monitor will allow. This means the site can get really wide and start looking weird.

Content within the site (header, body, etc) should be a max of 1280px, and padding on either side should expand as the page gets wider to accommodate monitors of all widths.

Also, the additional padding left on the blog post content should be removed for mobile devices.

Work required

• [x] agree on max width of 1280
• [x] implement max width and review pages to check where we need to ensure things get padding
• [x] remove the additional padding left on the blog post content for mobile devices.

Figma / Designs

TBD

[altitude-lucas]

@Brenosalv - as part of the acceptance criteria here, can you attach a list of the different page templates that will need to be observed during the review phase?

[Brenosalv]

@Brenosalv - as part of the acceptance criteria here, can you attach a list of the different page templates that will need to be observed during the review phase?

Sure, I'll do that

[travjenkins]

I do not want to explode scope on this but this is probably a good time to at least start documenting (if not fixing) the weird responsiveness on some of the pages. Thinking since we need to implement a width we'll already be hitting all the pages while altering the width of the view.

Here is an example from the connectors page:

[Brenosalv]

@travjenkins Sure, I can check the responsiveness on all the pages. If it's quick to solve, I'll fix it; if not, I'll document new issue.

[Brenosalv]

@altitude-lucas Here is the list of pages for review:

• Homepage - https://estuary-marketing--pr284-brenosalv-feature-im-qjveud3g.web.app
• Connectors - https://estuary-marketing--pr284-brenosalv-feature-im-qjveud3g.web.app/integrations
• Blog grid - https://estuary-marketing--pr284-brenosalv-feature-im-qjveud3g.web.app/blog/data-engineering
• About - https://estuary-marketing--pr284-brenosalv-feature-im-qjveud3g.web.app/about
• Podcasts - https://estuary-marketing--pr284-brenosalv-feature-im-qjveud3g.web.app/podcasts
• Product - https://estuary-marketing--pr284-brenosalv-feature-im-qjveud3g.web.app/product
• Case Studies - https://estuary-marketing--pr284-brenosalv-feature-im-qjveud3g.web.app/customers/casestudy/trueplatform
• Connector page - https://estuary-marketing--pr284-brenosalv-feature-im-qjveud3g.web.app/source/snowflake
• Blog post page - https://estuary-marketing--pr284-brenosalv-feature-im-qjveud3g.web.app/four-software-engineering-best-practices-to-improve-your-data-pipelines

[travjenkins]

I am not sure how I feel about the homepage. Probably not a big deal and feels A LOT better.

However, the image was really meant for a full width screen

I wonder if there is some way to make the image go to the edge like the others

Obviously these are not exactly comparable as one is like a hero image and the other is more of a background image.

[Brenosalv]

In case the animation is on the edge all the time, I believe in a very wide monitor it would be too far from the hero section or would be big enough to be hidden.

[travjenkins]

Yeah... I think it is one that just does not work anymore. However, not a huge deal as we have a home page redesign coming anyway. I think we're fine for now.