Skip to content
OverviewSolutions
6
Comments
7
Leshy
@LeshyNL

All comments

  • Vinit Gupta•20
    @thevinitguptaSubmitted over 4 years ago

    I faced a problem that I was not able to fix. The two cards on the side were not placed as mentioned in the problem. Can you help me find the problem?

    Four Card Feature Section

    1
    Leshy•580
    @LeshyNLPosted over 4 years ago

    Hi Vinit Gupta,

    The issue is that your card section is 100% of the width of the screen and each column is 33% of the width of that. With the cards being centered in each column, that means that they will move far apart as the columns get wider.

    You can fix your approach of using three columns set to display: inline-block by removing the width declarations on the columns, and setting text-align: center on the card section div. You will then need to add some margins to your cards to ensure that there is some space between them.

    However, you will notice that the layout breaks as you go to smaller layouts, and have to do more work to fix it for those. What you will want to do for this challenge, is look into CSS layout techniques, such as Flexbox.

    It will take a bit of learning and practicing to become really good with it, but it will make this challenge quite easy. See for more information https://css-tricks.com/snippets/css/a-guide-to-flexbox/. Once you have a bit of an idea how it works, https://flexboxfroggy.com is a fun way of practicing with it.

    It's a very good first attempt though, so keep going! :)

    1
  • Leshy•580
    @LeshyNLPosted over 4 years ago

    Hi @njboot! Your solution looks very good and the idea of scaling the full design is a cool one.

    Of course, when basing everything on vw units, note that you will need media queries to set both a minimum and maximum font size to ensure accessibility. You already indicated that no mobile styles are currently available, but don't forget to also limit the size on the upper end, as the design does become too large to fit and comfortably read at some point.

    Once browser support is fully there, the CSS min(), max() and clamp() functions can be used for this.

    2
  • Norbert Wronski•160
    @WronskiNSubmitted over 4 years ago

    Any suggestion how I could complete this project more clean would be appreciate. Never done dark/light mode before and I didn't check for solution. I am sure there is another way to do it and more easier than I have done it!

    Thanks for your review !

    Mobile first using sass/scss and basic javascript

    1
    Leshy•580
    @LeshyNLPosted over 4 years ago

    Hey Norbert,

    Your theme switcher solution works well, and I like how you also added in a change in the button label from 'Dark Mode' to 'Light Mode'. The toggle button could work a little nicer if you were able to click the entire toggle area, rather than just the small circle itself.

    In terms of the code, I see that you have a function that loops through all elements on the page and sets or removes an [element]--light class on each one. While it certainly works, it would likely be more efficient (in particular on larger pages with many more elements) to just toggle a single class on the body, and then set styles for the individual elements in the CSS through .theme--light .element {...}.

    A next step could be to look into using CSS variables (officially named CSS custom properties). These allow you to assign values to variables (for example: :root { --color-primary: white;}), and assign those variables to CSS declarations (like p {color: var(--color-primary);}). They are particularly useful for setting themes, as all you would then have to do when switching themes is set .theme--light { --color-primary: black;}. Everything that you have declared to use --color-primary will automatically switch, without you having to declare colours on each element for each theme separately.

    Good luck and keep coding!

    1
  • GuberPeter•20
    @GuberPeterSubmitted over 4 years ago

    Hey guys!

    I hit some walls with the columns which I used for the first time in my life. I tried to add a margin on top of the right column, but it only added additional space below the left column, not moving the text down on the right. I solved it by using padding, but I'm quite unsure why it worked and the margin not. Could you help me with that, please?

    Also, I used the recommended font styles, but didn't end up with the same letters, which was also the case with my previous task.

    Thank you in advance!

    Huddle Landing Page_Peter Guber

    1
    Leshy•580
    @LeshyNLPosted over 4 years ago

    Hey @GuberPeter,

    Another good result which looks very much according to the design. Great work for someone just starting out!

    You have very creatively used CSS columns to achieve this layout, and while you have managed to make it work in this particular case, CSS columns are not intended to be used for layout purposes in this way. They are purely for displaying text in multiple columns (like they would appear in a newspaper). There's a couple of issues with them that causes them to not be used all that much in general.

    You have noticed it for example with trying to add a margin at the top of the second column - CSS columns will have all content start at the top of each column, so the empty space of your margin gets added to the bottom of the first column instead. The padding works, because the actual div is still at the top of the column, you are just adding some space inside of it.

    Again, you will want to look into Flexbox and/or Grid in terms of placing different elements onto the webpage where you want them to go :)

    Not sure what you mean exactly by not getting the same letters by the way, as far as I can tell, you have the right fonts going on.

    Keep up the good work :)

    1
  • GuberPeter•20
    @GuberPeterSubmitted over 4 years ago

    I was a bit struggling with the div placements on the normal browser version of the page, may need some help to point out where I was wrong despite it from the outside looking like was fine.

    Thank you in advance, guys!

    Four Card Feature Section_Peter Guber

    1
    Leshy•580
    @LeshyNLPosted over 4 years ago

    Hi Peter,

    It seems as if you are positioning the cards manually to get them in the right place. It mostly works, and it is definitely an impressive result! However, it is probably not the most convenient way to go about it. In a real scenario, the size of the cards might change, and you would have to reposition them all over, for example. You will also notice that in sizes between the mobile and desktop layout, the arrangement of the cards is less ideal.

    You may want to look into CSS layout techniques such as flexbox and/or grid, which allow you to have items be positioned on the page automatically according to the rules or to a grid that you set. This makes such a design much easier and more flexible, as they can easily adapt to different screen sizes while keeping things looking neat.

    They can take a bit to learn, but they are indispensable tools to create webpage layouts these days. I would suggest the following resources to start with:

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/complete-guide-grid/

    However, quite a good first challenge and welcome to the community! :)

    1
  • Leshy•580
    @LeshyNLPosted over 4 years ago

    Hi,

    Good job on the challenge. It works well, is fully responsive and looks fine at all sizes.

    One bit of feedback that I could give is that basing the font size solely on the viewport width can lead to some accessibility and usability issues for very narrow and larger layouts; indeed, at larger widths before the breakpoint in your solution, the header and intro text become rather large.

    You can solve this by setting media queries for a minimum and maximum font size at certain widths, or set the font size to be something like 1rem + 0.5vw, so that it does scale with window size, but cannot go below a certain size (and then set a media query for a maximum size).

    There is also a new clamp() function that allows you to set minimum and maximum values, but support for mobile browsers seems to still be a bit lacking.

    See https://css-tricks.com/how-do-you-do-max-font-size-in-css/ for more info.

    1
  • Leshy•580
    @LeshyNLPosted over 4 years ago

    Your solution seems to work well at both the 375px and 1440px marks as indicated in the challenge, so well done.

    However, it doesn't work so well at widths between those, as it shows the desktop layout from 376px and up (which is usually too wide and does not fit).

    The reason is that you seem to have built the desktop layout first, and then added a media query to make it work on mobile. It is generally advisable to do it the other way around: build the CSS for the mobile layout first, then add media queries for wider layouts. That way, you will always have a website on which the content fits, as wider layouts do not show until the screen is actually wide enough.

    It is just a small change, but should make a big difference on more complex challenges and pages! :)

    1