[Theme: The-Bootstrap] Mobile widths and minified CSS configs

  • Resolved mortmazer

    (@mortmazer)


    12 years, 5 months ago

    I cannot get bootstrap to display a simple navmenu on my android phone. The menu looks fine in the browser, but goes to the responsive collapse menu at about 900 pixels, which is absurdly high. Thus, I assume alllinks are being hidden.

    How do I set the width so my links show up on mobile, and don’t disappear with only a modest browser resizing? Shouldn’t there be a config setting for both platforms?

    Also, I wish someone would explain how I easily switch between minified and non-minified versions. Since the-bootstrap is calling bootstrap.min.css, I cannot even mess with the width settings (or inspect very easily with firebug). Is there some toggle that tells bootstrap/or wordpress “use the non-minified?” I thinks shipping this theme minified is really hostile for new users who would have no idea how to do this. Like me. Help appreciated.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you add your own media queries width and override bootstrap?

    Howdy mortmazer!

    To switch between minified and non-minified versions, add define( 'SCRIPT_DEBUG', true ); to your wp-config.php file.

    To see how The Bootstrap looks with different screen sizes, you can refer to https://responsinator.com/?url=the-bootstrap.obenland.it.

    To alter the default Bootstrap behavior, I would recommend the same as Andrew: Create a Child Theme and overwrite the media queries there. This way you modifications will be future-proof.

    In the next version, the responsive part will be enqueued separately, so it’ll be less of a hassle to change a file and replace it.

    Konstantin

    Thread Starter mortmazer

    (@mortmazer)

    Ok, sorry, I just posted this to Konstantin’s blog. I won’t do that again.

    Ok, I have done workarounds and figured out how collapsing menu works. You’re going to need to maintain two menus for the user, one for fixed items, and one for those that should collapse. But here’s the bug On when I view page on my HTC Evo LET droid. The touch rectangle (using your factory css) over each menu item will work once, but rarely a second time. The translucent green rectangles are appearing down and to the right of the menu item, and sometimes in even odder places. While this will happen on the UNcollapsed menu sometimes, it always happens when you turn the phone over to landscape mode. Then the rectangles are totally off.

    What to do?

    Thread Starter mortmazer

    (@mortmazer)

    Reponsinator.com is a nice tool, but unforuntately, it’s giving me a different result from my phone. First off, the touch menu (3 bars) icon is on its own line above the menu, and there are no focus or touch rectangles at all here. So that must be tested on a phone.

    Ok, sorry, I just posted this to Konstantin’s blog. I won’t do that again.

    No worries, it’s all good!

    This really sounds like issues with the core Bootstrap files. All I did in The Bootstrap really was make Bootstrap play with WordPress requirements. That’s why style.css is so short. ??

    Thank you for reaching out though, I really appreciate that!

    Thread Starter mortmazer

    (@mortmazer)

    Well, this is bizarre. I live previewed another theme “responsive” and all of a sudden, the weird focus rectangles are gone and all is working fine. Still seems like a a bug somewhere, tho.

    I have created two menus. One for “Fixed” items, and one for “Extra” The Extra are always added to the collapsed menu automatically, but I to insert a manual theme call to add them to the web interface. Thus, in a browser, there are 4 fixed items, plus 4 Extra links on one menu line, while on the phone there are just 4 fixed items, and the Extras appear when use selects the touch (icon-bar) btn.

    It would be nice if bootstrap could handle this scenario, as I think most non-tech users wouold go crazy trying to understand how to make this work. But it is a great looking theme base. I will show you my first version soon.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Theme: The-Bootstrap] Mobile widths and minified CSS configs’ is closed to new replies.