Skip to content
Submitted over 4 years ago

CSS GRID

ayoubarroum•100
@ayoubarroum
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Base Apparel coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

How can I make the button stick to it's place when using position absolute to put it where it is? and is there another way to place it there? The website looks great on my screen but once I post it I see it's not working .

Community feedback

  • Ksenia•1,350
    @kseniusPosted over 4 years ago

    Hi!

    You can fix the button position by giving position: relative to its parent element, so then the button will be positioned relatively to its parent. But what I noticed in your code is that you put the input field in a div , but the button is outside of it. It would be better to group these two elements in the same parent element.

    Also, setting width: 39% on the input field and left: 43% on the button is not a good idea. It would be better to set width: 100% on the input and right: 0; top: 0; on the button, so that your input would always be 100% of it's parent's width and the button would always be on the right of the input regardless of the screen size. And in such case you may need to add box-sizing: border-box to the input, so the padding of the input will be included in its width.

    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