Mobile CSS responsiveness – Portrait and Landscape

[Nethan]

Hello!
I’m very new to css and website developing.
I decided to start getting up my own website with wordpress, plus a builder theme that could help me out, choosing Divi.
I’m very happy with it so far, spending 12-14 hours a day on it, having fun.
Almost done with my home page, after a pair of weeks, now i would like to optimize it as much as i can for responsiveness.

I noticed, when i scale down my website to 1024px width, using Screenfly, that Divi theme CSS consider it as a desktop device. This sound a bit weird to me, and it mess up a bit my website. So my first question is, should i keep that 1024 as desktop, or it would be better to change my child CSS?

The second question is about screen orientation, if you check out the different screen stiles of my theme, you’ll notice there isn’t any CSS command about portrait or landscape possibilities, there’re just comments. But i’ve just read it is possible now with CSS3 to specify which orientation a style must operate on, like this:

@media all and (orientation:portrait) {
/* Styles for Portrait screen /
}
@media all and (orientation:landscape) {
/ Styles for Landscape screen */
}

My question is, do you think i should apply this kind of rules on my Divi child theme CSS, or should i keep it as it is, even if on landscape it mess up margin/padding and columns?

I paste all of the different screen specification i found on main CSS stylesheet of the theme, those refers to different sections/modules but at least i hope you can get the general setup from it:

/* Responsive Styles Standard Desktop Only */
@media all and (min-width: 981px) and (max-width: 1405px) {

/* Responsive Styles Desktop Only */
@media all and (min-width: 981px) {

/* Responsive Styles 981px – 1100px */
@media all and (min-width: 981px) and (max-width: 1100px) {

/* Responsive Styles Tablet And Below */
@media all and (max-width: 980px) {

/* Responsive Styles 782px */
@media screen and (max-width: 782px) {

/* Responsive Styles Tablet Portrait */
@media all and (max-width: 768px) {

/* Responsive Styles Smartphone Only */
@media all and (max-width: 767px) {

/* Responsive Styles Smartphone Portrait */
@media all and (max-width: 479px) {

/* Responsive Styles Tablet Portrait And Below */
@media all and (max-width: 768px) {

@media all and (min-width: 480px) {

/* Responsive Styles Standard Desktop Only */
@media all and (min-width: 981px) and (max-width: 1405px) {

/* Responsive Styles Desktop Only */
@media all and (min-width: 981px) {

/* Responsive Styles 981px – 1100px */
@media all and (min-width: 981px) and (max-width: 1100px) {

/* Responsive Smartphone Ladnscape And Above */
@media all and (min-width: 480px) {

/* Responsive Styles Tablet And Below */
@media all and (max-width: 980px) {

/* fix for the Login Module in Customizer */
@media all and (min-width: 768px) {

/* Responsive Styles Tablet Only */
@media all and (min-width: 768px) and (max-width: 980px) {

Thanks for any tips, as i said i’m new and my english is a bit crap.

PS: my website in on localhost atm, cannot post any link sry.

[serhiicss]

You could just use design based media queries. Shrink your browser window and every time you see your design breaks, create a media query break point.

or this article

[Nethan]

Thanks for fast answer. I was reading right now that article :P.

If i simply want to specify that tablet style goes up to 1024px width, how should i change the upper code? Changing that 980 to 1024, and 981 to 1025, could do it or there would be mess up risk?

[Nethan]

I did just try it out, seems to work well, now on ipad i get tablet setup instead of desktop. Seems a good solution to me, you think there’re many desktop with 1024 width around ? Anyway if it does look better, i do not see any issue going with it, no?

Thanks

[Author]

Posts