...made with a lot of love 🤘🏻🙂
Randall3475
@Randall3475All comments
- @CheosphereSubmitted 11 months ago@Randall3475Posted 11 months ago
Hello!
How do you make these pixel perfect? I follow every value provided in the Figma file, but in the end it's still not pixel perfect.
What's your secret?
Thanks!
2 - @DenRiskSubmitted 12 months ago
- @ncarfSubmitted over 1 year ago
Any feedback is welcome, thanks <3
- @MiloosN5Submitted over 1 year ago
I'm intrested, since I've done this challenge with webpack, are @forward and @use valid? It didn't work for me, but @import does. In addition, any suggestion for better SASS organization will be helpful.
@Randall3475Posted over 1 year agoHello, the
@use
and@forward
methods - as of now - only work in Dart Sass, which is the version of Sass that includes all newer features.More on Dart Sass here: Sass: Dart Sass
Marked as helpful1 - @Deniz-xSubmitted over 1 year ago
I used HTML and CSS to make this responsive product card. Figuring out dimensions so that the content was not overflowing from the card was difficult. Any tips on how to make sure your text and buttons stay within the card are welcome, or any feedback really!
@Randall3475Posted over 1 year agoHello Deniz, you are using explicit heights and widths, these are not responsive, therefore causing your elements to overflow (flow out of their container).
It is preferred to use max- and min heights or widths.
1 - @Lo-DeckSubmitted over 1 year ago
Hi Front-end Mentor community.
Here is my challenge for Profile-card-component. I did the background with this code example below but i dislike the behaviour when I resize it. For mobile or desktop the background looks well, my problem is when I did the translation desktop to mobile and vice-versa. If you can give any idea for a better result .
background: url(./images/bg-pattern-top.svg) -44rem -52rem / 100% no-repeat, url(./images/bg-pattern-bottom.svg) 42rem 22rem / 80% no-repeat, hsl(185, 75%, 39%); @media screen and (max-width:600px) { body{ background: url(./images/bg-pattern-top.svg) -22rem -25rem / cover no-repeat, url(./images/bg-pattern-bottom.svg) 15rem 20rem / cover no-repeat, hsl(185, 75%, 39%); } }
Thank you all.
@Randall3475Posted over 1 year agoHello, you should use relative values on your background-position property. Meaning, the position will adjust based on the viewport of your screen. The calc function is a good way to do this. Here's an example:
background-position: right calc(47vw + 15%) bottom calc(65vh - 15vw), left calc(40vw + 25%) top calc(72vh - 10vw);
The first calc instance is taking 47vw units and adds 15% of whatever the current screen size is to it, resulting in a dynamic position.
Finding out the right values can be tricky. You might have to play around with it.
Marked as helpful1 - @rwxgantaSubmitted over 1 year ago
Hi, peeps o/
I really struggle on the grid alignment in this project. Couldn't figure it out how to align the read more btn with the end of the news. Other thing is the nav menu that, when resizing the screen, does this really fast flick in and out of the screen. Maybe it's something that just happens, becouse CSS .-.
I would really love some feedback on this project. Not really the most bealtiful code but I did my best :)
TY
@Randall3475Posted over 1 year agoThe flicker happens, because as soon as the screen reaches 670px, you put a transition and a translateX on the nav. This should not be an issue, because when you visit your site on a small screen - for example on a mobile - the browser would already render your nav element with the styles appropriate for the screen size, hence the style change does not happen and there would be no flickering. You could also observe this behaviour on big sites even.
Marked as helpful1 - @Jo-cloud85Submitted over 1 year ago
This is my first time doing a loading page. I don't own 100% of the design's originality. I took design references and combined/adapted them from different sources (references listed under my README.md file). I just want to learn how to integrate some of these components/animations into my solution. The hovering transition for the login and register buttons is somehow not very smooth. Not sure if it is because the CSS conflicts with Bootstrap's default settings.
@Randall3475Posted over 1 year agoLooking slick! If Snap was a Web3 website. What do you use to create your images? Are you doing it by yourself or perhaps using some kind of AI image generation tool?
0