Skip to content
Submitted over 4 years ago

Huddle landing page

Aldhair Escobarā€¢165
@aldhairescobar
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with alternating feature blocks
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi there! I have problems with the call-to-action box where I think a need to use the position: absolute, I can't figure out how to make it responsive, I don't want to have a lot of media queries trying to change the percentages (that would be my solution xD)..

I'm going to leave my code here:

.box-action{ display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: white; max-width: 650px; height: 220px; border-radius: .5em; padding: 1em 1.5em; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center;

z-index: 3; position: absolute; left: 25%; right: 25%; bottom: 17%; }

Thanks a lot!!

Community feedback

  • Emmilie Estabilloā€¢5,540
    @emestabilloPosted over 4 years ago

    Hi Aldhair, for your cta, try replacing lines 79-83 with the following:

    margin: 0 auto;   //will keep the div centered
width: 90%;   //to ensure it won't stick to the left and right gutter for smaller devices
transform: translateY(3rem);   //will overlap the footer without taking the element out of the flow of the document vs position: absolute which is a bit trickier in responsive code. Adjust 3rem as you please.

    With the above code, you won't need the media query for the cta. You would just need to adjust padding-bottom on the .features-container.

    Hope this helps :-)

    Marked as helpful
    3
    Aldhair Escobarā€¢165
    @aldhairescobarPosted over 4 years ago

    @emestabillo wwwooooooow!! D: thanks a lot!, It's working!

    1

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