@fadialjawhary0
Posted
This is great. I got few suggestions for you.
1- Make the button's cursor as pointer by using this CSS property "cursor: 'pointer' "
2- Make the <a> </a> tags to have this " target='_blank' " like this <a href="Link here" target="_blank"> </a>. This will make the website be opened in a new tab.
3- On small screen sizes (around 450px width and less), the profile picture is not centered in the middle, try to make it in the middle by either using Flexbox for all the items (containers), with flexDirection: 'column' and alignItems: 'center', or by using margin: 0 auto; Try to learn and use Flexbox.
Great job :).
Marked as helpful
@Black1uk
Posted
okay, thank you very much.@fadialjawhary0
@hvQuoc133
Posted
@fadialjawhary0 Yes, I changed it according to your wishes, but my avatar still couldn't be centered using "flexDirection: 'column' and AlignItems: 'center' or using margin: 0 auto" so I used marginLeft
@fadialjawhary0
Posted
@hvQuoc133 I just checked, you are currently using "margin: 0 auto 20px auto" on the div with classname imgMain, which is similar to "margin: 0 auto;" but yours also gives a margin to the bottom, and the image is being centered in the middle correctly. :)
In order to use flexbox, you have to follow these 4 steps.
1- to the div with classname "container", add these styles: display: flex flex-direction: column align-items: center
2- to the div with classname "btnLink", add these styles: width: 100% (it gets affected by the align-items: center, so we need to fix it's width to 100%)
3- to the div with classname "imgMain", remove the styles for the margin, overflow, and border-radius. delete them.
4- add border-radius: 50% to the image directly instead
Quick note: apply the cursor: pointer to the "button" itself, not to the <a> tag.
Like that, it should be working fine :)
@hvQuoc133
Posted
@fadialjawhary0 Thank you very much, looking forward to teaching you next time <3
