CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
jhagege
jhagege

Reputation: 1586

Bootstrap issue with responsive medium size screens (tablets)

I am trying to implement a bootstrap 3 responsive design, but for some reason, the view of the navbar breaks when shown with a medium size screen.

Here are the 3 viewports for respectively: mobile, tablet and screen.

Tablet is broken and mobile/screen are both fine. I tried a lot of things but didn't figure out anything so far.Mobile

Tablet

As you can see, this is the one which breaks (2 lines instead of showing the three bars icon.

PC

This one is fine (PC)

Thanks!

Upvotes: 0

Views: 464

Answers (3)

Sunrise Joz
Sunrise Joz

Reputation: 372

As a workaround, just use icons for the cart (the cart you have) and account (cog or person) which should knock the line wrap issue out.

You could use tooltip for user confirmation thereafter.

Upvotes: 0

cvrebert
cvrebert

Reputation: 9259

Per the official docs (emphasis added):

Overflowing content

Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:

  • Reduce the amount or width of navbar items.
  • Hide certain navbar items at certain screen sizes using responsive utility classes.
  • Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

Upvotes: 1

CodingWithSpike
CodingWithSpike

Reputation: 43698

There are enough things on your right button bar to be too wide to fit on the screen, so it is line-wrapping to the next line.

Bootstrap does not make the collapsable "3 bars" icon as soon as the screen is too narrow to fit the items. It does this at a specific window width.

Possible solutions are to make things smaller, remove some items, or re-define the media query break point in the Bootstrap theme to switch to the "mobile" view with the collapsed menu at a different screen width.

The last item, redefining the breakpoints, can be done in the .less files for Bootstrap if you want to rebuild the theme locally or are using .less in your project. Alternatively, you can generate a new theme using the online theme generator, and change the breakpoints here.

Upvotes: 0

Related Questions