Masroor Khan• 50
@EduCreative
Submitted
Hi Developers,
Please have a look and suggest me improvements.
Regards
Masroor Khan
Nicholas Sotter
@devsotter
All comments
- Nicholas Sotter• 180
@devsotter
Posted
In the body, you're using 'vw', setting the minimum width of the element to occupy 100% of the viewport. If there's any margin, padding, or other element exceeding the total size of the screen, it will create a scroll bar. To fix it, remove 'min-width: 100vw;' or refactor the code using CSS best practices.
0 - AlejandroPachec• 20
@AlejandroPachec
Submitted
Just starting to code, trying to center everything was kind of difficult.
Nicholas Sotter• 180@devsotter
Posted
Hi, to center a div, follow these steps: Within the semantic tag 'main', create a parent div called '.background' or any other desired name. Then, set the background of this div as the container for your box, with the dimensions of the screen. Use 'height: 100vh' to obtain the total height of the viewport and allow space for the content to be vertically centered. Use 'width: 100%' to obtain the total width of the screen.
<main> <div class="background"> <div class="box"> </div> </div>After that, apply the flexbox properties in the class .background to center the content: 'display: flex; justify-content: center; align-items: center;'.
Finally, remove the 'height: 100%' property from the '.box' class to prevent it from inheriting the total viewport size. With these changes, your content will be perfectly centered. There is also the option to center content using grids, so I recommend doing some further research on that topic.
Marked as helpful
0 @viniciuscalefo
Submitted
I had dificult to deal with basic things like centralized divs and responsivity, i don`t used Botstrap, everyting in the exercise i done with pure HTML and CCS . If someone can help me with some advice, material ou something else I will be so grateful.
Nicholas Sotter• 180@devsotter
Posted
Hi, did you have trouble centering things in the div? It's actually quite easy. Here's what you need to do: in order for your component to be centered, it needs to be within its parent class, which in your case is the ' .background' class inside the 'section'. So far, so good. However, using only the 'display: flex;' properties won't center it because the parent class needs to have the screen dimensions. Add the properties 'height: 100vh;' and 'width: 100%;', and then the content will be centered. After doing that, remove the 'padding-top: 6rem;' that you used in the 'section' to space the content from the top. And voila, everything will be centered.
Marked as helpful
1- TalhaMustafa1• 90
@TalhaMustafa1
Submitted
Faced difficulty in removing side scroll bar
Nicholas Sotter• 180@devsotter
Posted
Congratulations on your work! I have some tips for you. When you have a button or a link, like in the social media icons, you can use the 'cursor: pointer;' property to indicate that it is a clickable element. In your '.section' class, simply add the 'flex-wrap: wrap;' property to allow the elements to break into the next line when they no longer fit in a single line. Additionally, for the image, you can set 'max-width: 100%;' to make it automatically adjust to the width of the parent container, making your website magically responsive. I hope this helps!
1 - Shea• 210
@sh0910
Submitted
Styling the radio buttons was a bit tricky, and it took some time for me to make it look close to the original design. I'd appreciate any feedback, thank you!
Nicholas Sotter• 180@devsotter
Posted
"Congratulations on your work! I have a tip for you. In the '.rating > label' class, where you define the styles to position the content of the buttons, you used the 'display: flex' and 'position: absolute' properties o try center the numbers. You can just use 'text-align: center;' to center them. That way they will remain perfectly centered. Hope this helps."
0 - Tarık• 330
@developertarik
Submitted
I will be glad if you write my mistakes.
Nicholas Sotter• 180@devsotter
Posted
"Hi, Having a quick look, I could see some mistakes. In your 'container' class, instead of using 'padding: 50px 100px;' to fit the elements you can set a 'max-width' to a fixed value, for example 'max-width: 1440px;' and then use 'margin: 0 auto;' to create an equal margin on both sides and center the content. Also, you can also try using 'flex-wrap: wrap;' in the '.persona' class so that when the screen is reduced and the content does not fit, it will break into columns, one below the other. Along with this you can use 'justify-content: center;' to center elements when they break.
1 - MarkitoOff• 70
@MarkitoOff
Submitted
Hello ! Here is my second challenge and I am very proud of the result despite the time spent and after doing some research. Now it is your turn to help me since I would like to have some feedback on the project. How can I improve? What good can I add to make the code more readable and consistent and make the site nice to see
Nicholas Sotter• 180@devsotter
Posted
Hi, taking a quick look I noticed a few things that can make your code more consistent. You can use shorthands to group and set multiple related properties with a more concise syntax. For example, instead of using separate properties like 'border-radius top right: 20px;' and 'border-bottom-right-radius: 20px;', you can just use 'border-radius: 0 20px 0 20px;' to get the same result.The same principle applies to the 'background-image' properties in your code, among others.
Also, instead of employing a media query to adjust the content for mobile screens as you did when converting 'flex-direction: row' to 'flex-direction: column', you can simply add 'flex-wrap: wrap; ' for the '.product' class. This will allow the content to be split into columns correctly. Keep up the great work!
Marked as helpful
1 - jmanprojects• 130
@jmanprojects
Submitted
I don't know why, when I put 100 vw and 100 vh to the main container, it creates the scroll bars
Nicholas Sotter• 180@devsotter
Posted
"Hi, when you use vh and vw, you are setting the height and width in relation to the viewport size, if you go beyond the content area, scrollbars will be generated. In your case, there is padding on ".container-content" which is causing it to break and exceed the viewport. You can solve this kind of problem by using the "box-sizing: border-box;" property (I recommend looking into this). You can also remove the padding or use fixed measurement units such as px."
Marked as helpful
1
