The problem that I'm having is that when I click the button , I have to press it twice to go to the next advice Is the api the problem, or there's a different reason for it?
Hello, regarding your question:
On the API site https://api.adviceslip.com you can see the note "Advice is cached for 2 seconds. Any repeat-request within 2 seconds will return the same piece of advice."
That is the reason.
I hope this clarifies your doubt.
Greetings,
I created this using Google IDX because I wanted to try it out. I noticed that the borders of the card didn't start at the begining of the borders but just a little after. I didn't know how to do it after trying a few things, so it's not 100% accurate
Hi, regarding your comment:
It is a shadow not a border, so you could have used the box-shadow property for that.
Something like this box-shadow: 8px 8px black;
I hope it’s useful!
I still need a little bit of help with the hover effect for the image. A solution to that problem would mean a lot to me
Hi 👋🏻, regarding your comment:
background-color: hsla(178, 100%, 50%, 0.5) and then opacity: 1 on hover, like so:.bg {
position: absolute;
opacity: 0;
width: 300px;
height: 300px;
border-radius: 10px;
background-color: hsla(178, 100%, 50%, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.bg:hover {
opacity: 1;
cursor: pointer;
}
<a> or <button> (depending on what happened when clicking on it), and also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the <a> tag.I hope it’s useful : )
Regards,
This is my solution for the challenge "Stats preview card component". Please, any feedback is welcome. Thank you.
Hi 👋🏻, some of this may interest you for future projects:
<ul>.mobile-first approach (which means designing for mobile first and then for desktop or any other device) as it is widely considered best practice.mix-blend-mode property:.image {
background-color: var(--clr-primary-soft-violet);
}
.image img {
mix-blend-mode: multiply;
opacity: 0.75;
}
I hope it’s useful : )
Regards,
Hi! , If you have any suggestion or feedback will be appreciated. 😃
Hi 👋🏻, some of this may interest you for future projects:
<a> or <button> (depending on what happened when clicking on it), and also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the <a> tag.min-height: 100vh for the body as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).font-size as well as it is better for scalable layouts.I hope it’s useful : )
Regards,
Hi Soraya, nice solution,
Just in case you are not aware:
The trick of setting font size: 62.5% is no longer commonly recommended, actually there is still a lot of debate about it. In any case, it could be good to get used to thinking directly in relative units since they are the most suitable for most cases.
I hope it’s useful : )
Regards,
Hi there 👋🏼, I’m Dribbz and this is my solution for this challenge. 🚀
🛠️ Built With:
⚡️HTML5 ⚡️Vanilla CSS
The measurments between elements could've been more accurate i am trying to work on my semantic HTML / accesibility if you have any tips for me would be great🙌🏼
Thank you !✌️
Hi Dribbz, just a couple of little tips in case you want to take a look:
padding instead of margin for the <body> it will avoid the vertical scrollbar you currently have.height: 100%.I hope it’s useful, nice solution : )
Regards,
First time using tailwind CSS. I'm sure there is an easier way to change the color of the image (would want some advice for that if possible). Thanks for checking out my solution :D
Hi 👋🏻, regarding your comment:
mix-blend-mode property that specifies how an element's content should blend with its direct parent background. So, set the soft violet background-color to the image container and then:.img-color {
mix-blend-mode: multiply;
opacity: 0.75;
}
And some of this may also interest you:
height: 100%. And if the image stretches too much you can add object-fit: cover.<ul>.min-height: 100vh ('h-screen') as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).font-size.I hope it’s useful, and let me know if it worked : )
Regards,
I couldn't center everything with flexbox so I used "Transform : Translate ". What is the best way to center a simple div like this? Will I always have to try all the options until I see which one works for me?
Hi 👋🏻, regarding your comment:
You could center the content with grid or flexbox:
body {
min-height: 100vh;
display: grid;
place-content: center;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
One advantage of this over using translate is to avoid page clipping in viewports with low height (such as mobile landscape orientation).
I hope it’s useful : )
Regards,
If someone have some feedback I'd really like to know it 😊
Hi 👋🏻, some of this may interest you:
font size: 62.5% is no longer commonly recommended, and it is good to get used to thinking directly in relative units since they are the most suitable for most cases. More about the 62.5% trick here 📗media from <link rel="stylesheet" href="css/styles.css" media="screen and (min-width:375px)">. It is not necessary and it makes the page not have styles below that width.I hope it’s useful : )
Regards,
Any feedback is appreciated, Thank you!
Hi 👋🏻, some of this may interest you:
<a> or <button> (depending on what happened when clicking on it).empty alt attribute to be ignored by screen readers.min-height: 100vh for the body as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).font-size.I hope it’s useful : )
Regards,
Any feedback please to reduce the unnecessary code :)
Hi 👋🏻, some of this may interest you:
alt attribute should have at least a short description, like 'QR code to visit Frontend Mentor'.min-height: 100vh for the body as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).font-weight: bold from the <h2>.I hope it’s useful : )
Regards,