x-147

Latest comments

• 

  ysagohh•110

  @ysagohhSubmitted 1 day ago

  What challenges did you encounter, and how did you overcome them?

  The mobile version looked good when resizing the screen on my laptop, but it broke when checking from my phone. The image was stretched over the entire container and the text became an overlay on the image. What I did was to put this code in mobile view:

  .wrapper {
     height: max(auto, 100vh);
  }
  

  It was initially set to height: 100vh, so it was resizing to the viewport height of the phone instead of creating an overflow.

  What specific areas of your project would you like help with?

  Is there a better way to align the container at the center of the screen while the footer is at the bottom? I'm using Grid to do it in this project, and I have used Flexbox combined with margin-top: auto in the past.

  

  Responsive Preview Card using CSS Grid

  1

  10
  

  x-147•240

  @x-147Posted 1 day ago

  "Is there a better way to align the container at the center of the screen while the footer is at the bottom? I'm using Grid to do it in this project, and I have used Flexbox combined with margin-top: auto in the past."

  hmm, not sure what you mean. another way to center .wrapper is with display: flex, flex-direction: column, justify-content: center, align-items: center, min-height: 100vh, quite similar to what you have now.

  0
• 

  Leslie Bagalho•90

  @lesliebagalhoSubmitted 2 days ago

  What challenges did you encounter, and how did you overcome them?

  O hover da imagem com outra imagem e fundo. Tive que copiar de outro...

  What specific areas of your project would you like help with?

  O hover da imagem com outra imagem e fundo. Tive que copiar de outro...

  

  NFT Preview Card Component

  1

  10
  

  x-147•240

  @x-147Posted 2 days ago

  "O hover da imagem com outra imagem e fundo. Tive que copiar de outro..."

  não é grande coisa, é assim que você aprende

  one small improvement you can make, you can see when you hover the pseudo element appears larger than the image (at the bottom). this has to do with white spacing created by the image html element, since the image is an inline element it has such properties.

  to fix this, simply add display: block to .img-btm

  .img-btm {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    display: block;
  }
  

  Marked as helpful

  1
• 

  Professora Bianca•30

  @ProfessoraBiancaSubmitted 2 days ago

  What specific areas of your project would you like help with?

  It was very hard to deploy this challenge on GitHub Pages...

  After getting help from Frontend Mentor users, I managed to make the CSS work, but the Javascript still doesn't..

  Anyway, I think it was pretty close this time :)

  -UPDATE

  Got it working on Vercel!!!!

  

  First time trying Javascript

  2

  20
  

  x-147•240

  @x-147Posted 2 days ago

  from the error, it is expecting a docs directory at root during build process: Error: No such file or directory @ dir_chdir0 - /github/workspace/docs

  you can create a /github/workspace/docs in your repo and see if it works.

  i've not worked with jekyll so not sure i can help you there, it is possible to complete this challenge without a static site builder.

  also index.html is pointing to the wrong css file, shown below is the correct file (style.css not styles.css)

      <link
        rel="stylesheet"
        type="text/css"
        target="_blank"
        href="assets/style.css"
      />
  

  the desktop css looks very good (and is working once you correct filename)

  mobile is a bit broken, but we can fix that after fixing the above. i personally did not create a mobile breakpoint for this challenge since the typography, spacing, dimensions for desktop also fits for mobile.

  Marked as helpful

  1
• 

  P

  idev_cloud•70

  @CodeNautiqueSubmitted 3 days ago

  What are you most proud of, and what would you do differently next time?

  I'm proud of coding faster than the last projects that I did.

  What specific areas of your project would you like help with?

  I would like to have some help to stick perfectly to the design in the sizing card, because I have a shift.

  

  Social links profile

  3

  30
  

  x-147•240

  @x-147Posted 3 days ago

  to fix the shift, inside body tag add:

  align-items: center;
  min-height: 100vh;
  
  

  align-items will take the card to the centre of the screen (along the vertical axis), and min-height provides the space needed for the card to move.

  0
• 

  jarthurofv•140

  @jarthurofvSubmitted 4 days ago

  What are you most proud of, and what would you do differently next time?

  I'm really proud of the transition effect on the main hero image! However, I’ve been struggling quite a bit with making it fully responsive.

  What specific areas of your project would you like help with?

  I’d appreciate any suggestions on how to make the footer text display as a single line. Thank you!

  

  nft preview card component

  1

  10
  

  x-147•240

  @x-147Posted 3 days ago

  hi, you can see the image is narrower than rest of the content, this is because img-container has static width set. removing static width will have the img conform to parent containers width, like rest of the content below it.

  also, media queries appears to be broken. for this project i ignored configuring breakpoints since the card dimensions, typography, spacing etc as is fits a mobile screen. you can try opening the project on mobile phone to see this.

  nice transitions

  Marked as helpful

  0
• 

  x-147•240

  @x-147Submitted 5 days ago

  What are you most proud of, and what would you do differently next time?

  pretty good challenge, lot of subtle details like setting hsl variations and working with box shadows.

  

  order-summary-component-main

  1

  10
  

  x-147•240

  @x-147Posted 5 days ago

  curious to know how i can disable hover effect with mobile media queries, without having to reapply properties; didn't experiment with this a lot

  0