Skip to content
OverviewSolutions
24
Comments
8
Randall3475
@Randall3475

All comments

  • Randall3475•360
    @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
  • Randall3475•360
    @Randall3475Posted about 1 year ago

    Nice organization of files!

    0
  • Randall3475•360
    @Randall3475Posted over 1 year ago

    You did a very good job!

    1
  • MiloosN5•190
    @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.

    Responsive layout for stats preview card

    2
    Randall3475•360
    @Randall3475Posted over 1 year ago

    Hello, 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 helpful
    1
  • Deniz-x•20
    @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!

    Responsive Product Card

    1
    Randall3475•360
    @Randall3475Posted over 1 year ago

    Hello 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.

    Here's an awesome article on this

    1
  • Lo-Deck•2,790
    @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.

    Profile card component(HTML, CSS, Flex, Mobile-first)

    1
    Randall3475•360
    @Randall3475Posted over 1 year ago

    Hello, 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 helpful
    1
  • Luka Mendonça•290
    @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

    News homepage

    1
    Randall3475•360
    @Randall3475Posted over 1 year ago

    The 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 helpful
    1
  • Jo Young•840
    @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.

    Intro section with dropdown navigation [Redesign]

    3
    Randall3475•360
    @Randall3475Posted over 1 year ago

    Looking 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