@snVladkovSubmitted about 3 years ago
Hey guys, this is my first time using SASS. Feel free to let me know if I'm doing something wrong. Happy coding!
Brooke Wargnier
@brookewargnierAll comments
- @brookewargnierPosted about 3 years ago
Really great job focusing on making the content more responsive.
One really quick tip that I just had to learn the hard way! Be careful using vh and vw, especially when it comes to text. With text, it can start to get really wonky, or way tooo small to read when you rely on vw and vh as your calculator.
Another issue I've found with vw is when you get to scrolling content, you're items will not center properly, and you'll be stuck with a scroll horizontally as well. Its a major pain. I'd set widths to 100% instead.
I'd also let your media queries, grids, and flex boxes take care of making the layout responsive and set breakpoints for your text to adapt that way.
Marked as helpful0 - @JonMStevensSubmitted about 3 years ago
I did this challenge to try and get more comfortable with CSS grid. Any feedback is appreciated, and feedback about grid is particularly welcome.
@brookewargnierPosted about 3 years agoHey JonMStevens!
Really great job using grids on this project. I love that everything smoothly transitions in sizing. I have two quick suggestions to help improve!
1.) I'd look into keeping the height proportional and also shrinking as the display shrinks. You could set up a few different break points to help with the transition between desktop, tablet, and mobile.
2.) This ties into the first tip! There are really great theories on balancing how many characters you keep per line and I think these get a little squished in that middle ground (tablet world). This link does a really great job at explaining the optimal characters per line of text so everything still reads nicely:
https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/
If you set up the different break points, you can also transition your text to get smaller gradually in order to avoid lines with only 13 characters when the optimal is 45-75.
Otherwise I think you have a really great little project here and I look forward to seeing what you do next!
Marked as helpful2 - @alessandradocoutoSubmitted about 3 years ago
Hey, guys!! I did my best to implement the features and I'm grateful if you could get ideas on how I can improve. Thank you very much.
@brookewargnierPosted about 3 years agoI'd focus on the mobile experience next! You have the webpage set up and the images move to separate lines, but the nav bar and "we are creatives" element completely disappears.
Looking at your code, it looks like your class "h-container" is not included in your media query beyond 758px.
Another thing you could look into that was suggested to me by another member is BEM methodology for naming your elements and organizing your CSS. This video gives a great overview: https://www.youtube.com/watch?v=er1JEDuPbZQ&t=782s
This really helped my organization of projects and made it so everything was more legible and easy to locate in my CSS files.
Marked as helpful2 - @ZybartasRingysSubmitted about 3 years ago
My solution for this social proof section, still bad @media any advices or suggestion will help..
@brookewargnierPosted about 3 years agoI'd say the best thing you could do is set up two media queries. That way you have one for tablet and one for mobile, and switch over to the column layout at the tablet version. (or a partial column). This will help avoid any overlapping text and start moving elements before they become too squished.
It's great that your boxes expand as you shrink down, so you have a really good base to work from. I think breaking it down into two sections will really help alleviate the bugs you're running into.
Marked as helpful1 - @jkufaSubmitted about 3 years ago
Primarily looking for feedback on how I am sizing the card and the inner music image, and any feedback for how make the page responsive more responsive. Thanks!
@brookewargnierPosted about 3 years agoFor responsiveness:
I just finished up this challenge as well, and one way I found that works is setting up a separate css page with a media query so I could better control the different sizes between a desktop version and a mobile version.
That being said, I didn't get it to be a super smooth transition, but it still allowed me to set up different cases so I could set the d different fronts/ backgrounds/ buttons/ card sizes between the mobile version and the desktop version.
I found this webpage helpful in the explanation of how to implement it: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Marked as helpful3
