I would say either return a div over here or make the page return a div instead of a react fragment. This will ensure that the page content does not depend on the display of its parent.
I would say either return a `div` over here or make the page return a `div` instead of a react fragment. This will ensure that the page content does not depend on the `display` of its parent.
I've made the events/news flow vertically on screens that are less than 960px wide!
I also bumped up the side padding on the container in order to make the spacing look more even, however I'm still not a huge fan of how squished the cards get. So I'm wondering whether we should
(a) change the threshold at which we switch to the vertical layout? or
(b) maybe measure the padding and/or gap using percentages instead of rems so they scale as the screen size changes? or
(c) just leave it as it is?
I've made the events/news flow vertically on screens that are less than 960px wide!
I also bumped up the side padding on the container in order to make the spacing look more even, however I'm still not a huge fan of how squished the cards get. So I'm wondering whether we should
(a) change the threshold at which we switch to the vertical layout? or
(b) maybe measure the padding and/or gap using percentages instead of rems so they scale as the screen size changes? or
(c) just leave it as it is?
Link to screenshot: https://drive.google.com/file/d/1cUjzhFB0yQuQxyYcTuDfZuPVF_Ethqlv/view?usp=sharing
(for some reason I can't add it as a attachment to this message)
Yeah, make them flow vertically at around 1100px wide. Paddings/margins/gap should not be %s. Instead you can use an auto margin or a padding, and put a max width on the container.
Yeah, make them flow vertically at around 1100px wide. Paddings/margins/gap should not be %s. Instead you can use an `auto` margin or a padding, and put a max width on the container.
Even though the two divinding lines have the same styles, one looks thicker that the other. I'm not sure why.
I feel like I may have encountered this issue at some point, but right now both dividing lines look the same to me?
Chrome:
Firefox:
> Even though the two divinding lines have the same styles, one looks thicker that the other. I'm not sure why.
I feel like I may have encountered this issue at some point, but right now both dividing lines look the same to me?
Chrome:
Firefox:
Hmm, it looks a bit weird on my laptop (smaller desktop screens in general)
Maybe try using max-height, min-height, or height with a relative unit (vh, vw) instead of an absolute unit (rem, px, etc)
Hmm, it looks a bit weird on my laptop (smaller desktop screens in general)
Maybe try using max-height, min-height, or height with a relative unit (`vh`, `vw`) instead of an absolute unit (`rem`, `px`, etc)
a3thakra
Desktop and Mobile versions of the home page UI.
Closes #4 (we can create new issues for the remaining tasks)
Visit the [playground](/playground)Should we still have a playground link somewhere on the site during development?
nah, i think we'll end up removing the playground entirely
return (<><main className={styles.intro}>I think this should be a header tag instead https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header
<div className={styles.cards}>{/* TODO: add links to past events and past news */}<section className={styles.events}><h2 className={styles.cardsHeading}>Upcoming Events</h2>This should be an
h1because it's inside a section.}Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {return props.children;I would say either return a
divover here or make the page return adivinstead of a react fragment. This will ensure that the page content does not depend on thedisplayof its parent.flex-direction: row;justify-content: center;align-items: center;gap: calc(15rem / 16);gap : 1rem?
padding-bottom: calc(20rem / 16);}/* On a smaller desktop screen, decrease the horizontal space between events/news */Can we make the make the events/news flow vertically instead of horizontally on smaller screens?
I've made the events/news flow vertically on screens that are less than 960px wide!
I also bumped up the side padding on the container in order to make the spacing look more even, however I'm still not a huge fan of how squished the cards get. So I'm wondering whether we should
(a) change the threshold at which we switch to the vertical layout? or
(b) maybe measure the padding and/or gap using percentages instead of rems so they scale as the screen size changes? or
(c) just leave it as it is?
Link to screenshot: https://drive.google.com/file/d/1cUjzhFB0yQuQxyYcTuDfZuPVF_Ethqlv/view?usp=sharing
(for some reason I can't add it as a attachment to this message)
Yeah, make them flow vertically at around 1100px wide. Paddings/margins/gap should not be %s. Instead you can use an
automargin or a padding, and put a max width on the container.Even though the two divinding lines have the same styles, one looks thicker that the other. I'm not sure why.
I feel like I may have encountered this issue at some point, but right now both dividing lines look the same to me?
Chrome:
Firefox:
LGTM apart from the vertical layout on smaller things. Good job Amy!
Hmm, it looks a bit weird on my laptop (smaller desktop screens in general)
Maybe try using max-height, min-height, or height with a relative unit (
vh,vw) instead of an absolute unit (rem,px, etc)6a64013e5cinto main 2 years agoReviewers
6a64013e5c.