3-Column Preview Card with vanilla CSS & CSS colour variables

Community feedback

• 

  T

  Grace•31,030

  @grace-snowPosted about 3 years ago

  Hello

  I'm not seeing any button text. It's like the hover state is active by default for me but with text the same colour as the background

  In the html, look up how and when to write alt text on images. What you there at the moment is unreadable

  Also in html, the learn more buttons should be anchor tags not button elements. This is because they would trigger navigation

  Why is every element in html wrapped in a div? That's unnecessary and any excess html should be removed

  I hope this helps

  0

  ---

  

  T

  Grace•31,030

  @grace-snowPosted about 3 years ago

  @grace-snow looking at css

  • font size must always be in a responsive unit like rem, never px
  • theres no background on the buttons that's the problem on mobile
  • it's very unusual to put padding on headings instead of margin
  • remember focus visible styles on interactive elements
  • it looks like some styles like body are repeated in the media query. That shouldn't be necessary and boats the css
  • 1440px is way too late to begin the desktop layout. That would mean I would still see your mobile layout even on my mac laptop screen. Desktop media query should start at whatever point there is room for the 3 col layout,probably around 800px

  0

  

  ZenCode95•110

  @ZenCode95Posted about 3 years ago

  @grace-snow Hello. I'm not sure why the normal button styles aren't rendering for you. The page loads fine for me but in any case I'm not currently sure of how to rectify that problem.

  Yes you're right there ought to be alt text on the images, I'll be sure to add that and also change the buttons to a tags (I sometimes have a little trouble deciding which to use). Yeah I see what you mean with the divs, I'll go and remove those.

  0

  

  ZenCode95•110

  @ZenCode95Posted about 3 years ago

  @grace-snow I wasn't aware that font-size should be in rem but you make a good point - responsiveness is key.

  For the buttons issue, I'm not sure what to do there but I'll do some tinkering anyway (Maybe using a tags will help)

  Is unusual necessarily a bad thing? If it's not in line with convention then I'll be happy to alter things.

  I included the body in the media query section because I found it necessary and saw no other option to make my design work.

  Yep, anything to do with media queries gives me grief. Is 800px a standard breakpoint to use?

  Thanks for your input by the way. Seems there's always plenty of things I miss...

  0

  

  T

  Grace•31,030

  @grace-snowPosted about 3 years ago

  @ZenCode95 no 800 is not "standard" 768px is probably more common, but a breakpoint at any size that suits is fine. "Standard" lists of breakpoints only came in years ago when there were fewer devices and it's pretty irrelevant. The point is a breakpoint should start when it needs to for your design.

  Have you shrunk your design right down to 320px to check the buttons? I still see no background color on them in your stylesheet except when desktop and hovered. (Lines 85-104 is where I was looking)

  0

  

  ZenCode95•110

  @ZenCode95Posted about 3 years ago

  @grace-snow I'm all done for today but I'll fix things up soon enough. I see what you mean with the buttons (to-be links). I'll just have to do my best to get it right and update the code when I can. Thanks.

  1

  

  T

  Grace•31,030

  @grace-snowPosted about 3 years ago

  @ZenCode95 take your time ☺

  0