CODEWITHSUNDEEP
htmlcss
Mar
Mar

Reputation: 53

how to make button stay in the same position?

I have a button that I want it to stay in top centered like this in smaller screen

enter image description here

but in smaller screen when content is wrapping it become like this :

enter image description here

here is my code :

Html :

   <div id="mobile-footer-close">
   <button id="mobile-footer-btn">
   <div class="mobile-btn-close is-rotating-back">
   <span></span>
   </div>
   </button>
   </div>

CSS:

 #mobile-footer-close {
display:flex;
justify-content:center;
flex-wrap:wrap;
}

   #mobile-footer-btn {
   position:relative;
   bottom:95px;
   right: 5px;
   width: 30px;
   height: 30px;
   background-color: #959192;
   border: none;
   border-radius: 50%;
   overflow: hidden;
   text-indent: 100%;
   color: transparent;
   white-space: nowrap;
   cursor: pointer;
   }

Upvotes: 0

Views: 2887

Answers (2)

David Ngumbu
David Ngumbu

Reputation: 199

You can use a property in css called media query @media. To adjust the position of the close button you can just do this:

Example:

@media screen and (max-width: `max-width-of-the-device`) {
      #mobile-footer-btn {
             /*Your code*/
       }
}

If you enter your code in the #mobile-footer-btn that code will only be executed if the width of the device for example is maximum: 700px (example). This should help your mobile-footer-btn change its position in mobile screens or the desired screen size you want its position to change.

Upvotes: 0

WebMarie
WebMarie

Reputation: 176

As mentioned above in comment, use media query for smaller screen. To center the button within its parent set parent's position property to relative and the button's position to absolute, then add right and left properties to the button. For example:

.parent { position: relative;}
.button { position: absolute; top: 10px; left: 50%;}

Upvotes: 1

Related Questions