All comments

• 

  Agata Liberska• 4,015

  @AgataLiberska

  Submitted about 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

  2

  0

  

  Sven• 295

  @Sven72

  Posted about 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

  This comment has received 1 replyShow
• 

  P

  Katrien S• 1,070

  @graficdoctor

  Submitted over 3 years ago

  Maybe I could change the positioning of the $29. Hadn't been coding for a week, so feel proud I made this, without too many issues.

  

  Single price grid component // Mobile First, Grid

  3

  2

  0

  

  Sven• 295

  @Sven72

  Posted over 3 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

  This comment has received 1 replyShow