Skip to content
OverviewSolutions
4
Comments
8

Nicholas Sotter

@devsotterRio grande/RS180 points

Desenvolvedor Front-end.

Latest solutions

Latest comments

  • Nicholas Sotter•180
    @devsotter

    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.

  • Nicholas Sotter•180
    @devsotter

    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
  • Nicholas Sotter•180
    @devsotter

    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
  • Nicholas Sotter•180
    @devsotter

    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!

  • Nicholas Sotter•180
    @devsotter

    "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."

  • Nicholas Sotter•180
    @devsotter

    "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.

View more comments