Submitted about 2 years ago

Responsive landing page using Grid, Flexbox and Sass

Marius• 100

@ir4M

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Skilled e-learning landing page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

First time using Sass for a Frontend Mentor project. That's why I'm unsure about my scss files structure and found it bit difficult to name my variables and wonder if there are any better naming best practices. Feel free to give me some tips.

This time I tried to take the mobile first approach, because some people mentioned it in previous submitted solutions.

The biggest problem for me was the positioning, sizing and responsiveness of the hero image for tablet and desktop view. I'm at least reasonably happy with the result but it was more trial and error with dev tools and cobble many tutorials stuff together than knowing what exactly I was doing to solve it.

I thought if I make the image width and height 100% it will automatically gets its original size and overflow his container, but it didn't. So it was always to small and I applied position absolute to his parent container and determined it's final position. But I don't know, it still feels totally wrong and I don't really like the variable positioning of the image when I scale the browser window. I'll definitely look into other solutions. Hoping to find great solutions for this.

Is there any workaround to make transition work with linear-gradient background? Cause transition only worked with my non linear-gradient button.

Community feedback

Adriano• 34,110

@AdrianoEscarabote

Posted about 2 years ago

Hi Marius, how are you?

Congratulations on completing another challenge, I really liked the result of your project, but I have a few tips that I think you will like:

I was having trouble finding a way that at higher resolutions my image would stay fixed while the resolution grew, to fix this I did the following:

We will create the picture tag that will contain the image, and we will add 3 parent divs around it, I will call it divDad1, divDad2 and so on to make it easier to understand.

in divDad1 we will put an overflow: hidden;.

in divDad2 we will put a position: relative;.

in divDad3 we will put a position: absolute;, and we will position it the way we want.

Doing this the image will freeze as the screen resolution increases.

I hope it helps and that it was clear, I'll leave an easier example below... 👍

<divDad1 style="overflow: hidden;">
    <divDad2 style="position: relative;"
         <divDad3 style="position: absolute; + positioning"
            <picture>
               <img>

If in doubt, ask!

the rest is great!

I finished this project a few days ago, if you want to look, feel free!

Hope it helps...👍

Marked as helpful

Please log in to post a comment

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