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
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 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.
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
My concept of "Responsive Web Design" is:
Design a web layout that stretches nicely with any width monitor or media screen.
Design a web layout that squeezes too with any width monitor or media screen.
Design a web layout that viewed nicely on any device.
Design your layout with percentage (%) rather than pixels (px).
After the common concepts I owned some concepts, now at this point, I'm confused of:
Design anything as your layout, scrolling your mouse-wheel see how it looks when stretches or squeezes in different media screen width. Just design anything, and then do CSS for different media screens/device widths. To do so, just use #media screen and (max-width: 800px) { /* do Media CSS here; */ }, and add your NEW CSS for any of the element of your layout.
(So, when you have power to do anything with the media queries, just design with ease. After completing design for computer monitor, put emphasis on the devices or small media screens and play with the CSS)
Suppose in style.css I specified width of header .somediv{ width: 100%; }, in 320px I can specify the width whatever I like to as #media screen and (max-width: 800px) { header .somediv{ width: 50%; } }.
When something is popping out from the layout, just clear the float and put the thing in stack before or after the main container.
Do responsive CSS for images with img{ max-width: 100%; }.
Now for my satisfaction and progress through the responsive world, I want you to criticize me - what am I wrong about responsive CSS if I'm thinking like the above?
Or, I'm completely OK with the concept, then why my site is breaking in 320px while not on 800px, and I can't apply different CSS for 320px solely. Why I have to specify header height in 800px where it's applicable only in 320px?
So it looks as though you are doing everything right, I can see issues with your site but only at say 640px but 320px looks fine for me.
When I first started responsive designs I found this website: http://css-tricks.com/
I opened up their CSS stylesheet and studied it and found out how they did it.
For reference sake I would advise looking at the following links on how to do responsive design:
Simple Responsive Images with CSS backgrounds - SmashingMagazine Mobile
Beginner's Guide to Responsive Web Design - TeamTreeHouse.com blog
Responsive Web Design - Learn.ShayHowe.com
Build Basic Responsive Site CSS - NetMagazine.com
With regards to getting the Media Queries I would strongly advise looking here:
Media Queries for Standard Devices
There is people I know who still use php scripts to determine the users screen resolution and then load a specific CSS stylesheet which personally I would not recommend but that is also an option.
I personally would try changing your CSS to include the following:
#media only screen
and (max-width : 320px) {
#div1 {
width:100%;
}
}
The only way I have managed to get this working though is by either copying my whole CSS over again for that specific media screen or by only specifying the certain div's to change.
Remember you can re-declare the CSS styling for a DIV or CLASS further down the stylesheet
Hope this can be of some help to you.