Skip to content
Submitted over 3 years ago

Sunnyside Agency - HTML, CSS Grid/Flex, JS

Duyen Nguyen•950
@Duyen-codes
A solution to the Agency landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

One thing I haven't figured out is the footer on desktop mode becomes have its own space somehow. Been sitting on this problem for more than an hour. I'd be grateful if you can have a look at my codes and direct me to the right path. Thanks a lot!

Code

Please log in to post a comment

Log in

Community feedback

  • P
    David Turner•4,130
    @brodiewebdt

    Your welcome. It took me a while too. I have to go back to some of my older solutions and fix the problems with the accessibility. I found that extension a couple of weeks ago, and it is a big help. I try to recommend it as much as I can.

    Marked as helpful
  • P
    David Turner•4,130
    @brodiewebdt

    The footer looks fine to me as well.

    To clear the accessibility warnings, add an aria-label= "nav" to the nav element. Add ALT to the logo image. Put sunnyside logo in the alt text in the main nav and the footer and it will clear that one. Add aria-labels to the a tags in the footer. IE: aria-label="Facebook link" That will clear the rest of the accessibility warnings. Download AXE DevTools to clear accessibility issues while you are coding. https://www.deque.com/axe/devtools/

    Hope this helps.

    Marked as helpful
  • Rafal•1,395
    @grizhlieCodes

    Nice solution!

    I'm not sure I understand the issue exactly, the footer looks fine to me unless I'm missing something obvious 😅.

    What do you mean by 'own space'?

    Marked as helpful
  • Aakash Verma•9,500
    @skyv26

    Hi! Duyen, I have noticed some issues.

    Menu breadcrumb is not working in mobile view. It is disable or i don't what you have done.

    There are broken images path. The reason behind is you have mentioned relative path incorrectly.

    add . before images/

    <section class="gallery-container"> <img src="/images/mobile/image-gallery-milkbottles.jpg" alt="" class="gallery__image mobile"> <img src="/images/mobile/image-gallery-orange.jpg" alt="" class="gallery__image mobile"> <img src="/images/mobile/image-gallery-cone.jpg" alt="" class="gallery__image mobile"> <img src="/images/mobile/image-gallery-sugar-cubes.jpg" alt="" class="gallery__image mobile"> <img src="/images/desktop/image-gallery-milkbottles.jpg" alt="" class="gallery__image desktop"> <img src="/images/desktop/image-gallery-orange.jpg" alt="" class="gallery__image desktop"> <img src="/images/desktop/image-gallery-cone.jpg" alt="" class="gallery__image desktop"> <img src="/images/desktop/image-gallery-sugarcubes.jpg" alt="" class="portfolio__image desktop"> 
    </section>

    Finally,

    .footer-social { margin: 4rem auto 0; }

    This is your mistake. Correct and check again. All will be fine.

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