HTML & CSS based on pixspy.com inputs

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted over 3 years ago

  I am seeing the desktop version and it looks very broken on mobile landscape.

  The bigger issues with this though, are with the html.

  1. The semantics don’t make sense using h2s for numbers. They need to be in the same semantic element as the word, as both should be read out together. Eg use a list item or a paragraph around both, then use a span or strong tag around the number to target styling

  2. you should not have duplicate html. This is bad for search engines, bad for performance, and completely unnecessary. Instead just change the styling with css. All that needs to change in this is a max-width, flex-direction and text alignment in one media query

  I hope this helps

  1

  ---

  

  Aleksa Mitrović•150

  @1aleksaPosted over 3 years ago

  @grace-snow Hey, thanks for the detailed feedback. Regarding the point 2) I couldn't figure out how to change the order of the layout on mobile screen. When I was searching for it I found on StackOverflow where someone explained with doubling the html (which didn't seem to be very practical). After checking flex-direction what you wrote, now I got an idea how it could be solved just with css. Thanks a ton!

  0
• 

  T

  Grace•31,230

  @grace-snowPosted over 3 years ago

  For the image colour you can use mix-blend-mode if image is in html, or background blend mode of its a bg image. That set to multiply and a little opacity should do it

  1
• 

  Liam R•425

  @Cooly-o-CatsPosted over 3 years ago

  For the image overlay, this is what I did:

  HTML:

  <div class="image">
              <div class="img-cover"></div>
  

  CSS:

  .image{
      background-image: url(https://github.com/Cooly-o-Cats/StatsPreviewCard/blob/main/Stats%20Preview%20Card/Assets/img/Assets/image-header-desktop.jpg?raw=true);
      width: 100%;
      height: 100%;
  }
  .img-cover{
      width: 100%;
      height: 100%;
      background-color: hsla(277, 69%, 35%, 0.73);
  
  }
  

  1
• 

  Liam R•425

  @Cooly-o-CatsPosted over 3 years ago

  Like it, but did you do the mobile version? It doesn't seem very responsive.

  1

  ---

  

  Aleksa Mitrović•150

  @1aleksaPosted over 3 years ago

  @Cooly-o-Cats yeah, for the display below 400px desktop elements disappear and the mobile one is there (with the fixed width 375px). You don’t see the mobile version?

  0

  

  Liam R•425

  @Cooly-o-CatsPosted over 3 years ago

  @1aleksa Seems to be working Now!

  1

  

  Aleksa Mitrović•150

  @1aleksaPosted over 3 years ago

  @Cooly-o-Cats okay, thanks. And thanks for the image overlay comment, I’ll check it out

  0