CODEWITHSUNDEEP
cssbuttonresponsive-design
user3152357
user3152357

Reputation: 107

How to make custom css button responsive?

I have created a CSS button but it is not responsive. I have tried adding EM or % but still not working. I want to change width and height according to the screen resolution.

Following is the CSS code I am actually using:

@media only screen and (min-width:321px) and (max-width:480px) { }

HTML

<div>
   <p>
      <button class="btn btn-1 btn-1a">Click Here To Enter The Future</button> 
   </p>
</div>

CSS

.btn {
  font-size:0.875em;
  display:block;
  left:-60px;
  margin-top:35px;
}

Right now the button is moving from left to right, but I want the button to appear at the exact same place.

Upvotes: 8

Views: 92234

Answers (3)

osherdo
osherdo

Reputation: 568

This works for me:

<script>
$(document).ready(function() {

    $('#select_preferences').multiselect({
        buttonText: function(options, select) {
            return 'Look for users that:';
        },
        buttonTitle: function(options, select) {
            var labels = [];
            options.each(function() {
                labels.push($(this).text()); //get the options in a string. later it would be joined with - seprate between each.
            });
         if(!labels.length ===0 )
        {
         $('#range-div').removeClass('hide');
         // The class 'hide' hide the content.
         //So I remove it so it would be visible.
        }
        if (labels.length ===0)
         $('#range-div').addClass('hide');
     //If the labels array is empty - then do use the hide class to hide the range-selector.
            return labels.join(' - ');
    // the options seperated by ' - '
    // This returns the text of th options in labels[].
        }
    });

Upvotes: 0

Ali Gajani
Ali Gajani

Reputation: 15091

You could add width:100%; to achieve your objective.

enter image description here

.btn {
      font-size:0.875em;
      display:block;
      left:-60px;
      margin-top:35px;
      width:100%;
    }

Upvotes: 22

CRABOLO
CRABOLO

Reputation: 8793

This should work

.btn {
   width: 100%;
   min-width: 50px;  // add this if you want
   max-width: 300px; // add this if  you want, adjust accordingly
}

Upvotes: 1

Related Questions