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.
Related
What's the best way to
achieve going from a menu like this :
to this when screensize reaches a certain width :
So basically change certain texts to icons.
Is the only way pre-defining it and changing the display property in css from none to block ? or is there a better way ?
You got it. I would start by in the correct order list all the elements for mobile and desktop together then display:none the ones you want to be hidden on desktop and go from there. Could do it with JS but that's a lot more work and could look wonky on load.
+1 on what #MPortman said, it'd be better to have a clear idea at the start;
I would use CSS Media Queries to do that.
You can for istance just use the display:none starting from a specific width.
The web inspector is useful to see some "common breakpoints" but you don't have to target #media rules at specific devices, it'd be better narrow to your desktop browser window and observe the natural breakpoints for your content.
Media queries are a good way to make responsive pages, you can hide or show elements from a certain width of the device used (mobile/desktop for example).
You can use them to set a minimum width and a maximum width.
For example:
/* If the screen size is between 768px and 900px (included), hide the element */
#media screen and (min-width: 768px) and (max-width: 900px) {
div.example {
display:none
}
}
Will hide the element on a screen bigger than 768px and 900px.
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 */
}
We are looking for a way to create a div class to only appear on mobile, ie. when the resolution is below 1024x768. We currently use:
hide-below-768
for resolutions above 768.
Would anyone be able to advise on setting for below?
Thanks in advance.
You're looking for media queries
#media screen and (max-width: 768px){
/* add css here */
}
This allows you to apply different class behaviours, wrapping and sizing rules depending on the browser view port size.
But this won't be just for mobiles. It's also works when reducing the width of the browser window on desktop browser.
It's part of a technique called responsive design.
http://www.w3schools.com/css/css_rwd_intro.asp
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.