I' am using Bootstrap 3, In the mobile view I would like to apply some CSS to fix up some bugs on mobile view. I have looked to documentations and Google it. I' am can't seem to find any clue on it.
Is it possible?
Just use the appropriate media queries in your CSS, eg
#media (max-width: 767px) {
/* CSS goes here */
}
Bootstrap defines the following widths
Extra small devices (phones, less than 768px)
Small devices (tablets, 768px and up)
Medium devices (desktops, 992px and up)
Large devices (large desktops, 1200px and up)
See http://css-tricks.com/css-media-queries/ for some more information on media queries.
There are also responsive utilities, you can add classes to certain elements to either show or hide them at certain viewport sizes.
.hidden-xs or .visible-xs
http://getbootstrap.com/css/#responsive-utilities
You can use responsive display classes https://getbootstrap.com/docs/4.3/utilities/display/ in Bootstrap 4
So for example, you want to hide a specific element for only phones (in both portrait & landscape mode or xs and sm), you can do
<div class="big_image d-none d-md-block">
</div>
What it does is set display:none by default and makes it visible only from md and above.
Related
I need a code that can change the layout of my homepage to be viewed in different PC monitors.
I already tried "responsive Webdesign", but I don't know if there is a way of making it be shown not just in different devices but also in different PC screen sizes? Thanks in advance.
css's media tag is the one you might want to look into.
Quote from w3c here:
The #media rule is used in media queries to apply different styles for different media types/devices.
Media queries can be used to check many things, such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.
When you refer different PC monitor I assume you mean different width/length, or aspect ratio or resolution. I also assume your situation is that you want to show content in different style on different resolutions, but all on PC monitor, like 720p or 1080p or 4k monitors, following code might help.
/* On screens that are 992px wide or less, go from four columns to two columns */
#media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
As mentioned by caoool, Media Queries is what you are looking for.
Basically, using media queries you can write custom css if the resolution is more or less than a specific value.
FYI, there is an awesome open-source css framework called Bootstrap which makes designing responsive websites a lot easier and effortless.
Have a look at Bootstrap Documentation and Bootstrap Examples for more info about the framework.
I am creating a site header / menu for a responsive site. I am using breakpoints of 960px and above for a desktop menu with hover states and dropdowns, and breakpoints 959px and below for a mobile menu display. This works for most use cases, but I also want the mobile menu to display on tablets in landscape mode, which are typically wider than the 960 breakpoint. I am trying to target these tablets with CSS media queries only, no JavaScript.
I originally thought to use pixel-ratio, something like this:
#media (max-width:959px), (-webkit-min-device-pixel-ratio:1.5) {
/*mobile styles here*/
}
#media (min-width:960px) and (-webkit-max-device-pixel-ratio:1.499) {
/*desktop styles here*/
}
This worked at first, but then I realized higher resolution Retina displays on desktops were getting the mobile menu. Unfortunately I need to support older versions of iOS (down to 7), so I cannot rely on Media Queries Level 4 and use the interaction queries.
Can anyone help with a media query set that can help me? I need to be able to set styles that apply to both widths less than 960 and tablets larger than 960, and set styles that apply to widths above 960 that are not tablets.
Thanks!
My apologies for writing so much but I wanted to put what I’m doing into context. So I’ll ask my question first:
Why does the HTML and CSS this link to a responsive navbar stop working when I change its “max-width” media queries to “min-width”, pixel-based media queries?
https://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/#nav
All I need is to understand why I can’t make the HTML and CSS behave exactly the same way with min-width, pixel-based media queries. What do I not get? I’ve been working with Responsive web design and development for a few years. But this clearly proves I don’t understand responsive css the way I need to. I’m coding up a responsive website from scratch for a client of my own without Bootstrap so I can hard-wire my understanding on the principles that Ethan Marcotte sets out in the second edition of Responsive Web Design.
I’m not trying to be lazy by not posting my own code. This is the exact same structure navbar I want to use for the site I’m building, and you can go straight to the relevant HTML and CSS in the above link. I’ve tried making a linked stylesheet of the embedded CSS and HTML in the above link. I’ve injected it into my own site as a separate linked-stylesheet but I’m still running into the same brick wall.
My breakpoints structure in my own stylesheet is:
`/* ====MOBILE FIRST===== */
/* Custom, iPhone Retina */
#media only screen and (min-width: 320 px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width: 480 px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width: 768 px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width: 1024 px) {
}
/* Desktop */
#media only screen and (min-width: 1280 px) {
}`
I also don’t want to have one big monster stylesheet, so I’m trying to link the navbar stylesheet to the main stylesheet, using:
`#import url('mainstyles.css');`
I know that essential css rules for breakpoints must go into specific media queries. But if all the CSS in the above navbar link have to go into all five “min-width” based media queries - that’s just CSS bloat - isn’t it? And too much unnecessary CSS code?
I’ve spent three days on it and I just can’t get the fundamental reason. How do I make the above nav bar BEHAVE EXACTLY THE SAME WAY after changing the “max-width” media queries to “min-width” pixel-based media queries? I’ve tried changing the “width” and all style rules relevant to display to percentages - but it’s not solving the fundamental reason. Many thanks in advance for all advice.
Keith :)
max-width means the query will work up UNTIL the specified width.
min-width means the query will START working at the specified width.
Your first query will work from 320px to 479px. Your second will work from 480px to 767px, and so on (you have no query for 0-319px).
In order to change max-width to min-width you'd need to bump each query down a level (XS would become min-width: 320px, Desktop would become min-width: 1024, etc.)
I've included a simple answer below, as I found, once you get the basics right with Media Queries, its an easy concept to then apply to more complex ideas...
The example below could be used for firstly, a smartphone, then going up to an iPad, then finally a landscape iPad and a desktop device...
#media screen and (max-width: 600px) {
/* Stylings for all devices with screens with a width of 600px or less.*/
}
#media screen and (max-width: 992px) {
/* all screens with a max width of 992px or less */
}
#media screen and (min-width: 992px) {
/* all screens with a width of 992px or higher */
}
I'm currently thinking about how to manage my breakpoints. For the moment, i only use the class col-lg-* on my div cause i'm working on desktop and don't need to worry about breakpoint problems for the moment.
But in the future, we'll have to deal with that. So, i was wondering how to do it :
Adding the class col-xs, col-sd, col-md on my div seems a bit tiring ... I guess there are other way of doing it using media queries maybe ?
thanks.
BootStrap col-xs-** is for Extra small devices Phones (<768px) , col-sm-** is for Small devices
Tablets (≥768px) and col-md- is for Medium devices Desktops and for Large devices Desktops (≥1200px) use col-lg-..
so include all four classes, it reduces your effort..
Refer bootstrap website for more...
If use any one of class and then also Bootstrap library will manage to show content in decent way on most of device size.
Extra small devices (phones, up to 480px): No media query since this is the default in Bootstrap
Small devices (tablets, 768px and up): #media (min-width: #screen-sm) { ... }
Medium devices (desktops, 992px and up): #media (min-width: #screen-md) { ... }
Large devices (large desktops, 1200px and up): #media (min-width: #screen-lg) { ... }
Is there a way to tell bootstrap to not shrink the elements when the resolution is smaller than:
/* Portrait tablet to landscape and desktop */.
#media (min-width: 768px) and (max-width: 979px) { ... }
I want to support the large desktops and tablets screen, but nothing responsive below that resolution.
Adding the min-width property wont stop the grid system from messing up though, as the classes span1-12 will still become smaller when resizing!
An option is visit http://twitter.github.com/bootstrap/customize.html and untick "Narrow tablets and below (<767px)" on the responsive section, then download your custom bootstrap.
You can remove media query code of mobile screen in bootstrap.css
I did two steps
set less variable #screen-sm-min: 10px. This will stop all bootstrap's media query
And just set min-width to the top element.
Works for me
You can add the css property min-width on all the elements you want not to be shrunk.