Webapp media screeen problem

Question

SimonIoa 77 Master Poster

8 Years Ago

Hello i want my website to be responsive

i have made media querries for several devices. There is one thing i cant understand on my mobile phone that says analysis 720X1280 and its 5.0 inch sreeen phone

here are the media querries.

<style  type="text/css">
.box
{
    width:80%
}
.block
{
    padding-bottom:3%;
}

   .one {
   background: rgba(66, 132, 243, 0.6);
    border-top:thick solid #4284f3

}

.two {
   background: rgba(233, 67, 53, 0.6);
    border-top:thick solid #e94335
}

.four {
     background: rgba(51, 168, 2, 0.6);
    border-top:thick solid #33a802
}

.three {
   background: rgba(250, 187, 4, 0.6);
    border-top:thick solid #fabb04;
} 
#logo-rovespier { display: none; }
        #logo-rs { display: block; }
@media only screen and (min-device-width: 481px) and (max-device-width: 768px) {
     #banner { width:100%; }
        #banner img { max-width:100px; max-height:100px; }
        /*#main { width:740px; }*/    
        #main-content {  width:100%;padding:0px;}   
    /*#main { width:740px; }*/            
    .block {
    float: left;
    display:inline;
    }
       .one {
        width:50%;height:30em;
    }

    .two {
        width:50%;height:30em;
    }

    .four {
        width:50%;height:30em;
    }

    .three {
        width:50%;height:30em;
    }
} 


@media only screen and (min-device-width: 321px) and (max-device-width: 480px) {
    #banner { width:100%; }
    #banner img { max-width:100px; max-height:100px; }
        /*#main { width:740px; }*/    
        #main-content {  width:100%;padding:0px;}   
    /*#main { width:740px; }*/                 
        .block {
    display:block;
    }
       .one {
        width:100%;height:30em;
    }

    .two {
    width:100%;height:30em;
    }

    .four {
        width:100%;height:30em;
    }

    .three {
        width:100%;height:30em;
    }
}

