Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
4
Comments
5

Brooke Wargnier

@brookewargnierLos Angeles, CA155 points

Interior Architect turned aspiring web developer.

Latest solutions

  • Mobile first solution using HTML and CSS


    Brooke Wargnier•155
    Submitted almost 4 years ago

    1 comment
  • Mobile First solution using HTML and CSS


    Brooke Wargnier•155
    Submitted almost 4 years ago

    1 comment
  • Responsive Stats Preview Page Using HTML, CSS, & Flexbox


    Brooke Wargnier•155
    Submitted almost 4 years ago

    1 comment
  • Order Summary Solution using HTML, CSS, Grids and Flexbox


    Brooke Wargnier•155
    Submitted almost 4 years ago

    1 comment

Latest comments

  • Simeon Vladkov•120
    @snVladkov
    Submitted almost 4 years ago

    Social Proof Section made with SASS

    1
    Brooke Wargnier•155
    @brookewargnier
    Posted almost 4 years ago

    Really great job focusing on making the content more responsive.

    One really quick tip that I just had to learn the hard way! Be careful using vh and vw, especially when it comes to text. With text, it can start to get really wonky, or way tooo small to read when you rely on vw and vh as your calculator.

    Another issue I've found with vw is when you get to scrolling content, you're items will not center properly, and you'll be stuck with a scroll horizontally as well. Its a major pain. I'd set widths to 100% instead.

    I'd also let your media queries, grids, and flex boxes take care of making the layout responsive and set breakpoints for your text to adapt that way.

    Marked as helpful
  • Jonathan•105
    @JonMStevens
    Submitted almost 4 years ago

    3 Column Preview Card Component

    3
    Brooke Wargnier•155
    @brookewargnier
    Posted almost 4 years ago

    Hey JonMStevens!

    Really great job using grids on this project. I love that everything smoothly transitions in sizing. I have two quick suggestions to help improve!

    1.) I'd look into keeping the height proportional and also shrinking as the display shrinks. You could set up a few different break points to help with the transition between desktop, tablet, and mobile.

    2.) This ties into the first tip! There are really great theories on balancing how many characters you keep per line and I think these get a little squished in that middle ground (tablet world). This link does a really great job at explaining the optimal characters per line of text so everything still reads nicely:

    https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/

    If you set up the different break points, you can also transition your text to get smaller gradually in order to avoid lines with only 13 characters when the optimal is 45-75.

    Otherwise I think you have a really great little project here and I look forward to seeing what you do next!

    Marked as helpful
  • Alessandra do Couto•25
    @alessandradocouto
    Submitted almost 4 years ago

    Responsive page with CSS Grid, Flexbox and a little bit of JavaScript

    2
    Brooke Wargnier•155
    @brookewargnier
    Posted almost 4 years ago

    I'd focus on the mobile experience next! You have the webpage set up and the images move to separate lines, but the nav bar and "we are creatives" element completely disappears.

    Looking at your code, it looks like your class "h-container" is not included in your media query beyond 758px.

    Another thing you could look into that was suggested to me by another member is BEM methodology for naming your elements and organizing your CSS. This video gives a great overview: https://www.youtube.com/watch?v=er1JEDuPbZQ&t=782s

    This really helped my organization of projects and made it so everything was more legible and easy to locate in my CSS files.

    Marked as helpful
  • Zybartas•480
    @ZybartasRingys
    Submitted almost 4 years ago

    social-proof-section

    1
    Brooke Wargnier•155
    @brookewargnier
    Posted almost 4 years ago

    I'd say the best thing you could do is set up two media queries. That way you have one for tablet and one for mobile, and switch over to the column layout at the tablet version. (or a partial column). This will help avoid any overlapping text and start moving elements before they become too squished.

    It's great that your boxes expand as you shrink down, so you have a really good base to work from. I think breaking it down into two sections will really help alleviate the bugs you're running into.

    Marked as helpful
  • Jack•10
    @jkufa
    Submitted almost 4 years ago

    Order Summary — Vanilla HTML & CSS

    3
    Brooke Wargnier•155
    @brookewargnier
    Posted almost 4 years ago

    For responsiveness:

    I just finished up this challenge as well, and one way I found that works is setting up a separate css page with a media query so I could better control the different sizes between a desktop version and a mobile version.

    That being said, I didn't get it to be a super smooth transition, but it still allowed me to set up different cases so I could set the d different fronts/ backgrounds/ buttons/ card sizes between the mobile version and the desktop version.

    I found this webpage helpful in the explanation of how to implement it: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    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

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

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