Skip to content
Submitted 3 months ago

Responsive page for Equalizer, using CSS Grid, Custom Properties, SCSS

Lukáš T.•120
@LukasT1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Equalizer landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I was able to do this challenge relatively quickly. I am getting more confident with setting up my projects and the basic workflow.

What challenges did you encounter, and how did you overcome them?

Most challenging was positioning the image and card element. I ended up using CSS Grid which was able to sort most of the difficulties I had.

What specific areas of your project would you like help with?

I would appreciate any feedback on my work. I know my code is still messy and could be cleaner. Also my file structure on source code might be a bit overkill for such small projects, but I want to be comfortable with this as i progress and it should be handy in the future.

Community feedback

  • Teodor Jenkler•3,820
    @TedJenklerPosted 3 months ago

    Hi @LukasT1,

    Nice project overall! Your project looks good, but I noticed that the absolute elements aren’t responsive or consistent. I know it can be challenging—I’ve been stuck on similar issues for hours before.

    To make your absolute elements responsive, you need to create a container element with position: relative;. Inside this container, you can use absolute elements and reference them to a specific place in the design. Instead of using px and having your absolute elements "dance" around your site, you can make them responsive with properties like top: 50%; left: 50%;, and then center them perfectly using transform: translate(-50%, -50%);.

    This approach will make your absolute elements centered and customizable with any % unit.

    Hope this was helpful!

    Best, Teodor

    0
    Lukáš T.•120
    @LukasT1Posted 3 months ago

    Hi Teodor, thanks for your feedback. I am not 100% sure i understand though. What exactly do you mean by absolute elements?

    I have to admit I was struggling with the main elements - the phone image and the card. I tried absolute positioning but after many unsuccessful attempts I decided to use CSS grid.

    As for the responsiveness it looks fine on my end, but maybe I am missing something? Here is video I made in Chrome with different viewports Thanks for clarifying. Have a great day Lukas

    @TedJenkler

    1
    Teodor Jenkler•3,820
    @TedJenklerPosted 3 months ago

    Hi again, @LukasT1! Okay, that makes sense. I didn't check your CSS to be honest only made a responsive check, but I understand why it's behaving like that if it's using grid. I would suggest remaking it with absolute positioning and % values with a translate().

    It seems like the parent’s height is changing when it isn’t needed. Try using dev tools and resize the viewport from around 1550px to 550px to see what I mean.

    Ur project is still good and it works but if u ever make a bigger project like this you will cry yourself to sleep(been there)

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord