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.
Related
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
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
I have built a page with interactive world maps plugin at http://www.parentcenterhub.org/find-your-center/
All other pages of my site are responsive except this one. What CSS should I add and in which file so that this page is also responsive on all devices (Android,iPhone, tablets, etc.)
I don't know if twentythirteen is responsive by default, but that shouldn't be a problem. You should add media queries in your css file, specifying specific widths where your page 'breaks', and add css specific for that width.
For instance for mobile you'd have
#media only screen and (max-width: 767px){
/* css goes here*/
}
And for every major element you'd specify how it behaves when the width of your screen is less than 767px.
There are lots of tutorials on line, so check them out.
Hello everyone I'm new at CSS. My question is how can I make my design compatible with different screen resolution. By the way I have checked wc3 validator there is no error. I define a div tag which is for displaying my page with different resolution here is my tag:
.page {
width: 964px;
margin-left: auto;
margin-right: auto;
height:990px;
background-image:url(../images/shadow.png);
background-repeat:repeat-y;
}
I mean when I look my website with 17" screen, my page is appeared different than 19" screen
You will want to search for Responsive Designs CSS, you can either make the design use all percentage amounts for sizing, or create style sheets for specific resolutions.
Have a look at:
Responsive Wire Frames
You can achive with CSS 3 media queries
Also check Responsive Design and Techniques for media queries