Skip to content
OverviewSolutions
15
Comments
2
Sven
@Sven72

All comments

  • Agata Liberska•3,995
    @AgataLiberskaSubmitted over 3 years ago

    Any feedback on the project is welcome, but I also have a question about semantic HTML.

    I initially planned to use CSS grid to position elements in desktop layout, but to achieve that, I had to pull the image container outside of the <main> element. I wasn't happy with having just a random <div>, so I thought of changing it to <aside> but I thought that it wasn't the best choice either as it literally has no content in it.

    I ended up just positioning the image absolutely which I think is the simplest solution here and I'm happy with it, but would love it if someone could comment on my <aside> problem, just so I know for the future :)

    Thanks!

    Just HTML, SCSS and Vanilla JavaScript

    3
    Sven•295
    @Sven72Posted over 3 years ago

    Hi @AgataLiberska, maybe ARIA-Label is what you are looking for. (In case you don't want to use randomly div's due to accessibility reasons.) If so, I found this explanation to ARIA, which is helpful: https://stackoverflow.com/questions/22039910/what-is-aria-label-and-how-should-i-use-it And especially this MDN article about img:role ttps://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img Cheers, Sven

    1
  • Sven•295
    @Sven72Posted about 4 years ago

    Hi Katrien, I solved the $29 with placing "$29 per month" into a div giving both "$29" and "per month" a p tag with a unique class. (Maybe an ID would be better?) `<div class="flex-container__row"> <p class="dollar">$29</p> <p class="month">per month</p>

    </div>`

    Than I applied in CSS display: flex to the div. So the pelements are aligned by default in a row.

    To center the month class vertically I need the align property from flex. So I have in my CSS:

    .month { align-self: center; color: var(--light-gray); padding-right: 90px; } Hope, this makes sense. Best, Sven

    1