[HOW TO] - CSS Viewport and Breakpoint Sizes

Quote

Post by tverheijen » Wed Mar 09, 2016 8:13 am

Normaly will do this in dutch, bud englisch is for everyone to read it.

Use these quide examples as a guideline for your stylesheet CSS. Sometime its a pain in the ass to get it right in the first time with min-device and max-device settings.

@media Example
The following example changes the background-color to magenta if the viewport is 768 pixels wide or less (if the viewport is more than 768 pixels, the background-color will be white):

Code: Select all

@media screen and (max-width: 768px) {
    body {
         background-color: magenta;
    }
@media screen and (min-width: 769px) {
    body {
         background-color: white;
    }
}
TIP: never ever delete a code line from a *.tpl file if you want to remove something or dont wanne show, use: "display: none;" instead.

hope this guide helps you.


Phones and Handhelds
_____________________________________________________________
For Iphones

Code: Select all

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}
For HTC Phones

Code: Select all

/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S4 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S5 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}
For Galaxy Phones

Code: Select all

/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

}

[code]
/* ----------- HTC One ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {

}

/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {

}

/* ----------- Galaxy S4 ----------- */

/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {

}

/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {

}

/* ----------- Galaxy S5 ----------- */

/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {

}

/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {

}
[/code]


Tablets
_____________________________________________________________
For IPad(s)

Code: Select all

/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}
For Galaxy Tablets

Code: Select all

/* ----------- Galaxy Tab 10.1 ----------- */

/* Portrait and Landscape */
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px) {

}

/* Portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait) { 

}

/* Landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape) { 

}
For ASUS/NEXUS Tablets

Code: Select all

/* ----------- Asus Nexus 7 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Portrait */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape) {

}
For Other(s) Unkown

Code: Select all

/* ----------- Kindle Fire HD 7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

/* ----------- Kindle Fire HD 8.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}
Retrina & Non-Retina
_____________________________________________________________

Code: Select all

/* ----------- 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) { 
}
Wearables
_____________________________________________________________

For Apple Watch

Code: Select all

/* ----------- Apple Watch ----------- */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm) { 

}

For Moto 360

Code: Select all

/* ----------- Moto 360 Watch ----------- */
@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 

}
To test your responsive design looks across different browsers
click below for examples
_____________________________________________________________

1.) http://responsivetest.net/
2.) https://www.responsinator.com/

if there are things missing or comments, please let me know
Last edited by tverheijen on Wed Mar 09, 2016 11:42 pm, edited 5 times in total.
tverheijen
Active Member
Posts
325
Joined
Tue Sep 20, 2011 3:19 am
Top

Re: [HOW TO] - CSS Viewport and Breakpoint Sizes

Quote

Post by IP_CAM » Wed Mar 09, 2016 8:57 am

great JOB, thank you ! ;)
Ernie
openshop.li

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.

User avatar
IP_CAM
Legendary Member
Posts
13014
Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland
Top

Re: [HOW TO] - CSS Viewport and Breakpoint Sizes

Quote

Post by Opencartleerling » Wed Mar 09, 2016 10:08 pm

Thanks for posting this.

So css is fairly new to me and maybe my (stupid) questions help some other noob also ;)
If I wanted to use this I should copy paste these phones in my stylesheet.css and add

min-height: ***;
margin-left: ***;
padding: *** ***px;

to it?

Is there a way to quickly test what the website looks like on all these devices?
Opencartleerling
New member
Posts
70
Joined
Thu May 21, 2015 12:08 am
Top

Re: [HOW TO] - CSS Viewport and Breakpoint Sizes

Quote

Post by tverheijen » Wed Mar 09, 2016 11:15 pm

Opencartleerling wrote:Thanks for posting this.

Is there a way to quickly test what the website looks like on all these devices?

Just google for it, like this example: http://responsivetest.net/

I will update a list for it...
tverheijen
Active Member
Posts
325
Joined
Tue Sep 20, 2011 3:19 am
Top

Re: [HOW TO] - CSS Viewport and Breakpoint Sizes

Quote

Post by Opencartleerling » Thu Mar 10, 2016 11:20 pm

I am trying to figure out how to use this code. I am a total noob with this kind of stuff, but I am putting a lot of time in trying to figure things out.

With the below code should the search box be hidden on my samsung galaxy s6? It still shows, i'm not sure what I am doing wrong.

Code: Select all

}

/* Samsung Galaxy S6  */

