Mobile breakpoints... specifically min-width 768px to max-width 991px

[James Appleton]

Is there an easy way to force the mobile version for that breakpoint range without modifying the Bootstrap CSS file? I modified the breakpoints to display mobile for everything 991px and below, but it isn’t displaying correctly for everything. Specifically, the navigation is all squished together. After modifying the CSS I noticed that both the mobile navigation and standard navigation appear. For my purposes… I’d like the full mobile version up to max-width 991px and the desktop from 992px on. Is that easily accomplished? http://barkingtunawebdesign.com/skilcheck/

[Fabian Bitter]

Hey James,

the Bitter Theme is build on top of Bootstrap 3 and complies also with it’s breakpoints. You can override the media queries from bitter theme and set your individual breakpoints.

For changing the breakpoints of Bootstrap framework it would be the best and easiest solution to download less files of Bootstrap 3, manipulate the breakpoint variables and rebuild it.

Read more about at: https://getbootstrap.com/docs/3.4/css/#grid-media-queries

After you need to override your custom bootstrap version with your customized version. This you can do in your packages on_start or in application/bootstrap/app.php. If you take a look at this file at the bottom there is code for overriding jQuery. It’s the same procedure for bootstrap.

Read more at:

https://documentation.concrete5.org/developers/designing-for-concrete5/advanced-css-and-javascript-usage/overriding-or-providing-core-javascript-or-css-in-a-theme

Best wishes

Fabian

[James Appleton]

Ok… Thanks. I'll look into it. The biggest issue I'm seeing is all the navigation links are squished together and the sticky sidebar navigation covers over anything in the main content area when in Landscape. I have a Google Pixel 2 and it also does this on an iPhone. That appears to be a bug in Bootstrap or the code for the sidebar nav element. Screenshots below in Dropbox link…

https://www.dropbox.com/sh/i4hqc5q6cfeov74/AABB_t5RjChuXXtnBs9ukCXia?dl=0

[James Appleton]

I fixed the sidebar nav issue by creating a “nomobile” class which hides it for breakpoints under 991px… it was redundant and unnecessary in mobile. I will work on the main navigation issue now.