@media only screen and (max-device-width: 320px) {
    #banner { width:100%; }
    #banner img { max-width:100px; max-height:100px; }
    /*#main { width:740px; }*/     
    #main-content {  width:100%;padding:0px;}          
    .block {
    float: left;
    display:block;
    }
       .one {
        width:100%;height:30em;
    }

    .two {
    width:100%;height:30em;
    }

    .four {
        width:100%;height:30em;
    }

    .three {
        width:100%;height:30em;
    }
}

 @media only screen and (min-device-width:960px){
         #banner { width:100%; }
        #banner img { max-width:130px; max-height:50px; }
        #logo-rovespier { display: block; }
        #logo-rs { display: none; }
        /*#main { width:740px; }*/    
        #main-content {  width:100%;padding:0px;}        
        .block {
        float: left;
        display:inline;
        }
           .one {
    width:25%;height:34em;
    }

        .two {
            width:25%;height:34em;
        }

        .four {
            width:25%;height:34em;
        }

        .three {
            width:25%;height:34em;
        }
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-device-width:1440px){
        #banner { width:100%; }
        #banner img { max-width:740px; max-height:222px; }
        #logo-rovespier { display: block; }
        #logo-rs { display: none; }
        /*#main { width:740px; }*/   
        #main-content {  width:100%;padding:0px;}         
        .block {
        float: left;
        display:inline;
        }
           .one {
            width:25%;height:38em;
        }

        .two {
            width:25%;height:38em;
        }

        .four {
            width:25%;height:38em;
        }

        .three {
            width:25%;height:38em;
        }
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-device-width:2000px){
        #banner { width:100%; }
        #banner img { max-width:340px; max-height:135px; }
        #logo-rovespier { display: block; }
        #logo-rs { display: none; }
        /*#main { width:740px; }*/            
        #main-content {  width:100%;padding:0px;}
            .block {
        float: left;
        display:inline;
        }
           .one {
            width:25%;height:40em;
        }

        .two {
            width:25%;height:40em;
        }

        .four {
            width:25%;height:40em;
        }

        .three {
            width:25%;height:40em;
        }
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width:480px){
    #banner { width:100%; }
        #banner img { max-width:130px; max-height:50px; }
        #main-content {  width:100%;padding:0px;}
        #logo-rovespier { display: none; }
        #logo-rs { display: block; }
        /*#main { width:740px; }*/            
            .block {
        float: left;
        display:block
        }
       .one {
        width:100%;height:34em;
        }

        .two {
            width:100%;height:34em;
        }

        .four {
            width:100%;height:34em;
        }

        .three {
            width:100%;height:34em;
        }
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (max-device-width:768px){
        #banner { width:100%; }
        #banner img { max-width:130px; max-height:50px; }
        #main-content {  width:100%;padding:0px;}
        #logo-rovespier { display: none; }
        #logo-rs { display: block; }
        /*#main { width:740px; }*/            
        .block {
        display:block;
        }
       .one {
        width:100%;height:34em;
        }

        .two {
            width:100%;height:34em;
        }

        .four {
            width:100%;height:34em;
        }

        .three {
            width:100%;height:34em;
        }
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (max-device-width: 1024px) and (orientation:portrait) {
    #banner { width:100%; }
    #banner img { max-width:130px; max-height:50px; }#main-content {  width:100%;padding:0px;}
    .form-inline input
    {
        display:inline-block
    }
    /*#main { width:740px; }*/  

    .block {
    display:block;
    float:left
    }

    .one {
        width:50%;height:34em;
    }

    .two {
        width:50%;height:34em;
    }

    .four {
        width:50%;height:34em;
    }

    .three {
        width:50%;height:34em;
    }
      /* For portrait layouts only */
    }

    @media only screen and (device-width: 1024px) and (orientation:landscape) {
    #banner { width:100%; }
    #banner img { max-width:130px; max-height:50px; }
    #logo-rovespier { display: block; }
    #logo-rs { display: none; }
    /*#main { width:740px; }*/            
        .block {
    display:inline;
}
   .one {
    width:25%;height:34em;
}

.two {
    width:25%;height:34em;
}

.four {
    width:25%;height:34em;
}

.three {
    width:25%;height:34em;
}
      /* For landscape layouts only */
    }
</style>

Shouldn't my websitee appear like in @media only screen and (min-device-width: 481px) and (max-device-width: 768px) ?

Instead it shows like in @media only screen and (device-width: 1024px) and (orientation:landscape)

html-css

2 Contributors
8 Replies
444 Views
3 Weeks Discussion Span
Latest Post 8 Years Ago Latest Post by gentlemedia

gentlemedia 803 Master Poster

8 Years Ago

Just let your content decide when you need a media query. Resize your browser window and if a piece of content or element start to look akward, then you need a mq to make it look decent again. To me all this predefined mq's based on pixel widths of certain devices is less efficient. What about all those devices with widths that don't fall in between those standard 320px, 768px and 1024px, etc.?

I for example start of my projects with a stylesheet like this. This works for me, but doesn't have to work for someone else of course. What I don't need at the end I delete and if I need a mq in between, I add.

/* REGULAR (NON-RETINA DISPLAY) MEDIA QUERIES */
/**********************************************/

@media screen and (min-width: 25em) { /* = 400px */


} /* end 25em (400px) MQ */


@media screen and (min-width: 31.25em) { /* = 500px */


} /* end 31.25em (500px) MQ */


@media screen and (min-width: 37.5em) { /* = 600px */


} /* end 37.5em (600px) MQ */


@media screen and (min-width: 43.75em) { /* = 700px */


} /* end 43.75em (700px) MQ */


@media screen and (min-width: 50em) { /* = 800px */


} /* end 50em (800px) MQ */


@media screen and (min-width: 56.25em) { /* = 900px */


} /* end 56.25em (900px) MQ */


@media screen and (min-width: 62.5em) { /* = 1000px */


} /* end 62.5em (1000px) MQ */


@media screen and (min-width: 68.75em) { /* = 1100px */


} /* end 68.75em (1100px) MQ */


@media screen and (min-width: 75em) { /* = 1200px */


} /* end 75em (1200px) MQ */


@media screen and (min-width: 81.25em) { /* = 1300px */


} /* end 81.25em (1300px) MQ */


@media screen and (min-width: 87.5em) { /* = 1400px */


} /* end 87.5em (1400px) MQ */


@media screen and (min-width: 93.75em) { /* = 1500px */


} /* end 93.75em (1500px) MQ */


@media screen and (min-width: 100em) { /* = 1600px */


} /* end 100em (1600px) MQ */


/* LARGE/RETINA DISPLAY MEDIA QUERIES */
/**************************************/

/* 1.25 dpr */
@media (-webkit-min-device-pixel-ratio: 1.25) and (min-resolution: 120dpi) {

    /* Retina-specific stuff here */

}


/* 1.3 dpr */
@media (-webkit-min-device-pixel-ratio: 1.3) and (min-resolution: 124.8dpi) {

    /* Retina-specific stuff here */

}


/* 1.5 dp */
@media (-webkit-min-device-pixel-ratio: 1.5) and (min-resolution: 144dpi) {

    /* Retina-specific stuff here */

}

/* 2 dpr and 100em (1600px) */
@media (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { 


} /* end 2 dpr and 100em (1600px) MQ */

Edited 8 Years Ago by gentlemedia

gentlemedia 803 Master Poster

8 Years Ago

mq short for media query

I don't know what you've wished, but what you're doing wrong is that you define your media queries based on widths of certain devices and in particular the widths of some iDevices.

I'd recommend to be device-agnostic by using media queries based on the width of the browser window/viewport (ex. @media screen and (min-width: 50em)) instead of the widths of devices (ex. @media screen and (device-width: 768px).
With this approach it doesn't matter on which device your webapp gets viewed and if done right it will always looks good and optimized within every viewport width.

Edited 8 Years Ago by gentlemedia

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

SimonIoa 77 Master Poster · Answer 1 · 2016-02-21T08:39:27+00:00

SimonIoa 77 Master Poster

8 Years Ago

i quess i haven't made myself clear

SimonIoa 77 Master Poster · Answer 2 · 2016-02-21T17:22:36+00:00

Thanks @gentlemedia. What do you mean by mq? I understand what you said. But what i am doing wrong? Shouldn;t the website appeared as wished on my smartphone?

SimonIoa 77 Master Poster · Answer 3 · 2016-02-22T12:45:48+00:00

Ok thanks a lot @gentlemedia one last thing. In one comment you say / Retina-specific stuff here / what do you mean? I need to do something other than the css code that i want to play in a specific retina screen?

gentlemedia 803 Master Poster · Answer 4 · 2016-02-22T15:17:52+00:00

You would use them mostly if you want to serve high resolution (background) photos to devices with displays that can make use of them.

@media (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {

    /* retina 2x - thus serve images twice the size as the originals */

}

SimonIoa 77 Master Poster · Answer 5 · 2016-03-17T12:38:37+00:00

One last thing gentlemedia. I am using this css code and in my 1024 x 768 screen it shows as it should be but when i resize the window it doesn't go to /* = 300px till 800px */ code as i wish. Do you see any problem in the code?

.logoMenuMobile
{
    display:none;
}
.logoDownMenu
{
    display:none;
}
.believeReviewMobile
{
    display:none;
}

@media screen and (device-width: 18.75em) and (max-width: 50em) { /* = 300px till 800px */
    .RightPanel { display:none } 
    .UpdateBox { display:none } 
    .leftBlock { display:none } 
    .logoDownMenu { display:block; } 
    .logoMenuMobile { 
        display:inline-block; 
    }
    .believeReviewMobile
    {
        display:inline-block;
        width:100%;
    }
    .believe_message
    {
        display:none;
    }
    believed_message
    {
        display:none
    }

}

gentlemedia 803 Master Poster · Answer 6 · 2016-03-17T14:14:49+00:00

Why do you still use device-width media queries? Just forget them. You don't need them, unless you're developing something for specific devices and their screen resolutions.
Styles in device-width media queries don't get triggered by resizing the browser window/viewport either, so that's why you don't see anything happening. These styles only get triggered if the width of the screen resolution of a device is exactly 800px.

So only use (viewport) width media queries and if you want to create mobile first RWD sites then you use min-width an if you want/need to create desktop first RWD websites, you use max-width media queries. The latter was used in the begiining of RWD more often , because of old IE that didn't support media queries. Nowadays the mobile first route is considered the way to go.

Here's some good info that explains the difference between width and device-width media queries:
http://www.sitepoint.com/media-queries-width-vs-device-width/

And here's one when to chooe between min-width and max-width:
http://petegale.com/blog/css-media-queries-min-width-vs-max-width/