I have a legacy website to work on and this does not support any mobile browsers. This web has a gigantic amount of css files and the look & feel of the web is not to be modified. Bootstrap will be used to make the web responsive for mobile users.
The problem is, I'd like the web to apply bootstrap only for mobile browsers. Let's say the following html code is from the legacy web and it's not responsive.
<div id="header">
<div><img src="view/image/logo.png"/></div>
<div><img src="view/image/lock.png"</div>
</div>
If you add row and column classes...
<div id="header" class="row">
<div class="col-xs-6"><img src="view/image/logo.png"/></div>
<div class="col-xs-6"><img src="view/image/lock.png"/></div>
</div>
Now, it is responsive for mobile browsers but .row also changes the margin & padding of #header for PC browsers which is not meant to be. So, I came up with two solutions for this problem.
Import bootstrap under #media.
I think this is impossible because bootstrap already has its own #media queries. Also, having #media under #media is a total nonsense.
Detect whether the current browser is on PC or mobile before loading bootstrap theme.
This is a better solution than #1 and I can't come up with any drawbacks from it.
Are there any alternative approaches to tackle this problem?
Related
it's possible to set the layout of bootstrap 3 in IE8 not responsive as in version 2 using respond.min.js without writing a special css for IE ?
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
Using respond.js is not making responsive bootsrap layout in IE8.
You can check it on
http://getbootstrap.com/examples/navbar/
You can read about respond.js on github:
https://github.com/scottjehl/Respond/blob/master/README.md
The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under. It's written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).
We've been taking payments online with 3D Secure enabled but a while ago we were getting so much negative feedback from mobile users because the Verified by Visa form in an iFrame was too big for the screen that we turned it off. I've been told that this is no longer financially viable and i need make it work properly for mobiles.
I've wrestled with numerous 'responsive iFrame' solutions but it seems to come down to the iFrame contents that are the issue (tables with hard-coded widths), which obviously I have no control over.
I've not found anything about a mobile-friendly solution after a few hours on the web.
Does anyone know if there is a responsive way to make 3D Secure usable on an iPhone for example?
I think the only way to solve this is to set the iframe’s width to accommodate the fixed width tables (400px should do it) and then apply some CSS to the iframe to scale the page so it fits the mobile screen size.
Here’s an example:
<iframe width="400px" height="500px" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="SagePayURL" style="-webkit-transform:scale(0.7);-moz-transform-scale(0.7);-webkit-transform-origin:top left;-moz-transform-origin:top left;"></iframe>
Honestly, I don’t know why VISA or Mastercard can’t have a desktop and mobile version of their 3D secure page.
I have implemented the from which works in Chrome, Firefox and IE, but don't know why it's not working in Safari ..
Here is my plunker.
There is a bug using Safari and if css contains:
-webkit-transition: border-color, box-shadow ease-in-out .15s;
(for example: form-controll in bootstrap uses it)
The form validation becomes invalid forever.
I used Safari on PC so I have no idea if it is also happen in Mac.
I like the new New Project templates included in the ASP.NET MVC3 tools update, as presented at MIX 11 recently.
A basic site can be seen here:
http://mix11.haacked.com/
When I view the above site in Chrome, the HTML5 styles are visible - rounded corners and text shadow.
When I view the site in IE8 those styles aren't visible.
My question is, isn't Modernizr supposed to make these styles work in older browsers?
-Matt
Modernizer won't actually add missing functionality to a browser. Basically, you use it as a guide to tell you whether a browser supports a certain feature. In your case, you could have a CSS file which will compensate for browsers that don't support border radius:
.no-borderradius div {
/* properties for browsers that don't support border-radius */
}
The above is a total made-up example, I'm not sure 100% if it's correct, but check the documentation here.
So for IE8, you would need to display rounded corners using a different technique.
Virgin post.
Are there any known issues with how FF2/Windows handles div's positioned relative?
IEx / Chrome on Windows, FF3x / Safari 4x on Mac are rendering fine. and I would think IE for sure would have barked at me if the coding was incorrect.
<!--example-->
#parent_div {width:200px; height:100px; position:relative;}
#child_div {width:100px; height:50px; position:absolute;}
<div>
<div id="parent_div">
<div id="inner_div">foobar</div>
</div>
</div>
I don't see any errors. Your example renders the same for me in IE, Firefox, Opera, Chrome and Safari. The name mismatch between ‘child_div’ versus ‘inner_div’ may be a problem, but fixing that still results in the same layout over all browsers.