Is there a way to always force the mobile layout using only CSS in Bootstrap responsive?
I think one way to do it would be to set #screen-sm to a really large number. But I'd rather not mess with LESS files, can I do it using only CSS?
I ended up creating a custom bootstrap build using their website. Here's my version: http://getbootstrap.com/customize/?id=52279502e4625826d93b
If anyone has a better way of doing this, please share.
You have to use media query:
#media (max-width: 480px) and (min-width: 360px) {}
Related
I want to exclude iPads from using my CSS styling for desktop views on my website. I built my site mobile-first, so the desktop styles are in a media query.
While messing around with my code I tried this:
/*mobile and default styles (the styles I want the iPads to use)*/
#media (min-width: 750px;),
#media (device-width: 768px) and (device-height: 1024px) /*iPad resolution*/ {
/*desktop styles (the styles I don't want the iPad to use)*/
/*in this code, these styles are currently being ignored by iPads*/
}
I don't think this is valid code but it works correctly in every browser and device I have tested.
It has to do with having two #media lines on one media query. The second set of parameters are somehow excluded from the query, but I don't understand why. Without the second #media then it works like an or operator and the desktop styling will show up on an iPad.
I have tried nesting media queries, which doesn't seem to work, and I have tried using not, but the first line will still be true and thus it work work either.
I haven't found any information about using #media twice in a statement and having it somehow exclude the second media query, could someone explain the correct way to do this, or at least explain why this works?
Brilliant - yet incorrect syntax according to VS12.
Can be seen working here http://www.stilborg.com on iPad.
I'm developing a web app for feature phones in Africa (non- smartphones whose screen size is usually 128 x 160 px (1.80")).
I need to learn how to make the website responsive, or display properly for a screen size so small. I'm aware that regular CSS queries dont work well for feature phones, so any other suggestions?
This:
https://developers.google.com/webmasters/mobile-sites/mobile-seo/other-devices/feature-phones?hl=en
is something I read on the topic, but it's vague for me to understand what changes to make in my CSS file (which is using bootstrap at the moment) Will really appreciate your help!
To make a website responsive we have to use CSS3 #media queries. Write #media queries for different screen sizes. But #media queries doesn't support for older version browsers. In your case (non-smartphone) #media doesn't work. I suggest create a sub domain for mobile phones like http://m.website.com and use javascript to redirect to mobile version site if user opens http://website.com .
#media only screen
and (min-device-width: 128px)
and (max-device-width: 160px)
{
/* Put your CSS Code for small screen */
}
Some useful articals about #media .
http://code.tutsplus.com/tutorials/quick-tip-a-crash-course-in-css-media-queries--net-14531
http://www.htmlgoodies.com/html5/tutorials/an-introduction-to-css3-media-queries.html
https://css-tricks.com/logic-in-media-queries/
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
You can either try things like foundation which you can use pre-made tables, and sections with pre-defined css properties:
http://www.foundation.zurb.com/
Or you can use percentages, width: 15%. So it will get the designated percentage of your device and calculate the correct size based on that.
Also what your listed site is saying(google), it creates different css files based on your device. So when you use <link> to set your CSS file you can make it so certain devices use certain files:
(Taken from Google):
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
I am asking this question here to get some information and ideas from the professionals. My question is I just start to learn Bootstrap 3.1 for my front end developments. So I have followed some basic tutorials regarding to the subject. With that tutorials, I found that the look and feels of every page layout have same structure and design. So I am afraid, Can we design advance and very different layout using Bootstrap 3.1?
Here I have attached a navigation bar. Someone can tell me, is it possible to design like this navigation bar using bootstrap 3.1?
I am not asking to someone to code this, just I ask this to make a strong sense about bootstrap 3.1.
hope someone pointed me out to the right direction.
Thank you.
Yes, it is easy to override any bootstrap styles you want.
It is designed to be usable out of the box, but also to provide good base styles in a logical way to be over ridden. The designers did not want to force you to use their styles.
If you use SASS or LESS, it will be easy. If you use the finished compiled CSS, it will be VERY tedious to edit.
I've built several apps entirely from Bootstrap 3, and most do not look like 'bootstrap' but use a ton of their base styles.
Simple answer, Yes you can. I don't think its that complicated to do. You can checkout the Grid system here in Bootstrap that meets your dimensions, it it doesn't meet then you always have your own custom grid made.
Hence you will have to do Media queries condition in your style-sheet on how will the site works on other devices.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
IS media-query will work in IE8 Iframe?
I want to load responsive website in iframe (width:600).media-query is taking all browsers but in IE its not taking. how to fix it?
Is there any solution apart form media-query
i've tried "css3-mediaqueries-js"
Thanks
Shanid kv
No, mediaqueries don't work in IE8 : http://caniuse.com/#feat=css-mediaqueries
Rather than trying to find a workaround for this old browser, I would suggest to find a gracefull fallback, or better, not support it.
This is another polyfill for mediaqueries - https://github.com/scottjehl/Respond
#media screen and (min-width: 480px){
...styles for 480px and up go here
}
and reference the js file in the link on your page
#all,
I got the solution instead of writing media query we can do with "max-width" and "percentage width". in this case it will work in IE8 also.
here is the example
http://scottjehl.github.io/Respond/test/test.html
Thanks
shanid kv
The Twitter Bootstrap 2.0-wip branch on GitHub includes a new responsive layout system. It's great for apps that need that level of responsiveness, but I'm developing a web-only app that needs to have a completely fixed layout.
Is there any easy way to override Bootstrap's responsive layout?
You can see it in action by cloning their repo, branching to 2.0-wip, and opening docs/scaffolding.html in your browser.
Thanks in advance!
Note, in 2.0.1+ the responsiveness has been moved to its own file, so it is turned off by default. To turn it on you include bootstrap-responsive.css or responsive.less.
http://twitter.github.com/bootstrap/scaffolding.html#responsive
Just remove the #media queries found in the bootstrap.css file on line 2684. That should eliminate all of the responsive qualities and just leave the standard container width intact.
#media (min-width: 768px) and (max-width: 940px) { ..... }
Just compile your own custom bootstrap on http://twitter.github.com/bootstrap/customize.html, unticking the responsive features.
Alternatively you can include following file from BootstrapCDN: http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap.min.css