I made a side bar in my website but I realized in wasn't responsive and I didn't know how to make it responsive. Can any body tell me how to make a responsive side bar like the one in YouTube.
Add a media query to your CSS.
Media Queries on MDN:
Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport), or environment (such as ambient light conditions).
It'll depend on how your CSS is structured and what you want to do, but the following will hide your sidebar (using the .sidebar class on screen sizes smaller than 768 pixels).
#media screen and (max-width: 768px) {
.sidebar {
display: none;
}
}
That will hide all elements using the .sidebar class on screen sizes 768 pixels and less. You can change max-width to min-width to make it apply to screen sizes above that such as desktops etc.
Well, if you want your site to be responsive "easily", you should consider making it with a grid (Bootstrap).
If you want help to make your sidebar responsive, we need you to give the CSS and HTML parts of the sidebar, at the very least, to help you.
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'm developing a website and I have some problem with bootstrap/CSS.
http://50.87.248.234/~placehx2/
On this page the main menu changes its style under 992px, but I want it in mobile style even on big size screen.
How have I to modify the media queries?
Many Thanks
#media (max-width:1024px) {
mobile code here
}
You can change the width to what you need for the site
This may be a very hacky way of achieving what you would like but if you can't find another way to do it, you could replace all the media min-widths with larger widths.
#media (min-width: 768px) {
//bootstrap classes go here
}
This should make the mobile style apply with bigger windows, but it's a bit of a pain to deal with if you plan on updating your bootstrap version later because you'll have to repeat it. But for a quick fix this will do.
Im a total newbie as far as mobile devices are concerned. Anyhow, i created a webpage (still under construction) and implemented it on the existing wp theme called govpress (yes, i know it might not be the most practical way to make things happen but with my coding skills it was the easiest). Now i just cant get it working correctly with mobile devices. I havent found the code that makes it behave as it does. So, on a mobile it seems to scale the page to screen width resolution of the device(?). Also the background and the header div (full width) scales to device screen width. And even if i zoom out it doesnt enlarge the bg nor the header div. Is it the theme that has this behavior somewhere coded or is it somewhere in the css..!? Heeeelp, please!!!
Find the site on http://www.lifespectrum.eu
And heres my css: http://lifespectrum.eu/wp-content/themes/govpress/style.css
(lots of thrash there though)
Please ask if you need anything else!
Thanks in advance!
The scaling is done in the css file via media queries. Adjust these statements accordingly to make the background/header do what you want:
#media screen and (max-width: 840px)
#media screen and (max-device-width: 680px)
#media screen and (max-width: 480px)
Mobile behaviors are CSS. Your last CSS codes #media screen and (max-device-width: 680px) are doing this behavior. You can easily check your responsive style just by making your desktop window screen smaller and larger. By doing this, you can easily see that your logo header is responsive but your body content is staying the same.
I would inspect element on the body and do the same as you did with the .logo You can preview your changes by editing right in the inspect element with chrome (right-click & inspect element) just to see how it'll look.
It looks like your background/header are the only elements that have css written to resize them in the media queries cfnerd listed.
The content area has the classes you need to adjust settings for in the media queries at different widths. For example, you have .topwhite and .top divs set in the css to a static width of 810px. Once the window width is smaller than 810px those will give you the nasty horizontal scrolling bars. One quick fix is to set them as a
width:100%;
max-width:810px;
so that at most they can go to the original size you set but as the device or window width gets smaller the size of those divs will shrink along with it. That will only help you with the containers, you will have to also add new css settings for the contents as well. But you can use the same idea.
You may need to implement the viewport mets tag. See https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Most of the tutorials I'm reading on using Media Queries are demonstrating the use of min-width, but I'm rarely seeing people using max-width.
Is this some sort of design trend, or pattern, why people are using min-width over max-width?
For example, I'm designing a site starting from mobile, working up to the desktop. I am using Foundation 4, but using media queries to remove various elements on the page and re-position the source order.
One thing I am facing is a custom navigation for any device whose width is 360px or less. I want them to have a vertical navigation, rather than an inline horizontal. So my idea was to use max-width to target these devices.
Should I be using min-width instead if I am designing mobile first? I.e. all the default styles are for mobile, and thus using min-width to progressively enhance the layout?
2 Part Answer
Part 1: To answer "why people are using min-width over max-width?":
It has to do with design flow. Typically, with min-width patterns, you're designing mobile-first. With max-width patterns, you're design desktop-first.
Going mobile-first with min-width, the default style is the mobile style. Queries after that then target progressively larger screens.
body {
/* default styles here,
targets mobile first */
}
#media screen and (min-width:480px) {
/* style changes when the screen gets larger */
}
#media screen and (min-width:800px) {
/* And even larger */
}
Conversely, using max-width, is desktop-first then adds queries to make styles mobile-friendly
body {
/* default styles here,
targets desktops first */
}
#media screen and (max-width:800px) {
/* style changes when the screen gets smaller */
}
#media screen and (max-width:480px) {
/* And even smaller */
}
Part 2: For your particular custom navigation for any device who's width is 360px or less:
You could include that as a separate max-width query, IF thats the only exception to the rule. OR use that style as your baseline, then change it for wider screens.
If you do an exception (which isn't really following mobile-first design methods), it'd be something like:
body {
/* default styles here,
targets mobile first
ALSO will cover 361 - 479 width */
}
#media screen and (max-width:360px) {
/* style ONLY for screens with 360px or less width */
}
#media screen and (min-width:480px) {
/* style changes when the screen gets larger */
}
etc...
It really depends on how your stylesheet works. For example:
#media screen and (min-width:100px) {
body { font-weight:bold; }
}
#media screen and (min-width:200px) {
body { color:#555; }
}
The above two media queries would make the body font bold if the screen is greater than or equal to 100px, but also make the color #555 if it's greater than or equal to 200px;
Another example:
#media screen and (max-width:100px) {
body { font-weight:bold; }
}
#media screen and (max-width:200px) {
body { color:#555; }
}
Unlike the first example, this makes the body font bold and color #555 only if the screen width is between 0 and 100px. If it's between 0px and 200px it will be color #555.
The beauty of media queries is that you can combine these statements:
#media screen and (min-width:100px) and (max-width:200px) {
body { font-weight:bold; color:#555; }
}
In this example you are only targeting devices with a width between 100px and 200px - nothing more, nothing less.
In short, if you want your styles to leak out of media queries you'd use either min-width or max-width, but if you're wanting to affect a very specific criteria you can just combine the two.
In short, min-width is a mobile 1st approach, max-width is a desktop 1st approach.
Min-width is the minimum width at which a style will START to be applied. (Have to be ordered from smallest to largest to work properly, regular styles first). Put another way: If device width is greater than or equal to..., then apply some specific styles. With min-width, styles START and continue forever as long as min-width is met, and no max-width is specified.
Max-width is the maximum width at which a style will continue to be applied. After that, the style will STOP being applied. (Have to be ordered from largest to smallest to work properly, regular styles first). Put another way: If device width is less than or equal to..., then apply specific styles. Styles STOP as soon as width greater than max-width is hit.
Finally, It depends on how you want to implement. There is no ONE RIGHT solution as some may claim. In my opinion min-width works great when starting from scratch, but max-width often makes more sense to me when retrofitting an existing web site.
What are Mobile-first and Desktop-first approaches?
A mobile-first approach to styling means that styles are applied first to mobile devices. Advanced styles and other overrides for larger screens are then added into the stylesheet via media queries.
This approach uses
min-width
media queries.
Here’s a quick example:
// This applies from 0px to 600px
body {
background: red;
}
// This applies from 600px onwards
#media (min-width: 600px) {
body {
background: green;
}
}
In the example above, will have a red background below 600px. Its background changes to green at 600px and beyond.
On the flipside, a desktop-first approach to styling means that styles are applied first to desktop devices. Advanced styles and overrides for smaller screens are then added into the stylesheet via media queries.
This approach uses >max-width
media queries.
Here’s a quick example:
// This applies from 600px onwards
body {
background: green;
}
// This applies from 0px to 600px
#media (max-width: 600px) {
body {
background: red;
}
}
will have a background colour of green for all widths. If the screen goes below 600px, the background colour becomes red instead.
Because you're developing a website starting with a mobile design and increasing complexity with resolution, I would advise going with min-width because that follows the same work pattern.
Technically, min-width is "mobile first" in the sense that you generally begin developing for mobile and add more complexity as the resolution increases.
However, the term gained popularity more so over its alternative meaning which has generally come to imply more about an increase of focus on mobile efforts and prioritization (mostly fueled by clients or management that don't understand the technical inference). That is likely why you end up seeing a lot of min-width examples online (trendy bloggers writing about trendy topics).
When I work with complex desktop designs, I personally find it easier to write max-width queries to "simplify the equation" so-to-speak. But using max-width queries does not prevent you from focusing on mobile and can still completely be a part of a "mobile first" strategy.
In either case, the most important thing is consistency. Use one and stick to it for that project. A project can become very confusing if it uses both.
As a final note, using less queries when possible is ideal. This can be achieved through good responsive design.
I had a unresponsive website first, designed for desktops. Then added responsiveness by adding max-width media queries.
My site now has layouts for 320px, 480px, 768px, 960px, and 1024px etc. wide devices, and so I have added media queries that look like max-width: 479px, max-width: 767px, max-width: 959px etc. This works fine - the site behaves as it should.
However, I've recently found that the Chrome Developer Tools "Device Mode" has a Media Queries Tool that is really, really useful to me. It allows me to click to display the website at each media query level that Chrome finds on my page. This is a great help to me when designing the responsive layouts.
The Media Queries Tool uses the numbers it finds in the media queries, i.e. 479, 767, 959, 1023 etc. But this means that, for example, if I want to see what how my layout for a 480px-wide device looks, I have to click the max-width 767px level media query, which to me is quite unintuitive.
This has made me rethink my current desktop-first CSS, and I will be rewriting my CSS using a mobile-first approach.
I think the mobile-first CSS using min-width will be much more readable, because you will see a media query for min-width: 480px and know that will be the CSS for a 480px-wide device.
The majority of sites I've been working on are designed for desktop first and in these cases using max-width queries makes sense. Generally if you are starting small screen first use min-width and then build on top with media queries targeting larger resolutions.
You can of course mix both min and max queries to get specific resolutions
Maybe have a look at using min-device-width for the specific issue you're having with the navigation