Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
12
Comments
9
Gregg Christofferson
@gchristofferson

All comments

  • Kurt Gonzales•300
    @KurtGonzales
    Submitted over 3 years ago

    respnsive landing page using html and css

    1
    Gregg Christofferson•295
    @gchristofferson
    Posted over 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
  • Shannon•50
    @Shannerella
    Submitted over 3 years ago

    stats preview card

    1
    Gregg Christofferson•295
    @gchristofferson
    Posted over 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!

  • dkvel•50
    @Theguydev
    Submitted over 3 years ago

    Responsive website with CSS grid

    1
    Gregg Christofferson•295
    @gchristofferson
    Posted over 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
  • Fraser Watt•1,790
    @fraserwat
    Submitted over 3 years ago

    Typemaster Responsive Layout

    1
    Gregg Christofferson•295
    @gchristofferson
    Posted over 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!

  • Carlos Guzman•285
    @guztrillo
    Submitted over 3 years ago

    Four card feature section master with CSS Grid en SASS

    4
    Gregg Christofferson•295
    @gchristofferson
    Posted over 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
  • CodingDuck•390
    @KaskaS-O
    Submitted over 3 years ago

    Mobile first workflow using CSS Grid

    1
    Gregg Christofferson•295
    @gchristofferson
    Posted over 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
  • Vasinc Daniel•190
    @Vasinc
    Submitted over 3 years ago

    Responsive design with SASS and Flexbox

    2
    Gregg Christofferson•295
    @gchristofferson
    Posted over 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
  • Gregg Christofferson•295
    @gchristofferson
    Submitted almost 4 years ago

    Mobile first landing page using CSS Grid and Flexbox

    2
    Gregg Christofferson•295
    @gchristofferson
    Posted almost 4 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.

  • Edisan Ibisi•50
    @edy1013
    Submitted almost 4 years ago

    Responsive Website

    1
    Gregg Christofferson•295
    @gchristofferson
    Posted almost 4 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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub