Media query is not working to display page on other device screens properly

Question

I went through all questions related to this title and applied many of the suggested solutions.The most informative ones were link1 link2 link3. None of them worked. When I resize my browser I can not see the outer elements. I just want to be able to display my website on other devices screen properly. For example, when I halve the width of the browser screen, I can not see the other half of the website.

Here is my code pieces:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

    #homepage {
            position: absolute;
            width: 100%;
            max-width: 1920px;
            height: 4770px;
            background-color: rgba(255,255,255,1);
            overflow: hidden;
            --web-view-name: Ging Games- Home;
            --web-view-id: homepage;
            --web-scale-on-resize: true;
            --web-enable-deep-linking: true;
            
        }
        @media screen and (max-width: 780px) {
      .homepage{
        width: 100%;
        position: absolute;
        height: 4770px;
        background-color: rgba(255,255,255,1);
        overflow: hidden;
        --web-view-name: Games- Home;
        --web-view-id: homepage;
        --web-scale-on-resize: true;
        --web-enable-deep-linking: true;
      }
    }
    
    @media screen and (max-width: 375px) {
      .homepage {
        width: 100%;
        position: absolute;
        height: 4770px;
        background-color: rgba(255,255,255,1);
        overflow: hidden;
        --web-view-name: Games- Home;
        --web-view-id: homepage;
        --web-scale-on-resize: true;
        --web-enable-deep-linking: true;
      }
    }
    
    @media screen and (max-width: 320px) {
      .homepage {
        width: 100%;
        position: absolute;
        height: 4770px;
        background-color: rgba(255,255,255,1);
        overflow: hidden;
        --web-view-name: Games- Home;
        --web-view-id: homepage;
        --web-scale-on-resize: true;
        --web-enable-deep-linking: true;
      }
    }

    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <script type="text/javascript" src="css3-mediaqueries.js"></script>

From other StackOverflow solutions-suggestions I have already applied:

I used content="width=device-width at meta
Media query order suggested starting bigger to a smaller size
I used max-width, not the max-width-device as suggested
Original homepage class is above the media query
Gave reference to bootstrap
My media query syntax is correct (many of the posts answers were related to space issues and not putting brackets or pixels etc.)

Additional information: I use this website to host my website.

You said "I can not see the **outer elements**." What is it?? — r1ddler, Apr 10 '21 at 21:51
what part is not working? I am very confused also you should add the other half of your code so it can be tested — ParkerAucoin, Apr 10 '21 at 21:52
@ParkerAucoin the whole code is too long (9690 loc). I only added the relevant parts. — B B, Apr 10 '21 at 22:01
Ok, do you have content inside the #homepage block?? Maybe problem in their css... — r1ddler, Apr 10 '21 at 22:04
@ch1puha when I resize I expect to see the whole homepage in smaller screen size. However, all I can see is some portion of it on a smaller screen. I can not navigate to right to see the rest of the homepage. It looks like a screenshot of the top-left corner for instance. — B B, Apr 10 '21 at 22:05
@ch1puha yes I have elements(buttons, images, animations, texts) on the homepage. But I can not resize the whole elements one by one. The parent class is the homepage. I do my resizing in it. — B B, Apr 10 '21 at 22:07
@ch1puha the other elements are defined inside other classes, not inside the homepage block. — B B, Apr 10 '21 at 22:08
Do the #homepage has a parent container?? If yes, has it static `width`?? — r1ddler, Apr 10 '21 at 22:12
780px max-width is enough for phones and tablets but not for desktops — hans-könig, Apr 10 '21 at 22:18
@hans-könig I test from here https://bluetree.ai/screenfly/ and none of the devices works. It looks like a zoomed screenshot inside a small screen. — B B, Apr 10 '21 at 22:30
Not really a surprise because the max-width for phones is 480px — hans-könig, Apr 10 '21 at 22:36
@BB @media doesn't work, because you set `top` and `left` for blocks inside #homepage. More precisely, @media is working but elements has a specific `top` and `left` and they wouldn't change position — r1ddler, Apr 11 '21 at 08:11
@ch1puha I am still trying to figure out, the thing is, aside from changing size, I tried to change an element colour with media query, nothing has changed. So, I believe media query is not recognized at all. — B B, Apr 18 '21 at 14:02
@ch1puha https://codeshare.io/5NDWA1 I shared the whole code via this link. Can you see it? — B B, Apr 18 '21 at 15:22
@ch1puha On top of what I tried above, I also have learned and tried to set the homepage position to "absolute" where the media position is "relative" according to a StackOverflow post. But it didn't work either. — B B, Apr 18 '21 at 15:26
@ch1puha I tried with less than 768px to see if that works. You can also search "768px" to find it. — B B, Apr 18 '21 at 15:38
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/231284/discussion-between-b-b-and-ch1puha). — B B, Apr 18 '21 at 16:35

