Basically I’m having some issues with the media queries working properly. I have a section for testimonials with 3 divs each with a quote inside. For desktop layout I used flexbox to place them as a row 3 across. I want to use the media query to change to a column layout with one item in each row on a smaller screen size. When I resize the screen on my computer smaller they are in a column but all over on the left side and they’re kind of stretched so they’re really tall. You can see if you click the link there what’s happening.
I really can’t figure this out so if anyone could help I’d really appreciate it. It might be something small I’m not thinking of but I’m not sure.
I looked over your site for a bit. A quick fix to make it look more what you’re looking for was to remove the max-width: 20%; from the .quotes css, and I added padding-left: 5rem; and padding-right: 5rem; as media queries. You currently do not have media queries for the .quotes section, only #testimonials. For uniformity, I think you may want to make both #testimonials and .quotes flexboxes.
I’m unable to give you a line by line fix for this, but check out how I did it on my landing page. Looking at my site/code may give you insight into how to do this. I used flexboxes to accomplish the pricing section resizing.
On my page, the parent for the pricing tiles is #pricing. I have three children div classes, .product.
Both #pricing and .product have the css property display: flex;, and the media query for my #pricing contains the flex-direction: column; property that arranges the tiles into columns.
I hope this points you in the right direction. Good work on your site so far, and happy coding!
Thanks so much Liam, your suggestions totally worked! I’m fairly new at coding and my background is in art so it really helps being able to ask questions. Your site looks great by the way. Happy coding to you too!