All comments

@devsotterPosted over 1 year ago

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

@AlejandroPachecSubmitted over 1 year ago

Just starting to code, trying to center everything was kind of difficult.

Using tansform, padding, justify and align

@devsotterPosted over 1 year ago

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.

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

Vinicius Calefo Assarice•30

@viniciuscalefoSubmitted over 1 year ago

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.

I used the css property display flex and media query.

@devsotterPosted over 1 year ago

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

@TalhaMustafa1Submitted over 1 year ago

Faced difficulty in removing side scroll bar

Landing page using html and css

@devsotterPosted over 1 year ago

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

@sh0910Submitted over 1 year ago

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!

Responsive, CSS Grid, DOM Manipulation

@devsotterPosted over 1 year ago

"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

@developertarikSubmitted over 1 year ago

I will be glad if you write my mistakes.

Social-Proof with flexbox

@devsotterPosted over 1 year ago

"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

@MarkitoOffSubmitted over 1 year ago

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

Challenge n°2: Product preview card

@devsotterPosted over 1 year ago

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

@jmanprojectsSubmitted over 1 year ago

I don't know why, when I put 100 vw and 100 vh to the main container, it creates the scroll bars

NFT card responsive