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 an example of the hero box breaking out of it's section and into the left padding in red, we want to avoid this behavior, it should look like what I outlined in blue the entire time as the page shrinks/grows.
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 this image below, the two columns are starting to get pretty thin and the sponsor thank you message doesn't really have much right padding, we might want to move the sponsor thank you message below before we let it get to this point.
In this image below, the sponsor thanks message is off center to the right a bit, we should bring this back to the center so it looks more balanced.
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 an example of the hero box breaking out of it's section and into the left padding in red, we want to avoid this behavior, it should look like what I outlined in blue the entire time as the page shrinks/grows.
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 this image below, the two columns are starting to get pretty thin and the sponsor thank you message doesn't really have much right padding, we might want to move the sponsor thank you message below before we let it get to this point.
In this image below, the sponsor thanks message is off center to the right a bit, we should bring this back to the center so it looks more balanced.
All these images are from the old site and are things I think we can improve upon.