CODEWITHSUNDEEP
csshtmltwitter-bootstrapdrop-down-menuresponsive-design
Damiii
Damiii

Reputation: 1373

Fitting a dropdown menu in a smaller display

Ok, i have a problem which i couldn't figure out yet.

So, basically i'm using bootstrap and i'm trying to create a section for the user if he wants to sign up.

The problem is, if i have an iphone 3GS and wants to enter to my page, the dropdown menu is too big and cannot fit on the screen ! (As shown below)

Example here

The dropdown menu i added, is the one from bootstrap.

Is there any way for solving that ?

/--------------------------------------/

After adding the drop menu css for media max-width 4xx px. with the css you said

Upvotes: 0

Views: 4790

Answers (3)

Christina
Christina

Reputation: 34652

The .dropdown-menu has a min-width but not a max-width. It will be the width of the content + padding. To limit the width on small devices only do the following. Correct the width of the .dropdown-menu parent and then using the same specificity used in the Bootstrap CSS allow the link itself to wrap:

@media (max-width:480px) {
  .dropdown-menu {
    width:90%;
 }

  .dropdown-menu > li > a {
    white-space: normal;
 }

}

Make the max-width value your own, this is just an idea.

You can always see why a selector behaves the way it does by looking at the unpacked CSS.

Line 3423

Upvotes: 3

poldy
poldy

Reputation: 204

Try:

overflow: hidden;
position:absolute;
right: 0;
max-width:yourmaxwidth;

Upvotes: 0

rajesh
rajesh

Reputation: 1485

Use this css style, It will work:-

@media (max-width:480px) {
  .dropdown-menu {
    width:90%;
    white-space:normal;
 }
}

Upvotes: 0

Related Questions