I am getting into web development, and am having a bit trouble with CSS. I am more of a C++/PHP guy, so this is a different world to me and it boggles my mind. My only problem with CSS is positioning objects. That is literally all I have problems with. I can easily reference complicated selectors, and lookup how to manipulate certain attributes....but positioning stops me dead in my tracks.
This is less of a question, and more of a call out to someone who knows what they doing. I am completely in love with the concept of responsive web design. I, however, have never dove into this personally (I use wordpress and responsive themes to handle visuals---while I write the content and plugins i need). What exactly is involved in responsive web design? I heard of grid systems alot, and it makes sense in my head. Is a grid system what makes a page layout change? How? Do i code my own or use a existing system?
What about media queries? I see examples of this, and its amazing to me (i understand zero of it lol). With media queries it seems like you would easily be able to create a responsive site...but where does the grid system come into play?
I personally use media queries and would recommend it for you also, here are some tutorials that I used when I was first learning responsive web design:
https://www.youtube.com/watch?v=BIz02qY5BRA
https://www.youtube.com/watch?v=fA1NW-T1QXc
Good luck!
If you are new into this the best option is to try to use one of the frameworks around to try to achieve resposiveness. I will suggest have a look to Bootstrap or Foundation
But to answer your question you usually use media tags in your CSS so you apply different styles based on the device being used to display the page. For example you can apply certain positions and sizes to your elements based on the screen width:
#media (min-width: 996px) {
#yourelement {
margin-left: 10px
}
}
One resource I use on my website is Bootstrap. Bootstrap divides the page into 12 sections. For each <div> element, you can choose something similar to .col-md-12. This will tell the element to take up the entire width of the screen.
If you would like to make a page responsive to screen size, you would type something similar to <div class="col-xs-12 col-sm-6 col-md-3> This is saying that on phones, xs, there will be one column. On tablets, sm, there will be two columns. On a standard screen and up, md, you will see 4 columns. You may also use lg for large screens.
Edit: To add to your second question about media queries, Bootstrap is based off of media queries. The follow shows what each size refers to:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
For more information about this, here's a link to Bootstraps CSS section that describes it.
Related
I came across a situation in a project were i wanted to write media queries for iPad Air and iPad Mini separately. What i am wondering is how can i target it differently since their resolutions are overlapping. for example
#media only screen and (min-width: 768px) and (max-width: 1024px) { //iPad Mini
.content{
background-color: grey;
}
}
#media only screen and (min-width: 820px) and (max-width: 1180px) { //iPad Air
.content{
background-color: blue;
}
}
What background-color will be applied to the content class for the screen resolution which is between 820px to 1024px since it applies for both the cases? Please correct me if my understanding is wrong. what is the best way to handle such situations? thanks in advance
For screen sizes between 820px and 1024px, blue will be applied as the background color. Since both styles would validly apply to an element with class "content", and have the same specificity, the browser will apply whichever style comes last in the stylesheet. Read more here: https://css-tricks.com/precedence-css-order-css-matters/
It is technically possible to detect what device a user is using to browse your website, but only through exploitation of certain bugs, and likely not easily. You certainly can't write a media query that explicitly targets a specific device.
Even if you could easily, I wouldn't recommend it. In general, you should not design for specific devices - you should have a single, responsive design that neatly adapts to many different screen sizes.
If you're just looking for a good set of breakpoints, a common set of non-overlapping breakpoints are the Bootstrap breakpoints. A possibly better thought-out alternative are David Gilbertson's breakpoints.
Unless you have a good reason not to, you should just stick to using only min-width media queries (if your site is designed mobile-first), or just max-width media queries (if your site is designed desktop-first). This way, styles neatly and predictably overwrite each other as screen sizes get larger (in the first case) or larger (in the second case).
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.
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 am thinking to create my website in Wordpress. Previously, I did projects that were for other people but now I want to design my own website. I am currently focusing on the issues I have faced before and want not to repeat them this time.
The only issue is of responsiveness. I have faced issues for mobile device and later on have solved them after a great pain. But now as I am working fresh, I want to ask whether is it possible to make website responsive when it is under construction or only after the complete building of the website.
If there is a way to automatically make my website responsive then kindly discuss. If we can somehow make the website responsive at the time of creation then my work will be lessened and I can focus on other functionality of my website. If any one have any solution to my problem then kindly tell me.
You can get started with something like bootstrap or skeleton. These are (free :D), light templates and include responsiveness.
Skeleton: http://getskeleton.com/
Bootstrap: http://getbootstrap.com/
You can also use media queries if you want to make your site responsive yourself.
Media queries tutorial: https://css-tricks.com/logic-in-media-queries/
Good luck! :)
You can use a CSS framework such as Bootstrap to do this. That will automatically make your site responsive by default (in most cases, limitations might apply).
It means you have to build your website with Bootstrap though, so you have to do this while building the site, not afterwards.
The only way to make the website responsive is to buy a responsive theme. But that will not be 100% successful considering them customization. If you are thinking of making the website responsive plan it well and the build from the beginning. If the HTML is properly structured then the working time and issue fixing will be easier and less time consuming. If you need more details please comment
I known that this has an answer but still I thought I can give a contribution.
In the first place you talked of wordpress. Since you are going to making your website in wordpress then it is recommendable to choose a responsive theme for your website which is going to significantly reduce your overhead.
Also you can use media queries to make a website responsive like look at code below
/* ----------- Non-Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
You have to give screen size for various devices like laptops, ipads etc. There is a whole article here https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Apart from media queries you can use framework like bootstrap , skleton which will greatly reduce your overhead. All you have to do is to add its files and use the classes of framework which already has properties associated with them.
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.