This week we took our Zen and Sac designs and made them responsive. This part was really fun because the structure was already in place and all we needed to do was mess with the code a bit to make it responsive. I see now why you always start with mobile and work your way to tablet and desktop because 80% of the work is already done!
I had to refer back to notes and previous lectures to get back into the responsive mindset because I hadn’t had much practice with it. It was fascinating to see the media query in action and making changes to the site.
The Zen design was a lot easier than the Sac design. The only part I really struggled with for the Zen design was getting the ticket box text to stay on one line and get the margins and padding right. I eventually figured out that the simple text-align: center could be changed to left and the text evened itself out. I’m not even sure if that was how the design was supposed to look, but I preferred the text to be on one line so I went with it.
The Sac design was more of a challenge. I went through probably 10 different variations for the middle section at 700px to make the “become a member” move to the bottom and take up the entire width of the page. First, I changed the html by wrapping the first two articles in a div, and then wrapped the third article in it’s own div. I used flexbox and flex-wrap: wrap and BOOM, changed some margins and padding and it looked great. Then I rewatched the intro video and realized we weren’t supposed to change the html so I started over. I tried to create a grid and that made the articles go right where I wanted them, except that I couldn’t get the third article to take up the whole bottom row. I then used flexbox on the middle article, but it would either align all three articles in one row or when I changed the width, would smush them to one side of the page. Ultimately, I made that middle article into a grid and then set the content within them to flex-wrap: wrap and it worked really nicely, almost like the first time I did it, but I still could not get that bottom row to fill the bottom row.
I feel like I got really close and I feel proud of how far I got with it. I’m looking forward to seeing the final solution to see what I missed. So far, I’m really enjoying these assignments because I’m learning a LOT, despite how hard they are in the process 🙂