0

I am currently working on converting a non-responsive webpage into responsive. The issue I am facing is that right now there are only a handful of pages that are built to be responsive and dozens that aren't. For the pages that aren't I have added a class no-resp to the body and set the container to a static 905px width for pages with that body class.

For the most part this has worked, however there are some issues with the navigation. The header and footer are coded mobile-first, so even with the static container width, the header is still displaying the navigation as if it were mobile.

Is it possible to force or fake a breakpoint so that, no matter what the screen size is, it will use the min-width:768px breakpoint?

user13286
  • 3,027
  • 9
  • 45
  • 100
  • I'm not sure what you mean by "force", as everything in CSS is based on selector cascade. That said, you should be able to define whatever breakpoints you like for elements such as `.no-resp .navbar`. – isherwood Feb 13 '15 at 18:32
  • I mean that instead of the media queries firing based on screen size, it would just always use the `min-width:768px` media query. I'd rather not have to duplicate all my CSS selectors as there are about 200 lines of CSS for the navigation. – user13286 Feb 13 '15 at 18:37
  • You don't . You hit a few of the primary elements and everything else is based on that with percentage widths. – isherwood Feb 13 '15 at 18:39
  • I wish it were that simple, but the CSS is different for everything, not just widths. For example, the `li` elements are block on mobile and inline-block on desktop, and the background colors, font sizes, line-heights, visibility, etc. are all different. I would pretty much have to duplicate all the CSS from the 768 breakpoint and ad `.no-resp` to each selector. – user13286 Feb 13 '15 at 18:44
  • 1
    You may just want to generate an alternate version of Bootstrap and load it for those pages. http://stackoverflow.com/questions/19827605/change-bootstrap-navbar-collapse-breakpoint-without-using-less – isherwood Feb 13 '15 at 21:38

1 Answers1

0

I don't think your approach or question is accurate, but according to what you are asking: If you want the page to just use the min-width:768px media query, then just remove the media query and make that media queries styles part of the base styles:

// Mobile first styles:
body {
  color: red;
}

@media (min-width:768px) {
  body {
    color: blue;
  }
}

Just remove the media query.

body {
  color: red;
}

body {
  color: blue;
}

Now all styles will use the old 768 breakpoint styles as they will override the mobile first breakpoints.

Jake Wilson
  • 88,616
  • 93
  • 252
  • 370
  • Thank you for the suggestion, but wouldn't that remove the media queries for the responsive pages as well? – user13286 Feb 13 '15 at 18:44
  • Just move the styles for the header out of the 768px media query. Then it will affect only the header and the rest of the site styles will still use the 768px media query. – Jake Wilson Feb 13 '15 at 18:49