Submitted about 4 years ago

Used sass and flexbox. Implemented BEM

Safa Ruknuddin• 385

@safruk

Preview site View code

This is a solution for...

Huddle landing page with a single introductory section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Question: Is there any alternate to max-width. I find that I rely on it a lot specially for text. I used to use padding earlier but my design breaks a lot with padding. I don;t know if this is the correct way. I would be thrilled if you would share your views about this.

Question: I just cant figure out when to use flex-wrap and when not to.Again my design just falls apart when i use flex wrap attribute. What are some use cases for flex wrap.

Question: When I carefully look at this design ,the background image looks like its been set to contain and not cover.But I couldn't figure out how to implement that. The mobile view has the image only behind the mockups image. I looked at other peoples solution hoping to clear my confusion but I didnt find any.If anybody here has a solution can you please show me.

Community feedback

Matt Studdert• 13,611

@mattstuddert

Posted about 4 years ago

Hey Safa, nice work on this challenge! I always use min-width media queries instead of max-width. It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain. I'll then use rem units for properties like font-size, padding, margin so that everything scales proportionally when you change the font-size value on the html element for different screen sizes.

I find it to be a really nice approach for writing maintainable styles for responsive sites. I hope this helps. Let me know if you have any more questions! 🙂

Safa Ruknuddin• 385

@safruk

Posted about 4 years ago

@mattstuddert I finally tried min-width queries in the newbie single price grid component challenge :). It made me approach the design in a much more simplified way.

Shubham Sharma• 855

@shubhamthedev

Posted about 4 years ago

Hi, here are some of the answers to your questions:

For me i usually change the font sizes for the paragraphs on different screen sizes and in combination with width attribute it seems to work fine for me.
I'll be honest but i have never used flex-wrap ever but you could see a small example of how it maybe useful over here.
You could use a shorthand background: #ffffff url("img_tree.png") no-repeat right top; and put both the background-image and background-color on the body element,this worked for me.

Hope this helps.

Safa Ruknuddin• 385

@safruk

Posted about 4 years ago

@tomboynotes Yeah I do the same for font sizes along with width because I can't figure out the right amount of padding/margin most times

Looking at your example it looks as though flex wrap works best when you have same type of items with their content occupying same width. Thanks! Atleast now I won't try to use flex wrap everywhere inside flex container because I always fail.

The background shorthand I frequently use. If you look minutely at this design there's the background image only on header in mobile site. Anyways thanks for your feedback! Appreciate it. Really glad you looked into the solution. Thanks!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord