NaQu• 570
@NaQu2003
Submitted
Hi, just wanted to ask if there is any better way to center a div horizontal and vertical on a page and i also want be able to increase in size when i add more content to div. Thanks
Claudio Netto Junior
@claudionetto
All comments
- Claudio Netto Junior• 180
@claudionetto
Posted
There are other ways to center a div, but the easiest and most recommended for this solution and for most as well is to use flexbox, just as you did in this challenge. As for your second question, your div is already following the size of its children vertically, so if you add more text, it will grow normally, following the defined properties.
1 @Ashok-Kumar-dharanikota
Submitted
I have two issues here,
-
I am unable to make the background the way it is given in the design. I searched a lot but didn't get the correct answer for this.
-
I didn't understand how to make the div "third" immediately right to the music icon.
I truly appreciate your help, if you help me find the mistake or correct approach for this. Thank you.
Claudio Netto Junior• 180@claudionetto
Posted
Depending on the image problem, you have some properties that can help you with this, in this case it would be: background-repeat: no-repeat; background-size: contain;
The first, as the name implies, is for non-repeat, and the second with background-size contain, the background image is sized to fit completely inside the parent element, so that the image is not cut off. There are other possibilities with these attributes too, but for this case these would be the ideas.
Another tip is to try to use shorthands, for example in the margin, in some places you have defined 3 properties for the margin when you could use the margin shorthand and define just one, for example, margin: 0px 30px 20px 30px, I'm saying that I want a margin-top of 0px, a margin-right of 30px, a margin-bottom of 20px and a margin-left of 30px, if you want to set it equal to the sides and equal vertically as well just use margin: 10px 20px; in that case you've set 10px for top-bottom and 20px for right-left.
There are several other abbreviations that made your code shorter and cleaner, it's worth researching. Good studies!!!
Marked as helpful
1-
- Furkan• 40
@ufrkan
Submitted
I couldn't center top and bottom. how can I do that?
Claudio Netto Junior• 180@claudionetto
Posted
The easiest way to do this is to use flexbox centering, just add the following to the body (the parent element containing the card):
First, set the height to 100vh, which is 100% of the height visible on the screen: height: 100vh;
Use the flex display: display: flex;
Using the flex properties, first define that it will be arranged in columns and then center it on the primary and secondary axes using: flex-direction: column; justify-content: center; align-items: center;
1 - MeaganA• 40
@MeaganA
Submitted
While building this project, my main challenge was creating a border radius for the card itself since they were two separate elements near to one another, which was the image and product description section. I was wondering if someone could look over my code and website to see if there is something I missed. A second pair of eyes doesn't hurt. Thank you so much. :)
Claudio Netto Junior• 180@claudionetto
Posted
I'm also new to programming, but one tip I can give you is to avoid using id for selectors, mainly use the class, there are some reasons for this but I'm not the best to explain them here quickly so I recommend doing some research, I'll also leave a link to a discussion about it and I advise you to read it:
https://dev.to/clairecodes/reasons-not-to-use-ids-in-css-4ni4
Now according to the solution itself, it looks pretty good, the only thing missing apparently is to reduce the line height of the h1.
Marked as helpful
0 @Nathan-Rodrigues0
Submitted
Por que a imagem na parte de cima não está arredondada?
Claudio Netto Junior• 180@claudionetto
Posted
Boa tarde, acontece que você está utilizando um padding-top na imagem, ai consequentemente ela é preenchida com um vazio branco logo acima, sendo assim quando você tenta arredondar a imagem, a parte de cima do branco que está arredondando, mas como o fundo tbm é branco não da para perceber. Para resolver isso é simples, no lugar de usar o padding-top para distanciar a imagem da parte de cima do card, use o margin-top que irá conseguir o distanciamento da forma correta e a imagem ficará devidamente arredondada. Aconselho a colocar bordas nos componentes durante o desenvolvimento que irá lhe ajudar a entender um pouco mais e tbm será mais facil de arrumar os erros, no caso ali se você colocar uma borda de alguma cor na img perceberá o erro.
Marked as helpful
0
