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 :)
Hi!
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
display:flex;
align-items:center;
justify-content:center;
Or
display:grid;
place-items:center;
Hope this helps!
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.
Hope this helps!
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.
how to center my entire div to the body of the webpage? i tried using display: flex property in body to center my div but it didnt work
My guess is the body isn't 100% of the viewport.
If you set a background-color to body, the background will take the whole viewport but the actual body won't necessarily.
Try using height:100vh on the body.
Hello! first time using a .json File.
Question!
-how can I remove the hover effect of the parent element (.stats) when cursor is over the three dots?
Any feedback about how to improve my code is welcome!
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.
thank you.
The js looks very clean! I'm definitely gonna have a look to try and make my own solution a bit prettier.
Hi~~ this is my first try on HTML and CSS. what should I have to improve. Thankyou for your advise.
If this is your first try at html and css then wow!
I think you can just use width and not max-width since the design isn't supposed to shrink.
And the position:relative on the container doesn't seem to add anything.
Hello Everyone! This is my very first challenge in Front End Mentor. You may laugh, but I worked hard to get this QR code done.
I would really appreciate any feedback. I am sure there's things I can improve, or make in a different (maybe more efficient) ways.
Thank you very much in advance!
The code looks very nice to me!
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!
