I have file .psd with sizes 1920X1080.
I need to make responsive website that will look good for small and big screens.
I have made from this psd html with pixel perfect technic.
I just don't understand how to make from it design for smaller screens.
Please advise.
Using CCS3 media queries! Example for Desktop first:
// Your code for Desktop devices
#media only screen and (max-width: 768px) {
// Here your code for mobile
}
or for Mobile First
// Your code for Mobile devices
#media only screen and (min-width: 768px) {
// Here your code for tablet
}
#media only screen and (min-width: 992px) {
// Here your code for Small Desktop
}
Different rules:
#media screen and (max-width: 992px) and (max-height: 700px) {
// Code
}
or:
#media screen and (max-width: 992px) and (min-height: 400px) {
// Code
}
These are only some example. You must study media queries.
Related
EDIT: I am completely rewriting this question because I don't think I was being clear enough in my original posting.
According to bootstrap's website, the browser widths for each category of column should be as follows:
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575px) { ... }
// Small devices (landscape phones, less than 768px)
#media (max-width: 767px) { ... }
// Medium devices (tablets, less than 992px)
#media (max-width: 991px) { ... }
// Large devices (desktops, less than 1200px)
#media (max-width: 1199px) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
In summary: col-xl is 1200 pixels and up, lg is between 992-1199, md is 768-991, sm is 576-768, and xs is up to 575.
My problem is that for some reason, my webpage is behaving as if xs is sm, sm is md, md is lg, and lg is xl.
View this codepen in the google chrome inspector: https://codepen.io/colesam/full/YxjVwW/
There should be three items per row in lg and up, sm and md should be 2 per row, and xs should be 1.
See below in two examples:
EDIT 2: My header includes the following meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
EDIT 3: I have now tried inspecting the page on two separate computers but I am getting the same result. I also updated Bootstrap but to no avail. I'm really quite baffled as to why this would be happening. I tried adding xl columns to the html and no matter how large the screen size, the xl columns would not activate.
Here is an image of the google chrome inspector tool. It shows that .col-md-* is activated even though we are within the bounds for lg columns:
Bootstrap is mobile-first, so there's
.col-xs-*
#media (min-width: 768px) {
.col-sm-*
}
#media (min-width: 992px) {
.col-md-*
}
#media (min-width: 1200px) {
.col-lg-*
}
for grid (col-*) classes
instead of
#media (max-width: 575px) { ... }
#media (max-width: 767px) { ... }
#media (max-width: 991px) { ... }
#media (max-width: 1199px) { ... }
It turns out I was looking at the breakpoints for Bootstrap v4+ when I have been using version 3.3.7.
For Bootstrap 4 all of the breakpoints were shifted to make room for col-xl-*.
The Bootstrap 3 breakpoints are:
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
<style>
body{
background: #007bff;
}
#media screen and (min-width: 576px){
body{
background: #007bff;
}
}
#media screen and (min-width: 768px) {
body{
background: #dc3545;
}
}
#media screen and (min-width: 992px) {
body{
background: #28a745;
}
}
#media screen and (min-width: 1200px) {
body{
background: 6f42c1;
}
}
</style>
I have recently been learning about responsive web design. What I am trying to achieve is presented on the images below, one is for how the website should look like on desktop, and the other one is for mobiles devices.
So as you can see, there are four boxes. After clicking the box, in the textbox you will see some text referring to that box. What I have been thinking about is how to deal with this layout. Is it just the Media Queries and different CSS styling depending on the screen resolution? Or should i somehow (jquery?) switch the elements order in the DOM? Im not sure how to handle this. Thanks for any advice!
To expand on #D.Fraga's comment, the css #media rule could be used as follows:
#media screen and (min-width: 480px)
/* css for large device */
/* */
}
#media screen and (max-width: 480px) {
/* css for small device */
/* */
}
You have 2 sets of css, one for rendering larger devices, the other for smaller.
You may also considering using javascript screen.width with some sort of framework (i.e. angularjs) to dynamically render DOM elements based on screen size (though I highly recommend the former).
This can be solved with css only:
#media (max-width: 420px){
/* Your Code */
}
Study #media of CSS
If you use these media queries for different screen views, maybe your problem will be solved.
Media query for large devices like laptops, desktops with screen size 1025px to 1280px
#media (min-width: 1025px) and (max-width: 1280px) {
//Your css here
}
Media query for tablets, mobile (Landscape Layout) with screen size 481px to 767px
#media (min-width: 481px) and (max-width: 767px) {
//Your css here
}
Media query for smartphone mobile (Portrait Layout) with screen size 320px to 479px
#media (min-width: 320px) and (max-width: 480px) {
// Your css here
}
I have made a simple website which is responsive (more or less). I have used media query #media only screen and (max-width: 699.99px). Now I know that this will activate the css inside it when resolution is less than 699.99px. So it is fine with computer but it doesn't work in mobiles and I know why. But I don't really understand how to solve this. I want this query to work on computer screen (resizing) as well as mobile devices and tablets.
You can use em or rem instead of px. This makes the styling depend on how much content fits on the screen assuming that you also use em/rem to set the sizes of your elements.
could be an issue with difference between real screen width and actual size
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
or you can use media-device-width
#media only screen and (max-device-width: 700px) {
/* Style goes here */
}
but I suggest you to start with mobile-first approach that will definitely solve the issue. basically first you do css for mobile and then you override css for desktop with media queries like
#media only screen and (min-width: 700px){
/* Style goes here */
}
btw does your device support 699.99px? try using 700 instead
First of all if you want make your website responsive it's better to use responsive framework like Bootstrap or foundation.
but if you prefer to do it without framework. try this
you can make 4 media query steps
// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 544px and up)
#media (min-width: 544px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
and extra guide
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
I hope this can help
How can i resize the menubar of the image for mobile and tablet devices in HTML and CSS coding?
for mobile devices put your CSS in this
#media screen and (max-width: 480px) { }
and for tablet use
#media screen and (min-width: 481px) and (max-width: 768px) { }
For some reason my media queries do not resize my site correctly when viewing from an iphone or mobile device, i get the tablet version of the site on an iphone. The media queries work fine for tablet and perfectly when shrinking a browser window.
Have I missed anything?
#media only screen and (min-width: 1024px) {
/*styling here*/
}
#media only screen and (max-width: 1023px) and (min-width: 740px) {
/*Tablet styling here*/
}
#media only screen and (max-width: 739px) and (min-width: 0px) {
/*Mobile styling here*/
}
Check Out this,
and let me know whether it is working or not
You need to specify device width.
I think you may need to specify it as 'min-device-width'.
#media only screen and (max-device-width: 739px) and (min-device-width: 0px) {
/*Mobile styling here*/
}