Closed MariamM110 closed 1 year ago
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.
Under 1000px
width, there is no margin-left
for content (Breadcrumbs, Topic Card, Relation Cards)whatsoever which may not be ideal.
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
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