Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am trying to create a responsive webpage using bootstrap,but I'm confused on how to start.Can anyone help me to move into the right direction?
Here is my code
https://jsfiddle.net/c30a7bd2/It should be responsive for all the devices.
Despite the downvotes, here's some info to get you started.
Process:
Design from smallest viewport to biggest. i.e. design your responsive site first for mobile devices in portrait, then mobile landscape, then tablet portrait, then tablet landscape, then smallest desktop, then largest desktop. If you look at the Chrome dev tools, you will see an icon on the left-top to the right of the arrow icon. This puts the browser into responsive design mode that lists the most common devices. Very helpful.
Learn about media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
There is a lot of stupid confusion about how to use #media queries correctly. Let me set you straight right from the beginning.
You only need to worry about min-width. Don't think about ranges, don't use anything else other than min-width.
Here's why.
Since we're writing our css from the smallest device width first, as browser widths increase all we're doing is overriding earlier set styles. That's it. That literally is the secret to doing great, simple responsive css coding.
What breakpoints to use:
Again, lots of clever engineers try to be too clever. They introduce odd breakpoints, try to avoid pixel 'px' definitions, etc. Stop doing that.
Remember, since we're are writing our code mobile portrait first (the smallest device size), there is no media-query for this. Its just css.
Here's the breakpoints you should start with:
/* all mobile portrait coding goes first */
#media all and (min-width: 480px) {
/* this is the most common mobile landscape minimum width */
}
#media all and (min-width: 768px) {
/* this is the most common minimum tablet width */
}
#media all and (min-width: 1024px) {
/* this is the most common minimum desktop width. It also is the
most common minimum tablet landscape width. */
}
#media all and (min-width: 1300px) {
/* this is the most common minimum wide desktop width.
This is the only media query you might consider setting to 1200px
if your graphic design requires it. */
}
That's it. That is quite literally everything you know to get started writing great responsive css.
Just remember the key concept is utilizing inheritance. 80% of your css should probably be written for the mobile portrait size first. All of those styles get inherited into wider and wider screen widths. Then override them as necessary for the new wider screen. You will find that as your media queries increase, there is less and less css in them.
Have fun and write great code!
Related
I have recently started learning how to use CSS media queries to develop websites that are responsive / mobile friendly however, I am not familiar with the best practices associated with determining which width ranges to develop designs for.
For example, I normally use three sets of CSS rules. One for a small width (mobile) , one for a medium width (tablet or small laptop screen) and one for a large width (desktop).
This is what it looks like in code:
#media screen and (min-width: 1495px) {
//CSS RULES HERE
}
#media screen and (max-width: 1494px) and (min-width: 1245px) {
//CSS RULES HERE
}
#media screen and (max-width: 1244px) and (min-width: 751px) {
//CSS RULES HERE
}
My sizing conventions (min width & max width) are completely arbitrary and I determine whether it works from trial and error. Often This doesn't work very well and I can't get the design to look good on all difference screen resolutions.
First of all.... Is there a best practice for the most ideal width ranges to use?
Secondly, is there a framework or template that will make all of this easier?
(That is not Bootstrap).
FYI: I use Foundation 6 to as a grid system but I haven't really found information much on responsive sites in Foundation 6.
Seems rare to me that you haven't found information about responsive sites on Foundation, this framework has been responsive from the beginning, and have wired cool stuff to help you on that matter. Just want to make clear I'm talking here about the Float Grid which isn't default anymore since 6.4 (but you can customize or switch up the grid in SASS settings).
Foundation grid has 3 default expected sizes: small (mobiles), medium (tablets) and large (desktop), in Float Grid you can use this way:
<div class="column small-12 medium-6 large-4></div>
This column will be full width on mobile, 1/2 width on tablet and 1/3 width on desktop; you can even ditch the small-12 because every column has full width (12 columns) by default.
That's the way you approach it from the grid... if you use the SASS version of the framework, you have another powerful tool, a mixing to set code for a specific breakpoint... let's say you want to apply some styling for medium size (and up), you just need to use this in your .scss file:
#include breakpoint(medium) {
// Your SASS/CSS code here
}
Please notice I said "medium and up", that's because Foundation is mobile-first, so everything you put in a smaller breakpoint, will be available on following sizes (unless you override them), if that philosophy is kinda awkward to you, and you need to put some code for only the medium breakpoint, you just need to put the code this way:
#include breakpoint(medium only) {
// Your SASS/CSS code here
}
That's a quite fast way to handle mediaqueries inside your code, totally aligned with Foundation code... the best part?, if you change breakpoint sizes at mid-development, you just need to change the sizes on the _settings.scss file and all code will update on the next build.
As you tagged this question on "Foundation" and mentioned on the question body, I did my answer deliberately Foundation-centric. Hope this helps.
I usually go for a single breakpoint at 768px.
With that I go for three queries (and they worked out pretty well so far) :
desktop (min-width is 768) [sheet #1]
mobile (max-width is 768) [sheet #2]
portrait (according to orientation) [sheet #2]
I don't think there's really a strict and fixed set of breakpoints that everyone should be using, I feel like it's more depending on what you need for your website.
Although, if you still wanna have a look at a set of breakpoints, I have bookmarked this a long time ago : ResponsiveDesign.is - breakpoints
You can use js to calculate the value of the font size in the HTML, then use a framework such as CSS to do the calculations dynamically
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have the following queries on my WordPress theme, and they are alot ;/
I am new to WordPress so i can't understand them correctly, but i am sure i will understand your explanation .
here is what I don't understand.
1: I don't understand for which screen's they are.
2: I don't understand what the "max" ( this one is very strange )
3: will the max width terminate the setting or something ? because we have min 600 and max 600
here is the code.
1) screen here means the screen of the device itself (not a print as print is the common one). But this has same effect as
#media (min-width: 312px)
Just you are specifying that you want the max-width of the screen on that the website loaded, that's it
2) the max means the maximum width of the device screen to which the following styles are applied.
for eg:
#media screen and (max-width: 768px){
//These styles will apply only if the screen size is less than or equal to 768px
}
3) There is no termination. If you have max and min with 600px, then the styles will applied as per the position of the code. The code that comes below will apply (if min code is at line number 10 and max code at line number 20 then max will work)
Screens are not printed on paper or read out through a speaker. They are screens like the ones on a smartphone, laptop or monitor, and the rules apply to all of them (which also meet the and condition).
Max is a standard English term. The rules apply unless the width is more than the maximum defined. It won't terminate anything, the rules inside it just apply when the condition is met.
because we have min 600 and max 600
… with different sets of rules. Some apply when the width is at least 600px and some apply when it is no more than 600px.
With mediaqueries you can determine on which resolution your styling will be applied max means if the screen size is bigger than your number the styling in the media query will not be applied. Same with min if screen size is lower than your number styling will not be applied. Screen means that you styling will be applied when the medium has a screen for example you could write print than the styling will only be applied if you print your website.
A media queries detect media type which are currently using your
website in this case is screen so any device - you can also put
specific css for print - to make your website be print friendly.
Using Media Queries are core of RWD - responsive web design.
min-width its saying browser 'please use this block of css rules if viewport of your browser is min 312px so basicly every device
which has viewport size bigger than 312px.
max-width its saying please do this block of css rules if viewport of device is bigger than 456px - so all devices which has
455px and less will not run this css rules.
There is also state like #media screen and (min-width: 200px) and (max-width: 1000px) {} - its targeting devices which has more than 201px and less than 999px of viewport size.
Links:
https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width
https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries
The media-queries are basically a simple if statement on other programming languages.
screen: The screen is used to define the rules only for computer screens, tablets or smartphones. There are other media-types like projection or print.
max-width: specifies the maximum width of the screen (or media) for the CSS rules. All rules in this part are for screens lower and equals the value.
min-width: specifies the minimum width of the screen (or media) for the CSS rules. All rules in this part are for screens larger than the value.
Example #1 (using min-width):
#media screen and (min-width: 456px) { ... }
The CSS rules in this part are only used for computer screens, tablets or smartphones with a minimum screen width of 456 pixel.
Example #2 (using max-width):
#media screen and (max-width: 456px) { ... }
The CSS rules in this part are only used for computer screens, tablets or smartphones with a maximum screen width of 456 pixel.
CSS3 Media Queries: https://www.w3.org/TR/css3-mediaqueries/
Most media features can be prefixed with "min-" or "max-" to express "greater or equal to" or "less than or equal to" constraints. This avoids using the "<" and ">" symbols, which would conflict with HTML and XML. If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.
Hopefully this guide will help you understand how this works: Link
You should also check out this guide to the different screen sizes:
Link
New to CSS, HTML and Java but about to finish my first website. Apologies if this has been answered before but I've been driving myself crazy for days trying to solve this issue.
I created my site in 1366 x 768 and therefore tailored the max-width/height accordingly, but since testing the site on a Macbook air (resolution 1440x900), I'm having issues with resizing and white space around the content.
I updated max-width to 1440 which seemed to have sorted the horizontal white space, but the space beneath my footer remains no matter what I do.
Is there a way to resize up and down with resolutions? Are media queries the answer or am I gonna have to go back and redesign my site?
Any help would be greatly appreciated.
You can use this style:
#media screen and (min-device-width: 1366px) {
}
I suggest you to use bootstrap grid if you are not very familiar with responsive design. Each divgets from .col-md-1 class. (The sum is equal to 12).
With this Grid System you can see the elements in each resolutions fine.
in the CSS you can add multiple #media screen sizes and set padding and margins according to the size of the device they are using. for example the website im working on at the moment has different styling for 3 different device sizes.
#media (min-width: 1366px) {
body{
width: 100%;
clear: left;
white-space: nowrap;
}
}
Something like this could be helpful
I want to develop a responsive web page using media queries.
I have also wrote media queries for mobile, tables & desktops.
But i am not able to understand that if I am writing the set of css code for device max-width:320px , then same code i have to write again for another device i.e 640px with difference sizes.
I am confused whether this is the correct way of writing media queries as i am writing the same set of css code for each & every device size again & again.
Please help me to proceed furthur as i am new to media queries.
And also i am confused whether to go for adaptive layout or responsive layout?
That's great of you & I appreciate the helpful answers given by you all.
I have given a task by company where they told me that i cannot use any frameworks for designing responsive webpage, I only have to use media queries for this.
This might clear all your doubts.This framework makes your work a lot easier. http://getbootstrap.com/
Hope it helps.
With the media queries you're telling to your code -Bro if the width if bigger than this "size here" (320px, 240em whatever....) then use this piece of code.
else if "next bigger size here" then use this other piece of code, and the same with the next #media queries
There is two ways to use it.
Coding thinking in mobile first (ULTRA MEGA recommended) or not :)
This mean, you create code for the small browser and then start adding mediaqueries for phablet, tablet and then desktop and wide screen.
This is so useful because help you to add in the page only the really important content and avoid the useless ton of information. because you started designing the small size and have to compress all the usefull info and put inside :)
Learn more about mobile first technique
#media (min-width: 320px) {
nav li {
display: inline-block;
}
}
The idea of media queries and of cascading style sheets in general is to progressively enhance your as you go forth.
This means: start your design aiming at mobile. Once done with that add a media query for your next bigger targeted viewport size.
In this query overwrite all styling that needs to be different for this viewport.
And so on ...
Want you do not want to do is writing all styles again an again.
Check out some popular frameworks to get inspiration like twitter bootstrap, html boilerplate or foundation framework.
If the design is the same, lets say for desktop to large wide monitors, we can do something like
#media screen and (min-device-width: 800px) and (max-device-width: 2048px) {
/* STYLES HERE */
}
supposing you want the same design for every desktop screen. This will help you cutting the code down and not rewriting it.
the below example you can understand than it is essay to understand the media queries.
1) if you say - min-device-width:320PX; this is last breakpoint of your design, below your design doesn't work.
2) if you say - max-width:420px; - this pice of code work until the 420px only after that the code which you mentioned in the breakpoint that doesn't work in remain widths.
basic break point: 320px -mobile size
480px -mobile size, 640px -mobile size,
768px -heigh-end phones,
1024px - pad.
as remain widths may be seems to work in desktop width.
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
hope you get one idea if you read clearly.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am always coming back to the same question when developing a website for all devices.
Does it make more sense to make everything full responsive by setting everthing in percentage values or to query a few max-width and min-width with css3 so you can have your normal website with 960px and size it down for the different devices..
For the css3 mediaqueries i would use something like this:
/* CSS */
/* Basic responsive */
#media screen and (max-width: 960px) {
/* ..custom CSS for viewports less than 960 here */
header { /*...*/ }
section { /*...*/ }
footer { /*...*/ }
/* etc.. */
}
/* iPads (portrait) and similar tablets */
#media only screen
and (min-device-width : 768px) {
header { /*...*/ }
section { /*...*/ }
footer { /*...*/ }
/* etc.. */
}
/* Smartphones */
#media only screen and (max-device-width : 480px) {
header { /*...*/ }
section { /*...*/ }
footer { /*...*/ }
/* etc.. */
}
thank you
You should do a bit of both. If you can write some CSS that works across all devices then that's great. For example if your header goes 100% of the width for every device there's no need to adjust it with media queries. In reality you'll find certain parts don't work and will need adjustment. This is where media queries come in.
You shouldn't treat each media query as a new stylesheet, instead it should just alter or build on the styles already defined in order to make the layout work.
Typically sites adopt a mobile-first approach. This means you start with the mobile layout and increase the complexity as the viewport width increases. The benefit of this is that older browsers will get the simplistic mobile version of the site (which at least should work, even if it isn't pretty on a desktop).
You can read more about responsive layouts here:
Build a Responsive, Mobile-Friendly Website From Scratch
Common Techniques in Responsive Web Design
If you fall in such confusions, i would suggest to opt for bootstrap
...otherwise, using media-queries is a better option as it gives you wider flexibility and freedom to set values both in pixels as well as percentages.
A combination of both, or media queries.
You have to remember that if you don't use Media Queries, on every device (smartphone, desktop, laptop, etc.) you are loading all data for the website.
And if you load all data it loads also, for ex. images and that can cost a lot of Kb sent to the client browser.
With Media Queries you can set display: none; to images on the page and less Kb will be send to the client.
So it is important to understand that form mobile devices you should send as small portion of data as possible.