haydy778
commented
1 month ago Navigation Bar
While making the website responsive I started with the navigation bar. This involved making a hamburger menu that slides in and out. Originally I made the links container slide from the left and it took up the whole width of the screen. I then decided against this as it was a waste of space. Instead I made the container come from the right and decided to make it very thin to take up less space along the width of the screen. This allows the user to still see the header image.
Rectors Welcome
This was a very simple responsive adjustement which just involved me adding a flex direction column instead of row so the text box moved under the image.
Explore
This was also a very easy section to make responsive as it just involves adding a flex wrap property so the containers wrap underneath each other if the screen width is too small.
Whats On/News Section
For this section I decided to drop the news section below the whats on section so everything doesn't squish together. Along with the flex wrap on the news section it makes the images go underneath each other to save space.
Rugby/Debating/Hockey/Chess Gallerys
These gallerys are already responsive due to the width propertys on the images and containers, so the images just get smaller as the screen does.
Debating/Choir - Text/Image Containers
Both these pages have images and text blurbs which when the screen gets smaller they wrap underneath each other so the image is on the top and the text is on the bottom. The Debating page only involves a flex wrap. But the Choir page involved changing the flex direction to column at 1100px.
Chess Page
The chess page also just required a flex wrap on the border boxes with a title and subtext. I also had to add a 25px margin to the containers so the borders didnt touch each other before they wrapped underneath each other.
This involves making sure the website is responsive on different size screens.