I would like to have all input and button elements to appear normal size for < 767px screens. If it is a > 767px screen though I need the .btn-lg and .input-lg classes be applied to all buttons and inputs. This allows for an easier touch experience on larger screens. How can this be done? Can it be done with purely CSS??
You can do with media queries
#media screen and (max-width:767px){
//all the styles for btns within 767px
}
#media screen and (min-width:767px){
//all styles above 767px
}
You can achieve this with jquery too:
if($(window).outerHeight(true) < 767){
//add class to your btns and lists and remove classes...
}
This is one approach and there are many.
Of course it can be done with purely CSS.
Please check the "Responsive utility classes"
here: bootstrap scaffolding
Also you might need http://www.w3.org/TR/css3-mediaqueries/ - Media Queries
Related
I tried to apply some css targeting only the XS screens, but it is being applied for medium screen as well.
See the style defined clearly for .col-xs, but I am viewing it in full screen on a desktop and it renders xs specific styles.
Am I doing something wrong here or missing any snippet from bootstrap?
Thanks,
The CSS classes on elements are always applied unless there is a media query.
In the case of Bootstrap specific media queries this would be..
#media (max-width: 768px) {
.prop-image {
margin-right: auto;
margin-left: auto;
}
}
The way you're using column in bootstrap right now is saying at a md width span 4 columns and at a xs width span the entire page. It does nothing to hide content.
If you want an easy way to hide and only show the content at xs screen width you need media queries, or another option is to use Bootstraps built in responsive utility class of
.visible-xs-*.
This will only show the containing element at xs.
http://getbootstrap.com/css/#responsive-utilities-classes
I created a simple page with Axure in 2 versions (basically 2 adaptive views: base and 768 and below). When I generate the html, it works fine and follows the adaptive views. But this seems to work only with javascript, is there a way to deal with/generate the adaptive views in css? This could help me later on integrating the Axure generated html and css into my responsive design based on bootstrap. Thank you.
Pretty sure you're asking about responsiveness according to screen size. Bootstrap is built around these principles and the responsiveness is done purely through CSS using #media queries. All CSS starts on the smallest possible screen and then you can adjust your CSS to change as the screen size gets larger by placing # media queries at the bottom of your stylesheet. They are as follows:
#media (min-width:768px) {
This is where your CSS for anything above 768px goes
}
#media (min-width:992px) {
This is where your CSS for anything above 992px goes
}
#media (min-width:1200px) {
This is where your CSS for anything above 1200px goes
}
You can also use max-width in media queries
Now am using Bootstrap # for an Web Application.
My Application should be Same as in REQUIREMENT
Since am Applied Bootstrap, when i shrink the screen it shows as Responsive, But I really NOT NEEDED.
I need the Sticky Body Content. As Same in NEEDED DEMO
I am sorry if I not understand your question correctly. but you are going to make your website become not Responsive? Then one of the solution that I can suggest to you is to overwrite or reset some bootstrap.css function with your custom css, especially
#media (min-width:somepx){width:your_desired px} with your own liking.
for example this bootstrap css default will define the container responsive size to 750px in case the screen is 768px:
#media (min-width: 768px) {
.container {
width: 750px;
}
for more information, you can read the information from the bootstrap link
I came across this while looking something up for media queries. always like learning new things and couldn't find anywhere on the net to explain this type of markup. this is from Expedia's responsive web design shown by litmus.
https://litmus.com/scope/z1xdodxbzane
#media only screen and (max-width: 600px) {
*[class="FlexWidth100"]{width:100% !important; height:auto!important; line-height:normal!important;}
Basically
*[class="FlexWidth100"]
is just same with
.FlexWidth100
selector
* or called as wildcard in CSS. This is use for select all elements within the DOM.
So basically, your code will target all elements with class FlexWidth100 in the DOM and apply
{width:100% !important; height:auto!important; line-height:normal!important;}
when the screen's width is less than or equal to 600px
It's a css selector which targets all element on the .html page with the class .FlexWidth100.
This is a responsive cascading style sheet, that basically says the following in plain english:
#media only screen and (max-width: 600px) {
Target all screen media (laptop screen, desktop screens, smartphones and tablets
screens)
Then it says, if and only if the max width of the webpage is 600px, then apply
the following styles, such as {width:100% !important; height:auto!important;
line-height:normal!important;}
You can add any styles you want under there, such as:
#media only screen and (max-width: 600px) {
*[class="FlexWidth100"]{color: green;}
This technique is generally used to target screens with different sizes; you might not want to write a single style sheet for every media type or screen size; you write one style sheet then, within that same style sheet, you specify different styles for different media types and screen sizes.
So, when I am looking at your website from a desktop, it looks one way, but when I look at the same website, from a mobile device for instance, it looks a different way.
Hope that helps also, try looking at Facebook from your desktop or laptop, then look at it on your mobile device and you'll see that it looks different.
Finally, to see if a site is using a responsive style sheet, look at it from a wide screen, like desktop, then hold one corner of the browser and slowly re-size the browser window to a smaller screen size, and you'll see different styles being applied to that webpage instantly only if that site is using a responsive style sheet.
Hope this helps mate!
I am developing a page using CSS3 media queries using the mobile first approach, meaning I start small and work my way up.
But now I am encountering a problem: How to deal with 'style bleeding' for visibility classes?
Let me explain what I mean – when my first media query looks like this:
#media only screen and (min-width: 20em) {
// Styles here
}
These styles don't get applied to screens smaller than 20em. This actually is no problem because the styles that are not wrapped up in a media query are basically the first media query (I hope you get what I mean).
But now I want to introduce visibility classes to hide elements for certain screen sizes. The problem is, that these styles basically get inherited. See:
#media only screen and (min-width: 20em) {
.hidden-first {
display: none;
}
}
Any element with the class hidden-first gets hidden as soon as the screen is 20em wide or wider. But I only want to hide the element as long as the media query is active.
How do I do that – is there a way around resetting the style inside another media query?
I suggest you create a class like hide-for-mediumand create rule for it display:none !important;
Take a look at the Foundation framework and see how the do it. I guess it's the best way to deal with this situation.