Blog Card trying to use responsiveness

Community feedback

• 

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  Hey, fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…

  • These <span> should really have semantic tags like headings (<h1> to <h6>) and paragraphs (<p>) convey structure and meaning to content, improving accessibility, SEO, and readability by helping search engines and screen readers interpret the content. <span class="category">Learning</span>

  • I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,

  • Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

  • Using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.

  You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

  Marked as helpful

  1

  ---

  

  P

  Roberto Keppler•130

  @rkeppler42Posted 2 months ago

  @Stroudy

  Hey, Steven! Thank you for your time and kind advices!

  I'm gonna take a deep dive into BEM - it sounds very useful and their site is pretty cool!

  About the rem and em - I tried applying them but when comparing my design with the official one it kept looking different so I capped the units by pxs. Is there a way to insert a max-padding for example? I couldn't find it, so I just gave up and went back to pxs. But I do understand the power and importance of responsiveness. But I need to study it more too.

  Thank you for your time! Cheers!

  0

  

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  Hey @rkeppler42, You could use padding: clamp(minimum, preferred, maximum); something like this padding: clamp(1rem, 2rem, 3rem);.

  Thing is px can be directly converted to rem so it should be the exact same.

  No problem bro!

  Marked as helpful

  1
• 

  MikDra1•6,980

  @MikDra1Posted 2 months ago

  If you want to make your card responsive with ease you can use this technique:

  .card {
  width: 90%;
  max-width: 37.5rem;
  }
  

  On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.

  Also to put the card in the center I advise you to use this code snippet:

  .container {
  display: grid;
  place-items: center;
  }
  

  Hope you found this comment helpful 💗💗💗

  Good job and keep going 😁😊😉

  Marked as helpful

  1

  ---

  

  P

  Roberto Keppler•130

  @rkeppler42Posted 2 months ago

  @MikDra1 Hey MikDra1!

  Thanks for the advices! I need to study grid! I am on my initial months of Uni and we haven't covered it yet. But I will see if I can study about it on my own.

  Thanks for the suggestion about the responsiveness. I have a question: does that influence all the sizes of my child elements and their qualities (fonts for ex.)? Thank you for your comment and your time. It is much appreciated!

  0

  

  MikDra1•6,980

  @MikDra1Posted 2 months ago

  @rkeppler42

  No fonts are not touched. The card will just be at maximum of 600px

  Marked as helpful

  1
• 

  Aymen developer•620

  @aymenthedeveloperPosted 2 months ago

  i saw that you wanted to make fonts responsive without a media query, you can do that by using the clamp function when setting the font size of your text for example:

  font-size: clamp(min value, preferred value, max value);

  font-size: clamp(1rem, 1rem + 1vw, 2rem);

  now let me explain the min and max value are obvious right! the preferred value must not a be a static value meaning it you should not use px or rem alone instead you should combine a static unite with dynamic one like vw (view port width) this will make the font size grow or shrink based on the view port width.

  I hope you find this helpful.

  Marked as helpful

  1

  ---

  

  P

  Roberto Keppler•130

  @rkeppler42Posted 2 months ago

  @aymenthedeveloper Hey! Thanks for the feedback! I am going to study about clamp! That is an awesome suggestion!

  0