Skip to content
OverviewSolutions
8
Comments
7

Callie

@Callietron300bristol170 points

Been casually learning to code over a few years, using a mix of Codecademy and Udemy courses. Currently completing the shecodes workshops. My goal is to become a freelance frontend web developer.

Latest solutions

View more solutions

Latest comments

  • Callie•170
    @Callietron300

    For breakpoints- from what I've, it's actually best to let the content define the breakpoints. This article on breakpoints is really useful

  • Callie•170
    @Callietron300

    Really enjoyed reading your process, thank you for sharing ♥️

    Marked as helpful
  • Callie•170
    @Callietron300

    Hey! I can see some people have already left comments,

    For helping you center things I would recommend using flex a bit more, have a look at my solution as I used flex to center a lot of my element, you might find it useful.

    When it comes to classes I used to be the same too, but ill be honest it looks like you've done a great job. Theres this method called BEM I learnt about it when I was following this course teaching me SASS and the two go hand in hand quite well. Id really recommend the course if you have a good grip on basic CSS and are looking to clean up your work and learn some best practices.

    For sizing i'd also look in REM, this video taught me some great stuff about units and I find rem really useful in setting the right size.

    I hope this is helpful- pls upvote my comment if it was (i get points lol)

    Marked as helpful
  • Callie•170
    @Callietron300

    Hey! Apologies, but i was interested in your issue but realised I don't quite have all the knowledge to solve your problem. But I think I've managed to work out what the issue is and some potential solutions :)

    In your container element you have a set height, however at a viewport width below 1000 your grid collapses into a column but it keeps the height: 400px which is what is causing the summary box to keep that same height and cutting your background short.

    I have a feeling if you fix your grid declarations that could be the solution. Or it might have something to do with which elements you are setting height for. An easy fix would be to use a media query to set the height to auto in your container for viewport widths below 1000.

    Sorry I cant give you a proper fix but i hope this helps you find a solution! I gave this a go a few weeks ago and was quite happy with it if you are interested. But i didn't use any grid! (pls upvote my comment if it helped you!)

  • Callie•170
    @Callietron300

    Hey, I had a look at your code after seeing your comment, I think you've used flex how I would! I'm only about 6months in but I can't work out anything I would change flex wise, so I think you have it right! I also wanted to compliment your labelling of classes all super clear. I think if you had to be picky the only thing I noticed was the padding at the bottom of your text container which added extra padding to the bottom so solve this you could just use padding-top.

  • Callie•170
    @Callietron300

    I actually just realised how to fix my overflow issue- if I add overflow: hidden to my hero box instead of the body!

View more comments