Skip to content
OverviewSolutions
12
Comments
9
Gregg Christofferson
@gchristofferson

All comments

  • Gregg Christofferson•295
    @gchristoffersonPosted about 3 years ago

    Hi @KurtGonzales!

    One way to do it is with absolute positioning. You need to move the .community class div inside your footer, then set position: relative on the footer. Next, edit your .community class with these rules:

    .community {
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    top: -140px;
    background-color: #fff;
    color: black;
    text-align: center;
    width: 50%;
    /* margin: 100px; */
    /* margin-top: 90px; */
    /* margin-bottom: 10px; */
    /* margin-left: 300px; */
    border-radius: 10px;
    box-shadow: 0 5px 10px 10px rgba(0, 0, 0, 0.1),
    0 3px 6px 0 rgba(0, 0, 0, 0.05);
}

    This will get it in the ballpark but you'll have to probably make a few adjustments to your margins on the section above the footer and the top value of .community. Let me know if that helps!

    Marked as helpful
    0
  • Shannon•50
    @ShannerellaSubmitted about 3 years ago
    • I can't get the hue quite right on the picture
    • In the media query I keep having this thin purple line under the picture no matter how I try to fit the content
    • My chrome screen does not go smaller than about 500px in width so it was a little hard to get the measurements right unless I pushed and tested every single change through my github page to my phone. Tips how to make that work easier would be helpful (VSCode extension?)

    stats preview card

    1
    Gregg Christofferson•295
    @gchristoffersonPosted about 3 years ago

    Hey @Shannerella 🙋‍♂️,

    Great job, very well done!

    Here's a suggestion to get the hue right on the picture.

    • on .right-picture change the background color to hsl(277, 60%, 61%);
    • on your image change the opacity to 0.75 and add mix-blend-mode: multiply.

    That should get your image looking closer to the design. I hope that helps!

    0
  • dkvel•50
    @TheguydevSubmitted about 3 years ago

    Why do I have scrollbars and how come the card on the far right no longer takes the length of the whole container when I change the display(Among the last lines)

    Responsive website with CSS grid

    1
    Gregg Christofferson•295
    @gchristoffersonPosted about 3 years ago

    Hey @Theguydev ✋

    Your scroll bar is because of this media query:

    @media only screen and (min-width: 800px)
body {
    min-width: 100%;
}

    Just remove that and your scroll bar will disappear.

    To make the card on the far right take the length of the whole container, you need to add min-height: 100% to .Testimonial-5.

    I hope that helps! Keep up the great effort!!

    Marked as helpful
    0
  • Fraser Watt•1,790
    @fraserwatSubmitted about 3 years ago

    Nice and straightforward, but I couldn't quite get the orange filter on the image after the hero section to match the figma files on this. The darker parts are much more defined on the original. Any suggestions on how to get there v much appreciated!

    Also on forcing line breaks on titles in a few places is there a simpler way of doing this than with <span> tags?

    Aside from those questions, any tweaks that could have been made v much appreciated!! 😎

    Typemaster Responsive Layout

    1
    Gregg Christofferson•295
    @gchristoffersonPosted about 3 years ago

    Hey @fraserwat 🙋‍♂️

    Nice job! Practically pixel perfect.

    What I would do to fix your orange filter is remove all the styles associated with image-filter::before. Then on .image-filter I would add the orange background color and the same border radius as your image. Then on your image I would add mix-blend-mode: multiply. You might add some opacity, maybe .75 to lighten the image up a bit too for a better match. Here's an example:

    https://codepen.io/Gregg-Christofferson/pen/qBXapGJ

    Hope that helps!

    1
  • Carlos Guzman•285
    @guztrilloSubmitted about 3 years ago

    I was capable to visualize the solution before starting to coding. Still, I always have the feeling that my solution isn't the right one. I mean, this works, but can we do this with less containers, for example?

    Either way, I'm happy with the final result. I'm not quite sure about the box shadow color, but I did my best trying to match it up. On the other hand, the border top with the highlight color from the design looks straight and in my solution the boder top curves at the border of the container due the border-radius property. So I'd like to figure out how to do that.

    If you have any suggestion about my solution I would be thankful.

    Four card feature section master with CSS Grid en SASS

    4
    Gregg Christofferson•295
    @gchristoffersonPosted about 3 years ago

    Hey @guztrillo! ✋

    Excellent job! Looks really good!

    I had a similar approach to the border-top as @markup-mitchell but instead of adding another level to the card markup, I opted for using the ::before pseudo-element. Thanks to @markup-mitchell codepen example, I figured out what was wrong with mine. I needed to add overflow: hidden to the card. Here's my example ->

    Marked as helpful
    0
  • CodingDuck•390
    @KaskaS-OSubmitted about 3 years ago

    Hi!

    Any feedback will be great! :) I had one small problem - it seems that row gaps make the content overflow grid-container. Changing grid-template-row from auto to 1fr or anything else wouldn't fix it. I tried setting min-height too but no success. Any ideas? Thanks for help!

    Kaska

    Mobile first workflow using CSS Grid

    1
    Gregg Christofferson•295
    @gchristoffersonPosted about 3 years ago

    Hey @KaskaS-O ✋

    Great job, it looks really good!!

    I looked at your code and the reason your testimonial boxes are overflowing the grid-container is because of transform: translateY(10%) on your .opinions:nth-child(2) and transform: translateY(%20) on your .opinions:nth-child(3).

    Instead try selecting .opinions:nth-child(1) and setting `transform: translateY(-20%)'

    Then select .opinions:nth-child(2) and set transform: translateY(-10%). Then adjust your row-gap accordingly. This way you are moving the elements inside the grid and not outside of it. Let me know if that works for you.

    Marked as helpful
    1
  • Gregg Christofferson•295
    @gchristoffersonPosted about 3 years ago

    Hey @Vasinc,

    Nice job using flexbox for your layout! Keep it up!

    Just a couple of tips that might help you get your desktop layout closer to the design: Set a max-width on your .container somewhere in the ballpark of 1440px and use justify-content: space-between. Then set the width of .body and .img-container each to less than 50%. Flexbox will then use the leftover percentage and add spacing between your two containers. Lastly, put text-align: left on your .body container and remove that property from all the child divs. I think if you do this it will get your code to look closer to the design.

    I hope this helps!

    Marked as helpful
    1
  • Gregg Christofferson•295
    @gchristoffersonSubmitted about 3 years ago

    Did I follow best practices for resetting my margins and by only adding margin to the bottom of elements?

    What's the best practice for using rems, ems and px? I used rems for most things and px for the rest. The only place I used ems was on the padding for my buttons so that the size of the button would change proportionately if the font size was changed. How can I use rems, ems or px to make the code more accessible?

    Mobile first landing page using CSS Grid and Flexbox

    2
    Gregg Christofferson•295
    @gchristoffersonPosted about 3 years ago

    Awesome! Thank you again for taking the time to review my solution and offer these helpful suggestions. This will make decision making for future projects much easier.

    1
  • Edisan Ibisi•50
    @edy1013Submitted about 3 years ago

    If somebody could explain to me why my background image in footer (for mobile view) is repeating? Thanks.

    Responsive Website

    1
    Gregg Christofferson•295
    @gchristoffersonPosted about 3 years ago

    Try adding background-repeat: no-repeat to your .footer element. You'll want to also add background-size: cover, so the image fills the whole section.

    Marked as helpful
    0