Skip to content
Submitted about 5 years ago

CSS GRID

ayoubarroum•100
@ayoubarroum
A solution to the Base Apparel coming soon page challenge
Preview (opens in new tab)Code (opens in new tab)

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 .

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

  • Ksenia•1,350
    @ksenius

    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.

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