So I have a site built with twitter bootstrap 3. Everything works great and looks good on mobile/tablet as well. What I would like to do is add a link in the footer to allow user to view full site and not the mobile responsive version if they would like.
I know I can change viewpot to force the full site in mobile but I would like to have it default to responsive and should the user choose to want full site they click a link which would disable to responsive features.
I looked around and surprisingly haven't seen much documentation for this which I would think would be pretty popular as most sites have this functionality these days. Thanks in advance
You'd probably have to serve two different versions of Bootstrap, one default and one with a modified variables.less
Have a look at this part of the file:
// Point at which the navbar becomes uncollapsed
#grid-float-breakpoint: #screen-sm-min;
// Point at which the navbar begins collapsing
#grid-float-breakpoint-max: (#grid-float-breakpoint - 1);
You could change it to something like this to never show the mobile menu
// Point at which the navbar becomes uncollapsed
#grid-float-breakpoint: 0%;
// Point at which the navbar begins collapsing
#grid-float-breakpoint-max: 0%;
Call the compiled CSS file maybe bootstrap-desktop.css and then serve this CSS file instead of default if the user visits the desktop site
The easiest way is to toggle the viewport meta tag.
By default have the tag in place.
When they choose desktop mode, add something to the URL or set a cookie to not output the meta tag.
Related
I have a floating action button on the right side of my webpage but when I check it on my mobile, its either completely missing from the page or obstructing the overall view. Ideally, i would want that to stick to the bottom of the page on my mobile. Any tips on how I can do that with HTML and CSS?
You should use media queries in order to display floating action button differently inside smaller or higher resolutions.
You could also analyse window.navigator object inside JS and set proper class on <body> so that it can be later used in CSS if you want to differ between physical devices.
In order to know why button is missing I suggest you to connect your phone to debug tools and see what's going on.
Sticking your button to the bottom would be probably achievable with position: fixed
Check out my site here to see the issue across different size screens and on mobile.
I originally used the Luna theme in Bigcartel, having modified parts to make it bespoke to our brand. Whilst doing so the Luna responsive theme no longer worked... having not changed it one bit (Something in my actual code must have caused it to stop working)...;it would just show a blank white screen (mobile).
I then copied and used the responsive style of a separate theme, which causes my site to act like the normal site on a mobile etc... however the headers/footers are all out of place and mis-sized. I have tried changing all widths to %, but have failed to notice any differences. I had managed to change the size of the flexslider.. so that now it works but I am struggling to change the size of the other major components on the page (including navigation bar).
I am reluctant to post any code in here as of yet... as I'm not sure what to include (I dont want to include all the responsive styles), but perhaps someone could point me in the right direction?
Thanks,
I'm building a responsive site and I have it set so that when the site is viewed on a mobile phone, I will hide certain code via Bootstrap's "hidden-phone" class. I am using this feature for a heavy slider that I don't to be shown on a mobile phone. But, does the code actually not load or does it load but is not visible? If it does load but does not become visible, I don't see what the point of that is...
Thank you.
Maybe you should think of replacing your slider with a different element instead of hiding it.
Also,this might help you:
how to use responsive features of bootstrap 2.0
Not sure if anyone can help me. But here's the issue. I'm making a mobile website for personal use and having a heck of a time with a free template I downloaded...
I'm wondering how I can put a title on a responsive menu of a website. When the site is visited on a desktop, a normal menu shows fine. However, when visiting on a mobile device or tablet, the site should automatically collapse the menu (which it does) and then show a single menu title that users can interact with.
Using google chrome I can inspect the element and find either a nav.php or bootstrap-responsive.css file that I can edit in order to add the menu title.
Can anyone provide any insight? I'm not sure what I need to post... The site is http://bit.ly/15TpCjW
Thanks! Let me know if I need to provide any other information!
Adding the class of brand below each icon set in your nav.php files (depending on the menu that you want to edit) will accomplish this.
I'm very new to web design and just made a simple one page website for my iOS app here. I now want to make it so that when this page is opened on an iPhone, the whole thing is zoomed out enough because right now the right half of the page doesnt show. From my understanding and research so far, I need to use media queries and create a separate CSS stylesheet for mobile. However I feel like for such a simple page there should be an easier solution with some plug-and-play code. Something consisting of a simple conditional-type statement checking if the user is on mobile, and if so, gives the new dimensions of the page. I don't really know anything except for the very basics of html, css, and javascript when it comes to web development, so simple explanations would be highly appreciated.
I think you have to go for http://www.jquerymobile.com it is very good framework for mobile web.
Instead of creating a mobile-specific page you might want to experiment with the viewport meta-tag. The tag isn't used by desktop browsers, but it scales the size of what you see on a mobile device's screen. You can also check out Apple's guidelines for more information.