hans-könig · Answer 1 · 2021-04-10T23:18:44.213

0

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <style>
 #homepage {
    position: absolute;
    width: 100%;
    max-width: 1920px;
    background-color: rgba(255,255,255,1);   
    }

 /* Ex. Large desktop */
 @media (min-width: 1280px){

   .homepage{
    width: 100%;
    position: absolute;
    background-color: rgba(255,255,255,1);
    }

 }

 /* Large desktop */
 @media (min-width: 980px) and (max-width: 1280px){

    .homepage{
    width: 100%;
    position: absolute;
    background-color: rgba(255,255,255,1);
    }

 }  

 /* Portrait tablet to landscape and desktop */
 @media (min-width: 768px) and (max-width: 979px) {

    .homepage{
    width: 100%;
    position: absolute;
    background-color: rgba(255,255,255,1);
    }

 }

 /* Landscape phone to portrait tablet */
 @media (max-width: 767px) {

    .homepage{
    width: 100%;
    position: absolute;
    background-color: rgba(255,255,255,1);
    }

 }

 /* Landscape phones and down */
 @media (max-width: 480px) {

    .homepage{
    width: 100%;
    position: absolute;
    background-color: rgba(255,255,255,1);
   }

 }  
 </style>

 <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
 <script type="text/javascript" src="css3-mediaqueries.js"></script>

Remember that for max-width 480px and 767px if you have a navbar class declare display = block(i.e. display:block; ) while the others should be none(i.e. display:none;)

edited Apr 10 '21 at 23:18

answered Apr 10 '21 at 22:51

hans-könig

553
8
10

I have just visited that link and the width is fine because there is no horizontal bar. This code is a skeleton. You can put more code in there to fit your circumstance. That's now a home work for you – hans-könig Apr 10 '21 at 23:10
'This code is a skeleton' this solution is already similar to mine, nothing is changed. Can you please elaborate on when and why to use 'display: none', I didn't get the idea? – B B Apr 10 '21 at 23:22
1

If you provide us with more code you will get a precise solution – hans-könig Apr 10 '21 at 23:25
'This solution is already similar to mine' - then you have to reframe your question – hans-könig Apr 10 '21 at 23:29
As I already stated I can not put the whole code since it is 9690 loc. – B B Apr 10 '21 at 23:31
I found a way to share my code, here you can see https://codeshare.io/5NDWA1 – B B Apr 18 '21 at 16:04
1

Sorry that you placed all the codes in there. Normally just the relevant code is enough. I think the problem is that your other CSS stylings are not elastic. e.g. #Main_BackG(width: 1920px;). Using percentages will be better as that will fit too on mobile devices. No mobile phone will be happy when you say #Careers be at left: 960px; . I would prefer not to say top: 3655px; . In fact not declaring the top will ensure that the height is determined by size of content. So, just take some time and rewrite the styling replacing the width px with %s – hans-könig Apr 18 '21 at 17:41

Media query is not working to display page on other device screens properly

1 Answers1