/* Portrait and Landscape */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 4) {
  /* search */
#search {
	display: none;
}
Opencartleerling
New member
Posts
70
Joined
Thu May 21, 2015 12:08 am
Top

Re: [HOW TO] - CSS Viewport and Breakpoint Sizes

Quote

Post by tverheijen » Fri Mar 11, 2016 12:30 am

Opencartleerling wrote:I am trying to figure out how to use this code. I am a total noob with this kind of stuff, but I am putting a lot of time in trying to figure things out.

With the below code should the search box be hidden on my samsung galaxy s6? It still shows, i'm not sure what I am doing wrong.

Code: Select all

}

/* Samsung Galaxy S6  */

/* Portrait and Landscape */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 4) {
  /* search */
#search {
	display: none;
}

try

Code: Select all

/* Portrait and Landscape */ 
@media only screen and (min-device-width: 340px) and (max-device-width: 640px){
  /* search */
#search {display: none;}
}
tverheijen
Active Member
Posts
325
Joined
Tue Sep 20, 2011 3:19 am
Top

Re: [HOW TO] - CSS Viewport and Breakpoint Sizes

Quote

Post by Opencartleerling » Fri Mar 11, 2016 3:07 am

tverheijen wrote: try

Code: Select all

/* Portrait and Landscape */ 
@media only screen and (min-device-width: 340px) and (max-device-width: 640px){
  /* search */
#search {display: none;}
}
Unfortunately no luck for me ???
Opencartleerling
New member
Posts
70
Joined
Thu May 21, 2015 12:08 am
Top

Re: [HOW TO] - CSS Viewport and Breakpoint Sizes

Quote

Post by tverheijen » Fri Mar 11, 2016 5:22 pm

Opencartleerling wrote:
tverheijen wrote: try

Code: Select all

/* Portrait and Landscape */ 
@media only screen and (min-device-width: 340px) and (max-device-width: 640px){
  /* search */
#search {display: none;}
}
Unfortunately no luck for me ???
TRY AGAIN, remember to hit refresh!

Code: Select all

/* Portrait and Landscape */ 
@media only screen and (min-width: 340px) and (max-width: 640px){
  /* search */
#search {display: none;}
}
tverheijen
Active Member
Posts
325
Joined
Tue Sep 20, 2011 3:19 am
Top

Re: [HOW TO] - CSS Viewport and Breakpoint Sizes

Quote

Post by Opencartleerling » Fri Mar 11, 2016 11:41 pm

Thanks tverheijen
I think I did it wrong in the first place, but I am unsure what exactly I am doing wrong. I can find very little usefull info on how to create a good mobile view in opencart.

Instead of adding all the different phones in my stylesheet I now only used the way how you change your background color in mobile view and added only this to my stylesheet.

From here out I started removing info that takes up to much space in mobile view. I removed things like breadcrumps, products per page, the big shopping cart button etc. I am very happy with these changes and thankfull for your help.

What I can't get working like I want it to is optimizing mobile view for specific phones. I tried adding all phone information to my stylesheet and apply the same changes there, but it's not working. I also tried just adding the piece of code you changed for me and removed all phone info again but it's still not working. Any thoughts about what I could be doing wrong? Should I even add all the phones to my stylesheet and make the changes there?
Opencartleerling
New member
Posts
70
Joined
Thu May 21, 2015 12:08 am
Top

Re: [HOW TO] - CSS Viewport and Breakpoint Sizes

Quote

Post by tverheijen » Mon Mar 14, 2016 8:07 am

Opencartleerling wrote:Thanks tverheijen
I think I did it wrong in the first place, but I am unsure what exactly I am doing wrong. I can find very little usefull info on how to create a good mobile view in opencart.

Instead of adding all the different phones in my stylesheet I now only used the way how you change your background color in mobile view and added only this to my stylesheet.

From here out I started removing info that takes up to much space in mobile view. I removed things like breadcrumps, products per page, the big shopping cart button etc. I am very happy with these changes and thankfull for your help.

What I can't get working like I want it to is optimizing mobile view for specific phones. I tried adding all phone information to my stylesheet and apply the same changes there, but it's not working. I also tried just adding the piece of code you changed for me and removed all phone info again but it's still not working. Any thoughts about what I could be doing wrong? Should I even add all the phones to my stylesheet and make the changes there?

pm me so i can take a look :)
tverheijen
Active Member
Posts
325
Joined
Tue Sep 20, 2011 3:19 am
Top
Post Reply
Return to “Uiterlijk”
Who is online

Users browsing this forum: No registered users and 44 guests