Skip to content
OverviewSolutions
32
Comments
6
Rachel Johnson
@rachelktyjohnson

All comments

  • Chris•180
    @chrizgxSubmitted almost 2 years ago

    Aloha! This is my first project here and I am really excited. As you may notice, I used CSS Variables to change margin-bottom property on many elements. The reason is that if I had to write a single rule for every single element multiple times, readability would have been affected negatively. I thought variables would make code much more readable and easier to alter and review. Is there a best practice for such situations, or a better way to achieve the same result? Thank you in advance.

    Responsive Product Card Component using CSS flex & Css Variables

    1
    Rachel Johnson•510
    @rachelktyjohnsonPosted almost 2 years ago

    Hey Chris, welcome to Frontend Mentor and congrats on your first-ever project! I think it's a great idea to use variables to contain values that you think will be repeated a lot, it's a very programmatic way of thinking! I think you may enjoy Sass, check it out here! https://sass-lang.com/

    1
  • Santiago Gonzalez•20
    @santigo-zeroSubmitted about 2 years ago

    I found aligning the image and the flex items below a little bit difficult and I still don't use flexbox fluently, in terms of spacing, are there any easy ways of managing spacing better than what I did? I've used a lot of margin-bottom, padding-bottom in other pages(not just this challenge) and I don't think that's a clean solution for aligning items.

    Order Summary using Flexbox.

    1
    Rachel Johnson•510
    @rachelktyjohnsonPosted about 2 years ago

    Hey Santiago, thanks for sharing your solution and question!

    You did a REALLY good job in getting the design to match up exactly to the mockup! Super impressed.

    Disclaimer, this is my view on things and others may have other solutions and thoughts! I think it's essential to think about alignment and spacing differently. For a layout like this, alignment is for the vertical alignment of the design (centring things along a vertical line). Spacing wouldn't be achieved by flexbox unless the card itself has fixed height. Spacing elements vertically in a container with fluid height would require the use of margins.

    I hope this helps!

    Marked as helpful
    0
  • Lord Robins•550
    @ZenitsuAgSubmitted about 2 years ago

    Hello, I had some issue with the font-weight property, any tips for me from your bag of tricks?

    Order Summary Component

    1
    Rachel Johnson•510
    @rachelktyjohnsonPosted about 2 years ago

    Hey Lord Robin! Thanks for sharing your solution and asking the question.

    From the font import statement in your HTML, it looks like you're using

    https://fonts.googleapis.com/css?family=Red+Hat+Display:[email protected]&display=swap

    It looks like you're using 500, 800, and 900 in your CSS, so the link should be

    https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;800;900&display=swap

    The import link may be why you're having issues with changing the font weight because they haven't been imported properly.

    I hope this helps!

    Marked as helpful
    0
  • NT-squared•110
    @nt-squaredSubmitted about 2 years ago

    Hi everyone! Here is my solution.

    I am not sure about the background-image if it is good practice? Please leave comments on how I can improve my code.

    Appreciate your feedback for me. Thank you so much.

    Profile card component

    1
    Rachel Johnson•510
    @rachelktyjohnsonPosted about 2 years ago

    Hi NT-Squared, thanks for sharing your solution. It's looking great!

    I love the solution that you went with by using ::before and ::after and giving each an absolute position that is still responsive. When I was doing this challenge myself I almost went that way because I wanted to use absolute positioning.

    Another way that you can do this is to give body two background-image and background-position properties, like so:

    background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg");
background-position: left 50vw top 40vh, right 46vw bottom 50vh;

    It does the job in 2 lines!

    Marked as helpful
    0
  • Rachel Johnson•510
    @rachelktyjohnsonPosted about 2 years ago

    Hey Pranay, The project is looking good! For the font-weight problem. Looking at your code, it looks like you've only imported 1 font-weight from Google Fonts, my guess is 400. In order to use other font weights, like font-weight:700, you'll need to make sure 700 is selected in Google Fonts. The import link would look something like this: https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap

    Marked as helpful
    2
  • Fritz•300
    @fritzadelbertusSubmitted about 2 years ago

    Currently I'm using CSS background property to change the source of the image accordingly. Is there a better way of doing it? Is it better to put supporting icons as an element beside the text or using pseudo css selectors. I'm currently using the ::before to insert the cart icon and wanting to know if that is the optimal solution?

    Product Preview Card Component using basic CSS

    3
    Rachel Johnson•510
    @rachelktyjohnsonPosted about 2 years ago

    Hey Fritz! I also used the background property to change the source of the image according to the screen size. I tend to favor this method when an image's dimensions can change. I personally inputted the SVG into the button so I could align it + text better.

    1