Article Preview Component using Pure CSS & JS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  Hello again Deborah! Amazing solution as always, due my lack of JS knowledge I tried this one only with CSS, but I can see that yours is working.

  There's is only a little error in the mobile version that is not responsive due the width you've used making the width behave as fixed and didnt shrink while the screen reduces, to fix that use the good and old max-width. See the code below:

  .card {
      background: var(--white);
      border-radius: 10px;
      box-shadow: 0px 40px 40px -10px rgb(201 213 225 / 50%);
      position: relative;
      /* width: 327px; */
      max-width: 327px;
  }
  

  Anyway, amazing solution, the social icon bar is working mobile and desktop!

  Marked as helpful

  1

  ---

  

  Deborah Robbiano•600

  @debriksPosted about 2 years ago

  @correlucas Ah yes of course! I know this but I forgot ;) Thank you so much again to have taken the time to look at my code! I corrected it already. Have a nice day!

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @debriks I'm thinking to start to study JS in the coming months, can you point me some good resources to start my studies? I'm a total newbie in JS

  1

  

  Deborah Robbiano•600

  @debriksPosted about 2 years ago

  @correlucas Yes of course! Here is good handbook ressources to start on JS (and other coding languages if you are interested) : https://thevalleyofcode.com/.

  PS: I actually tried the 'max-width' and just realised it actually messes all of my design for desktop, I don't know why :/ so I'll have to look more into it before doing the change that I know is necessary.

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @debriks Oh this is amazing I saved the link and I'll use it in future.

  I've checked your code and I can see that broke your layout with max-width a quick way to fix it is to use the max-width with a media query only for mobile. I think this error comes due the position: relative. But sorry for have broken your solution, my bad =(

  Applying the image with css, makes harder to work the image responsiveness, I'd say to use it as img or picture and use display: block and max-width: 100% + object-fit: cover to make the image grow ever the div width with automatic height.

  img {
  display: block;
  max-width: 100%;
  object-fit: cover;
  }
  

  Marked as helpful

  1

  

  Deborah Robbiano•600

  @debriksPosted about 2 years ago

  @correlucas With pleasure for the ressources! I actually learned a bit of JS during my courses at shecodes.io but I'm not a specialist at all, I still have to learn a lot.

  For my solution to the above challenge, I think I'm going to completely redo it actually because I'm aware of the problems you're pointing out and I want to correct them. Also I want to do a version in SASS but I think I'll redo it at the end of all of my Newbie challenges as it was really not the easiest one to do for me, still need to learn a lot about positioning.

  0