Getting a better grasp of flexbox and first time using qmedia, which was not working at the beginning because of not using the proper @media screen and syntax. Also I forgot to implement flexbox in Qmedia.
When changing the height of my image in "body", the width automatically adjust as well so I could not get the image to get the right size on a smaller screen.
Any tips or advice on my css coding is welcoming!
Hi! Here is a little tip for you, your image on the mobile view seems a little deformed, this is due to his aspect ratio being modified, to fix that you can use the object-fit: cover; property in your .product-image class, hope that it helps!
Hey guys, one more exercise done. Any tips or advices are welcome. Happy coding!! :)
Hi! Your solution looks great! But here is a little tip for you, if you pay attention there is a little gap between the bottom of the overlay and the image (at least using FireFox), to fix that you need to put a display: block; to your image element, hope that it helps!
** What I couldn't do properly? **
Any feedback is welcome :))
Hi! After tinkering around I found that the elements causing overflow are this ones:
If in the future you have this same problem, a little trick to identify the elements causing overflow is to give all elements a border Something like this: * {border: 1px solid black}, this way you will be able to see wich container is overflowing
Again, my question is regarding the sizing. There was no break-point mentioned in the style-guide, but the designs show different sizes. I have assumed a break-point on my own. Is a more fluid experience expected? In which case I would have to do complicated maths and use clamp to resize everything smoothly. Is that usually expected, because it seems too much work for no utility. Is my break-point good? (min-width: 534px)
Hi! I personally use media queries just when its completely necessary, for components like this where the only thing that changes is the size of things and not the distribution I always use just clamp on the elements that need to change, clamp is not nearly as complicated as it seems, so give it an opportunity!
I couldn't get the eye to be fully visible because of the background opacity. I found sizing the image perfectly very difficult as well as aligning the eye perfectly.
Hi! An easy fix for your problem is that instead of changing your #view opacity to .5 on hover, change it to opacity 1 and just lower the opacity of the background-color to .5, like this:
#view:hover {
opacity: 1;
background-color: hsl(178, 100%, 50%, .5);
}
This way the eye will be fully visible because you only will change the background color opacity, but not of the entire container! Hope that it helps!
PD: If you put border-radius: inherit; to your #view, it will have the same border radius that the image
Hey Frontend Mentor family!
First challenge, I'd love to get some feedback on areas of improvement!
Please check out my GitHub repo to see what I learned/struggled with, but in a nutshell:
Features I added:
All and any feedback is welcome!
Hi! Congratulations for your first challenge! After taking a look at your code it seems that you didn't import properly the fonts that you need, that's why your solution doesn't match the design, to fix it you only need to paste this line in the head of your main CSS:
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&family=Montserrat:wght@500;700&display=swap');
Hope that it helps!
The only feedback I have for myself is that my JavaScript is I feel, super messy. I feel there must be a better way to assign the hidden part in a neater way in JS. Any suggestions on this would be appreciated!
Feedback encouraged!
Hi! I see that you handle the hover of the bars with JS, i think that there's no really need of doing it that way, you can use the ::after or ::before pseudo element as your "money of the day" hover, a good thing about those pseudoelements is that they can get their value from a html attribute with the attr() function like this: content: attr(YourAttributeName) "", so with your JS you can set a custom attribute to the bars that gets its value from the JSON, and then use your ::after (or before) with the attr() function to show it, here is an example:
//HTML
<div class="example" custom-attribute="$54"> Bar </div>
//CSS
.example::after {
content: attr(custom-attribute) "";
position: absolute;
inset: 0;
background-color: black;
width: max-content;
height: max-content;
display: none;
}
.example:hover::after {
display: block;
}
In my solution I used this approach, so if you want a better example you can take an eye to my solution, hope that it helps!
Background-image didnt load when I deploy. You can check codepen If you want to look. https://codepen.io/Yunuscinar41/pen/dymLyXr
Hi! Try to add two dots at the start of your url, like this:
background: url("../images/bg-desktop.svg") no-repeat;
If im not wrong that will solve the problem!
I had issues with keeping containers at the same size after adding padding but box-sizing:border-box; resolved it! Is it good practice to put it in the universal selector before you start styling?
Hi! About your question, yes, it is a good practice, actually it should be the standard, so practically everyone starts their codes with a box-sizing: border-box; I can't think in a situation where it could be see as a "bad" thing
how to set the image active state?
Hi! The way that i recommend for doing overlays is with either the ::after or ::before pseudoelement, here i did an example of a functional overlay for your card:
First of all, you will need to put your .nft image in a container, in this example i used a <div> container with the .overlay class:
<div class="overlay">
<img src="/images/image-equilibrium.jpg" alt="NFT" class="nft">
</div>
Then, you will need to make your ::after or ::before pseudoelement, in this case i used an ::after pseudoelement:
.overlay::after {
content: "";
position: absolute;
inset: 0;
background-color: #ff000087;
transform: translateX(100%);
background-image: (Your eye icon here);
transition: .3s;
border-radius: 8px;
}
//You also need to put a overflow::hidden; property inside your .overlay class, thats because im using a transform: translateX; to hide the overlay
.overlay {
position: relative;
overflow: hidden;
}
And with that you're almost done! Now we just need to show the overlay when you hover the cursor on the image:
.overlay:hover::after {
transform: translatex(0);
}
With this you will have a working overlay effect, you can customize it as you like of course. Hope that it helps!
PD: You should also add a display:block; property to your .nft image, this is to prevent a little gap between the parent container and the image
Just realized that the background isn't showing properly. I used vscode to make this component, so maybe that is the issue. If you see anything in my code that's not allowing it to show please let me know.
Hi! Try changing your background path from
background: url(/images/pattern-background-desktop.svg) no-repeat center/cover;
to
background: url("../images/pattern-background-desktop.svg") no-repeat center/cover;
That's the way that i always use and i never had any problem, hope that it helps!
— I could not size the paragraph and the title like it was shown in the design. — maybe the CSS, so please if you are a pro check it out. — no, t don't have any questions about best practices.
Hi! Your page probably isn't showing up because your main html have to be named as "index.html" and not "index1.html"
