Content has a max-width of 1000px

MariamM110 commented 1 year ago

Contents have a max-width of 1000px On screens smaller than 1000px, the app behaves as before A few minor styling changes for phones for consistency

netlify[bot] commented 1 year ago

Deploy Preview for explain-ai ready!

Name	Link
Latest commit	dd4423b855bd99550526e61350dcbd1f07aa98c6
Latest deploy log	https://app.netlify.com/sites/explain-ai/deploys/6411eed05b47f400082d8614
Deploy Preview	https://deploy-preview-129--explain-ai.netlify.app/
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

swdilip commented 1 year ago

Under 1000px width, there is no margin-left for content (Breadcrumbs, Topic Card, Relation Cards)whatsoever which may not be ideal.

DomVinyard commented 1 year ago

should the header logo and buttons max width also be set to 1000px? and also the margins seem to have disappeared between 1000px and phone width

Yes, well spotted - usually we want the same inner element to apply to both the header and the content:

<style>
inner {
    max-width: 1000px;
    margin: 0 auto;
}
</style>

<div className="header-container">
   <div className="inner">
       I am a header
   </div>
<div>
<div className="content-container">
   <div className="inner">
       I am the main container
   </div>
<div>

this way we can give the header and the content different background colours that are full width, but the inner element is always consistent

Sigma-Labs-XYZ / Explain-AI