Skip to content
Submitted almost 4 years ago

Sunnyside Agency - CSS Grid/Flex - Responsiveness Prioritised

Rafal•1,395
@grizhlieCodes
A solution to the Agency landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Howdy!

Another project I plan to do a video for. I mostly wanted to do this project to understand images, how their heights work, how their 'inbuilt ratios' automatically update their heights as the viewport expands horizontally.

I also wanted to see how this plays into a grid solution and practiced a bit with grid-template-rows: min-content /// auto /// max-content. In the end it was a worthwhile project. I'll spend a bit more time polishing my understanding of my own solution - as weird as that sounds - and will attempt to record a useful video or two to use in replies for anyone who might be struggling with the concepts I explored.

Cheerio 😁

Code

Please log in to post a comment

Log in

Community feedback

  • Emmilie Estabillo•5,600
    @emestabillo

    Hey @grizhlieCodes, congrats on completing this project! I'm getting some text overlap on medium widths, starting at 420px or so, down on the services and testimonial section. Some of the text actually disappears right before the next breakpoint. A few more:

    • The CTA on your nav should be left as an anchor tag instead of a button wrapped in an a tag.

    • For the images, I think there's no need to create several divs and hide/show depending on screen size. Look into srcset and maybe <picture> tag to handle image changes. I'm actually not sure if the images in the services section are meaningful. I'd probably choose to keep them as background images. Then you wouldn't have to worry about grid and overlaps.

    • The class nesting looks quite deep. section.services article.service.graphic-design .text-container .service-heading , for example, is very specific. Overriding it will be difficult. I suggest to nest sparingly, keeping classes at the root level and nest only pseudoclasses and pseudoelements.

    Hope this helps!

    Marked as helpful
  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hi there, Rafal! 👋

    Slightly late to post this! 😅 But I wanted to drop in to say great job, once again! 👏

    It looks like the discussion between you and Em has covered just about all I could suggest! 😂 Overall, everything looks really nice and I especially like the transition you put on the mobile menu! 🤩

    Well—okay, tiny thing—but it might be worth taking a look at your solution report and trying to clear up some of the errors that are there in order to improve the accessibility and semantics of your solution. 😉 I've actually learned a lot about HTML itself and a bit about accessibility by looking over my own solution reports. 😆

    For instance, it's recommended that you use spans instead of divs within button elements because spans are inline elements by default (but IDK why that matters enough to be an issue, TBH). And there isn't really a reason for button elements to be wrapped in anchor tags, since elements of that sort should either be one or the other. Just small stuff, once again, but I find it a little interesting to learn about and know! 😄

    Well, glad you learned new stuff while completing this challenge and might even make some content for others to learn from (that's what it's all about)! 👍

    Oh, yes, and keep coding (and happy coding, too), of course! 😁

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord