@isamardzijaSubmitted almost 2 years ago
- Must be a better way to make the red dot. I just styled a div, but I should look into making it with an svg perhaps.
Derwing Medina
@derwingAll comments
- @derwingPosted almost 2 years ago
You can use a google font icon -> https://fonts.google.com/icons?preview.text=fiber_manual_record&preview.text_type=custom&icon.query=fiber_manual_record remember fill the icon in the options and you can change the color to red with a ccs property
1 - @cold9302Submitted almost 2 years ago
no su supe bien como hacer el centrado de la tarjeta responsivamente , asi que solo agregue una altura en body para mas o menos intentarlo hacerlo responsive design
@derwingPosted almost 2 years agoVas a obtener un mejor centrado si haces esto: .container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Marked as helpful0 - @Jacked-99Submitted almost 2 years ago
Hello everyone 👋. This was my first challenge done with React. It was fun. The layout isn't perfect, but I did my best. Every feedback is welcome. Thanks
@derwingPosted almost 2 years agoHi @Jacked-99 great job. A few suggestions: Your name validator need a space, you can't write only your name. (maybe you like works like this). You have a lot of background-color properties in different classes like, FormDisplayer_Form__XFbQv, .App_container__Rt8T2 and your background are seen mounted on top of each other. I suggest you use a card container with a white background and put all your content inside to avoid using multiple background properties.
Marked as helpful1 - @PadhysaiSubmitted almost 2 years ago
Hello Everyone, Please review my project and suggest any feedbacks/Improvements.
Thanks.
@derwingPosted almost 2 years agoBro the UI it's excellent, but the mark all as read function didn't works. Let's me know if you need help to do it.
1 - @VitorMagnagoSubmitted almost 2 years ago
On every page I create, I'm still unsure about the dimensions (width and height) of the page's components. In this project I literally counted the pixels with the Photoshop ruler to be sure.
I had difficulty with the spacing between the image, text and the borders. To try to get as close as possible to the model design I used "justify-content: space-around" and added margin/pading to the items individually.
I believe there must be a much easier way to do it than the one I used. But it was well worth the effort.
@derwingPosted almost 2 years agoSometimes simple is best, use width 100% and use a grid system row and col for position your content and get a better responsive mobile version
0 - @Trianon27Submitted almost 2 years ago
If you have some recomendation to improve my css skills i will be glad to listen it. :3
@derwingPosted almost 2 years agoLooks great, but instead a fixed top margin, you can use % or rem measures and avoid vertical scroll on your mobile version.
Marked as helpful0 - @VitorMagnagoSubmitted almost 2 years ago
On every page I create, I'm still unsure about the dimensions (width and height) of the page's components. In this project I literally counted the pixels with the Photoshop ruler to be sure.
I had difficulty with the spacing between the image, text and the borders. To try to get as close as possible to the model design I used "justify-content: space-around" and added margin/pading to the items individually.
I believe there must be a much easier way to do it than the one I used. But it was well worth the effort.
@derwingPosted almost 2 years agoBro looks amazing! But have a little issue on mobile version.
1 - @ayo-adeboyejoSubmitted almost 2 years ago
What is the best way to define height and width CSS properties for the HTML and body tags, in a responsive webpage?
@derwingPosted almost 2 years agoI don't like to think in terms of "the best way" as it all depends on your needs. But to set the height and width of the html and body elements in CSS, you can use the height and width properties. For example:
Copy code html { height: 100%; }
body { width: 800px; height: 600px; } This will set the height of the html element to 100% of the viewport height and the width of the body element to 800 pixels. The height of the body element will be set to 600 pixels.
It's important to note that the html and body elements are block-level elements, which means that they take up the full width of their parent container by default. If you want to set a specific width for the html or body elements, you will need to set the width property as shown above.
You can also use the min-height and min-width properties to set the minimum height and width of the html and body elements. For example:
Copy code html { min-height: 100%; }
body { min-width: 800px; min-height: 600px; } This will set the minimum height of the html element to 100% of the viewport height and the minimum width of the body element to 800 pixels. The minimum height of the body element will be set to 600 pixels.
You can also use body { min-height: 100vh; }
Marked as helpful0 - @bettywangaSubmitted almost 2 years ago
Is there a way to remove the scrollbar without using 'overflow:hidden;' ?
@derwingPosted almost 2 years agoYou have many ways to hiding the scroll - this is one, set the min-height to 90vh
main { min-height: 90vh; }Marked as helpful0
