Skip to content
OverviewSolutions
13
Comments
10
Trey
@willetto

All comments

  • Morgan J.•60
    @MorganEJLASubmitted almost 2 years ago

    Is it just a matter of making a media query to make the font smaller when going from desktop to mobile? was trying to size the p section too decided to leave as is for now. any tips welcome!

    Order Summary Component - Wk1-FEM

    1
    Trey•290
    @willettoPosted almost 2 years ago

    Hey Morgan! Overall, great job, especially for week one! I noticed a few easy fixes that should help this match even more, and hopefully help you on other challenges.

    • Make sure the font colors and weights match the design. What looks like black is actually a very dark blue. If you look in the style-guide.md that came with the project, it will list out the colors. If you haven't used a color or font-weight by the end of the challenge, it probably means you missed it. Like a leftover puzzle piece. 😂

    • You're on the right track with media queries. I don't think the text-size changes, but the padding does. For the mobile view, left and right padding are 25px, but at desktop size it's 50px. I am on a Mac and open the design images in preview and just measure there.

    • Space between elements. You have great spacing with the header tag, but the short paragraph and buttons are smushed together. I like to add only margin-bottom to my elements, so I have to do less math.

    This might be a bit much, but the code I used was:

    .order-summary *:not(:last-child) { margin-bottom: 20px; }

    The bottom half of my card had a class of order-summary, the * means all children in that div, and :not(:last-child) excludes the Cancel button. So everything from the header to the buttons gets 20px of spacing between it.

    Hope that's helpful!

    0
  • Trey•290
    @willettoPosted over 2 years ago

    I used chart.js and it was pretty straightforward. I just used it with vanilla JS, no other framework.This video on chart.js helped me a lot.

    0
  • Trey•290
    @willettoPosted over 2 years ago

    Hey Imad! Nice work. And good questions too. Knowing what you need to learn is a challenge in itself. Generally, I don't use margins. Almost everything can be done with padding and using flex/grid alignment.

    I would add a class of 'card' to each div, and add CSS styling the card. If you set the layout to either grid or flex, you can then set the spacing between each item. .card {display: flex; flex-direction: columns; justify-items: space-between; padding: 20px;}

    -This video might be helpful in understanding the difference between padding and margin.

    -And this may be helpful in understanding flex-box, which can auto-calculate spacing for you.

    Lastly, I love the border-radius on the desktop layout, but it gets a bit weird on the mobile. Take the border-radius off of your section elements, and just leave it on the main. Then add overflow: hidden; to your main {}. That took me a while to figure out.

    Marked as helpful
    1
  • Trey•290
    @willettoPosted over 2 years ago

    Hi RadeQu. Nice work. I have a media-screen suggestion and a layout suggestion.

    1. You don't need a media-screen for both mobile and desktop. Write all of your base CSS (colors, hover, card layout) AND your mobile-specific layout without a media-screen. After that, add @media (min-width: 800px){} and put your desktop specific CSS in there. This is what people mean with "mobile-first workflow". It also goes way faster.

    2. Your cards look great, except they overflow from the borders. You have two options to fix this. You can change your margins to padding. Or add a class of 'card' to each div, and add CSS styling the card. .card {display: flex; flex-direction: columns; justify-items: space-between; padding: 20px;}

    This video might be helpful in understanding the difference between padding and margin: https://www.youtube.com/watch?v=zqDdws_Hvmw&ab_channel=Treehouse

    Marked as helpful
    1
  • Will•210
    @wkan17012021Submitted over 2 years ago

    Hello, does anyone know how to get the background svg images to display as per the jpeg designs? I guess its a combination of background-image and background-position. What's your thought process when trying to get the images to be in the same position? Is it trial and error with px?

    For the staggered effect, I used negative margins. Interested to know if there are better ways to do this.

    As always, constructive feedback welcome. Thanks

    Social Proof Section

    2
    Trey•290
    @willettoPosted over 2 years ago

    Hey Will! The 2 background .SVGs gave me a lot of trouble. This is the code that ended up working for me:

    body { background-image: url('images/bg-pattern-top-mobile.svg'), url('images/bg-pattern-bottom-mobile.svg'); background-position: top left, right bottom; background-repeat: no-repeat; background-size: 95%, 100%; }

    With the background-image you can add multiple files separated with a comma, and then that comma also applies to the background-position. My % size is my best guess based on the design.

    Marked as helpful
    0
  • Trey•290
    @willettoPosted over 2 years ago

    I just submitted mine and was looking for other projects to see how they did it. I think yours looks great. The first thing I noticed when previewing your site is the @media query size was really large. It actually loaded in mobile for me, even though my browser was over 1000px across. Maybe bump it down to 900?

    0
  • Trey•290
    @willettoPosted over 2 years ago

    I just submitted mine and was looking for other projects to see how they did it. I think yours looks great. The first thing I noticed when previewing your site is the @media query size was really large. It actually loaded in mobile for me, even though my browser was over 1000px across. Maybe bump it down to 900?

    Marked as helpful
    1
  • Trey•290
    @willettoPosted almost 3 years ago

    Hey Call Seven,

    Your image isn't pushing to the right and is showing some of the card background. I had the same problem while making mine. If you add .container{justify-content: space-between;} it will push both halves in your container to the outside with space between. Hope that helps!

    Trey

    Marked as helpful
    0
  • Trey•290
    @willettoPosted almost 3 years ago

    Hey, nice work! I wanted to share a trick I figured out for my box-shadow today. I tried putting a negative value for the spread-radius (4th number) and it worked great! Doing that shrunk the shadow evenly underneath the container, leaving only the lightest part of the box-shadow remaining.

    .container { box-shadow: 0 0 20px -10px var(--grayishBlue); }

    0
  • Sarah Arvin•80
    @Sarah-C-ArvinSubmitted almost 3 years ago

    Hey all! I recently finished a course that included HTML/CSS/CSS flexbox, and JS. It's been a while since I've done anything with just HTML and CSS, so I'm admittedly a little rusty and trying to get back in the habit of using it! Any feedback on this challenge would be very appreciated, I know there's likely some spacing/centering issues with my code. Thanks!

    Update: Thanks for everyone's feedback so far! I tweaked a few things and improved my design a bit, I would love to know what y'all think! For some reason, my GH Page is not updating with the changes I made. I did try to push the changes through to the page branch. Has anyone else had this happen?

    QR-code challenge using flexbox

    3
    Trey•290
    @willettoPosted almost 3 years ago

    Two things will help with the spacing of the words. First, the style guide said the <p> should be 12px. Second, you can style the <p> and <h4> tags with width as a percentage. That percentage will relate to the parent element (the white box).

    Try adding something like this to both: h4 { width: 90% ; }

    Marked as helpful
    0