All comments

• 

  Tian• 410

  @TianYeCal

  Submitted over 1 year ago

  The only thing is about the responsive setting, if I set the main with 100vh height when I changed to mobile width, the website can't show all the whole picture

  

  3-col-preview-card

  1

  30

  

  CODE STEAL• 680

  @leandrorodrigues00

  Posted over 1 year ago

  Hello @TianYeCal !!

  The reason for this is that when you use heigth:100vh, you are imposing on the browser that the element will be the size of the available viewport.

  When you get to mobile screens, the layout breaks down, because you make everything inside the main to occupy only the space that is visible in the user's browser.

  To resolve this unwanted behavior, you can use the min-height:100vh tag to ensure that the element occupies the entire screen, but can move off the screen if necessary.

  Notice how the height of your site looks like on mobile devices with these 2 properties:

  height: 100vh ==== 540w x 929h

  min-height:100vh ==== 540w x 1385h

  I hope I was able to help! :)

  Happy coding !

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  claudiusCCS• 30

  @claudius281930

  Submitted over 1 year ago

  O github Live Pages não carregou a imagem. Não sei porque.

  

  Cartão de visita com tecnicas css e html para melhor expansividade

  1

  20

  

  CODE STEAL• 680

  @leandrorodrigues00

  Posted over 1 year ago

  Good Afternoon Claudio!

  Your site did not load the image because you did not put a dot in the src of the image tag.

  It looks like this: <img src="/assets/image-product-desktop.jpg" >

  It should be like this: <img src="./assets/image-product-desktop.jpg" >

  Without the dot before the slash, you tell the browser that the image is in the root of the project, so it will fetch the image from:

  https://claudius281930.github.io/assets/image-product-desktop.jpg

  With the "./", it fetches the image from the parent folder, so it loads;

  https://claudius281930.github.io/CartaodeVisita_do_produto/assets/image-product-desktop.jpg

  a short summary:

  / means the root of the current drive;

  ./ means the current directory;

  ../ means the parent of the current directory;

  So if you run the project on your machine, the images will load, but when you publish to GitHub Pages that works with Jekyll, it will break the images!

  Have a nice day, happy coding !! :)

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Kevin Molina• 200

  @KevinMA95

  Submitted almost 2 years ago

  My first junior challenge.

  Any advice is welcome, especially with the button since I could not figure it out how to align it correctly every time a new advice is generated.

  

  Advice generator using vanilla css and js with semantic HTML

  3

  20

  

  CODE STEAL• 680

  @leandrorodrigues00

  Posted almost 2 years ago

  Good evening !!

  The button is going out of place because you used a percentage value. Percent value is always relative to parent value;

  When the text on your main card gets too big, the button moves down too much, because the margin value is based on it.

  You can prevent this using Rem, rem is relative to the font-size of the root element (html element). Then the button stops dancing !!

  I suggest this change: @media (min-width: 31.25rem) .btn-container { bottom: -1.875rem; }

  Have a nice day, happy coding !! :)

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  prince rana• 210

  @Prince-Ranaa

  Submitted over 2 years ago

  All feedbacks are welcomed!!! Can someone help me to write better code.

  

  html and css

  1

  20

  

  CODE STEAL• 680

  @leandrorodrigues00

  Posted over 2 years ago

  Good Afternoon!

  Try this in the body tag:

  body { min-height: 100vh; background: hsl(257, 40%, 49%); }

  will help with the white strips !!

  1