I was having some troubles with centering the container to the middle of the screen.
It works fine when I try to do it horizontally but whenever I try to center it vertically I fail.
If anybody got any tips on how I can do this better please do :)
Your solution looks good.
Here are my thoughts on your code:
I wouldn't personnaly use the <br> tag to force line breaks since you might want your component to adapt to multiple screen sizes.
I found that putting most of your code in a media query makes it less readable. I'd put only the things that change inside a media query and avoid them if i can find another solution. (For example, using vwas a unit, using the modern clamp(), min(), max()to adapt widths or font-sizes.)
I'm curious as to why you chose display:inline-block;.
A quick fix for the vertical centering is to have a height:100vh on your .screen, and either use
If you've got some general tips, I'm open!, Espcially on that button, making it to overflow from it's parent outside was kinda annoying and couldn't make it actually look good.
A way to achieve that is to set
position: absolute; bottom:0; left:50%; transform:translateX(-50%) translateY(50%);
to the button and
position:relative;
to the container.
This is my first time working with APIs and it was really fun. I learned a lot about async, await and a brilliant use of box shadow for glow effect. Any kind of feedback or suggestion would be highly appreciated. Happy Coding!
The button doesn't work (at least in my browser) because of caching.
A solution to get around that is to ask for "https://api.adviceslip.com/advice?_"+new Date().getTime() instead of just https://api.adviceslip.com/advice.
When you just ask for https://api.adviceslip.com/advice, the browser thinks it is the same resource you're asking everytime and doesn't refresh it.
But adding a query string that changes everytime solves the issue very easily.
An approach would be to use javascript instead of :hover.
A combination of a custom attribute that you can target with css and in js listening for the mousover and mouseout events to set that attribute to 'true'/'false' works very well.
I wanted to do this project with as much js as possible and i got to learn a lot from this project about async/await and promises. I realize that the way i did it is not very efficient but i will improve it.
please give any feedback/tips/criticisms.
I'm not sure about using <h3> for the text, since you haven't used any <h1> or <h2> on the page and you shouldn't use tags that have a meaning for decorational purposes instead of adding extra css.
And the margin: -50% doesn't seem to have any effect.
You don't necessarily need to put your <img> inside a <div>. The <img> has by default a display value of inline, so it won't respond to width or height properties, but you can change that behaviour with 'display: block;' so it will act just like a <div>.
The combination of absolute position and translation seems quite nice to me, i will definitely keep that in mind as a way to center an element.
An alternative way, if your body has only one child, is to give 'height:100vh', 'display:grid', 'place-items:center' and the child is centered!