Use the old UtahJS website as a guide on where to set breakpoints, but these are just guidelines we may have to adjust where the breakpoints are or even create new breakpoints. We want to be able to go down to a screen size of 320 pixels which is the size of an iPhone 5/SE. As you play around with shrinking the page size, pay attention to boxes breaking out of their containers. Make sure that we maintain a bit of padding on the edges of the screen at all times. Here are some pictures of things to avoid/fix.
In this picture below, we have two buttons that become stacked once the screen becomes small enough, we would want to add a bit of spacing between them once things start to stack.
In the picture below, we have an example of text overlapping a button as the screen shrinks. We don't want text or really anything to overlap each other like this.
All these images are from the old site and are things I think we can improve upon.
Use the old UtahJS website as a guide on where to set breakpoints, but these are just guidelines we may have to adjust where the breakpoints are or even create new breakpoints. We want to be able to go down to a screen size of 320 pixels which is the size of an iPhone 5/SE. As you play around with shrinking the page size, pay attention to boxes breaking out of their containers. Make sure that we maintain a bit of padding on the edges of the screen at all times. Here are some pictures of things to avoid/fix.
In this picture below, we have two buttons that become stacked once the screen becomes small enough, we would want to add a bit of spacing between them once things start to stack.
In the picture below, we have an example of text overlapping a button as the screen shrinks. We don't want text or really anything to overlap each other like this.
All these images are from the old site and are things I think we can improve upon.