-1

For all pages on my site except for the Mods page, the overall look is the same when viewing on a mobile device. However, when I go to the Mods page, the navigation bar and all of the body text is suddenly much larger in size. Again, it only looks weird on a mobile device. I'm thinking it may have to do with my media queries. How can I fix this?

P.S. Sorry for the sloppy code.

This is a normal page:

.nav-text {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #59AC3C;
    border-top-style: solid;
    border-left-style: solid;
    border-width: 3px;
}

.option {
    float: left;
}

.option a {
    display: block;
    color: black;
    text-align: center;
    font-weight: lighter;
    font-family: "Georgia";
    font-size: 20px;
    padding: 14px 16px;
    text-decoration: none;
    border-right: 3px solid black;
}

.option a:hover {
    background-color: #469B43;
}

#logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 1500px;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

.mod-title, #title, #sponsor-title {
    text-align: center;
}

#intro {
    font-size: 20px;
}

#wallpaper {
    height: auto;
    width: 1500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;

}

#farmsim {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

#discord {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

#modhub {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

#myInput {
    width: 170px;
}

#myPay {
    width: 280px;
}

.content {
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

.button {
    background-color: #4DAED1;
    border: none;
    color: black;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: black;
}

.btn-contain {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#donate {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#col {
    color: blue;
    font-weight: bold;
}

.download {
    background-color: #4da6ff;
    border: none;
    color: black;
    padding: 4px 7px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14.5px;
    font-weight: bold;
}

.download:hover {
    background-color: #1a8cff;
    color: black;
}

#mod-status {
    font-size: 25px;
    color: blue;
    border-style: dashed;
    border-color: green;
    border-width: 5px;
    padding: 7px 3px;
}

span {
    color: red;
}

#table {
    width: 900px;
    display: table;
    border-style: dashed;
    border-color: green;
    border-width: 4px;
}

.border {
    border-bottom-style: solid;
}

.main {
    font-family: "Helvetica";
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 10px;
    margin-left: 250px;
    margin-right: 250px;
    border-style: solid;
    border-radius: 20px;
}

@media only screen 
   and (max-width : 1447px) and (min-width : 1248px) {
       .main {
            margin-left: 150px;
            margin-right: 150px;
       }
    } 
    
@media only screen 
   and (max-width : 1447px) and (min-width : 1248px) {
       .main {
            margin-left: 150px;
            margin-right: 150px;
       }
    } 
       
@media only screen 
   and (max-width : 1248px) and (min-width : 1126px) {
       .main {
            margin-left: 90px;
            margin-right: 90px;
       }
}

@media only screen 
   and (max-width : 1126px) and (min-width : 940px) {
       .main {
            margin-left: 50px;
            margin-right: 50px;
       }
}

@media only screen 
   and (max-width : 940px) {
       .main {
            margin-left: 7px;
            margin-right: 7px;
       }
} 

@media only screen 
   and (max-width : 1045px) and (min-width: 760px) {
       #table {
            width: 700px;
       }
}

@media only screen 
   and (max-width : 760px) and (min-width : 550px) {
       #table {
            width: 450px;
       }
}

@media only screen 
   and (max-width : 550px) {
       .negate {
            display: none;
       }
       
       #table {
           width: 300px;
       }
}
<!DOCTYPE html>
<html>
    <head>
        <title>Ommitted</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <a href="index.html"><img id="logo" src="logo.png"></a>
        <div class="nav-bar">
        <ul class="nav-text">
        <li class="option border"><a href="index.html">Home</a></li>
        <li class="option border"><a href="join.html">Join Discord Server</a></li>
        <li class="option border"><a href="rules.html">Server Rules</a></li>
        <li class="option border"><a href="mods.html">Mods</a></li>
        <li class="option border"><a href="admin-gateway.html">Admin Access</a></li>
        <li class="option border"><a href="apply.html">Apply for Admin</a></li>
        <li class="option border"><a href="donate.html">Donate</a></li>
        <li class="option border"><a href="complaint.html">File a Complaint</a></li>
        <li class="option border"><a href="about.html">About</a></li>
        <li class="option border"><a href="contact.html">Contact Us</a></li>
        </ul>
        </div>
        <div class="main">
            <h1 id="title">ommitted</h1>
            <p id="intro">ommitted</p>
            <div class="btn-contain"><a href="join.html"><button class="button">Join Discord Server</button></a></div>
            <br>
            <img id="wallpaper" src="wallpaper.jpg">
            <h2 id="sponsor-title">Click the following for sites we use.</h2>
            
            <br>
            <p>ommitted</p>
        </div>
    </body>
</html>

This is the weird page:

.nav-text {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #59AC3C;
    border-top-style: solid;
    border-left-style: solid;
    border-width: 3px;
}

.option {
    float: left;
}

.option a {
    display: block;
    color: black;
    text-align: center;
    font-weight: lighter;
    font-family: "Georgia";
    font-size: 20px;
    padding: 14px 16px;
    text-decoration: none;
    border-right: 3px solid black;
}

.option a:hover {
    background-color: #469B43;
}

#logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 1500px;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

.mod-title, #title, #sponsor-title {
    text-align: center;
}

#intro {
    font-size: 20px;
}

#wallpaper {
    height: auto;
    width: 1500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;

}

#farmsim {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

#discord {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

#modhub {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

#myInput {
    width: 170px;
}

#myPay {
    width: 280px;
}

.content {
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

.button {
    background-color: #4DAED1;
    border: none;
    color: black;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: black;
}

.btn-contain {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#donate {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#col {
    color: blue;
    font-weight: bold;
}

.download {
    background-color: #4da6ff;
    border: none;
    color: black;
    padding: 4px 7px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14.5px;
    font-weight: bold;
}

.download:hover {
    background-color: #1a8cff;
    color: black;
}

#mod-status {
    font-size: 25px;
    color: blue;
    border-style: dashed;
    border-color: green;
    border-width: 5px;
    padding: 7px 3px;
}

span {
    color: red;
}

#table {
    width: 900px;
    display: table;
    border-style: dashed;
    border-color: green;
    border-width: 4px;
}

.border {
    border-bottom-style: solid;
}

.main {
    font-family: "Helvetica";
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 10px;
    margin-left: 250px;
    margin-right: 250px;
    border-style: solid;
    border-radius: 20px;
}

@media only screen 
   and (max-width : 1447px) and (min-width : 1248px) {
       .main {
            margin-left: 150px;
            margin-right: 150px;
       }
    } 
    
@media only screen 
   and (max-width : 1447px) and (min-width : 1248px) {
       .main {
            margin-left: 150px;
            margin-right: 150px;
       }
    } 
       
@media only screen 
   and (max-width : 1248px) and (min-width : 1126px) {
       .main {
            margin-left: 90px;
            margin-right: 90px;
       }
}

@media only screen 
   and (max-width : 1126px) and (min-width : 940px) {
       .main {
            margin-left: 50px;
            margin-right: 50px;
       }
}

@media only screen 
   and (max-width : 940px) {
       .main {
            margin-left: 7px;
            margin-right: 7px;
       }
} 

@media only screen 
   and (max-width : 1045px) and (min-width: 760px) {
       #table {
            width: 700px;
       }
}

@media only screen 
   and (max-width : 760px) and (min-width : 550px) {
       #table {
            width: 450px;
       }
}

@media only screen 
   and (max-width : 550px) {
       .negate {
            display: none;
       }
       
       #table {
           width: 300px;
       }
}
<!DOCTYPE html>
<html>
    <head>
        <title>Ommitted</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <a href="index.html"><img id="logo" src="logo.png"></a>
        <div class="nav-bar">
        <ul class="nav-text">
        <li class="option border"><a href="index.html">Home</a></li>
        <li class="option border"><a href="join.html">Join Discord Server</a></li>
        <li class="option border"><a href="rules.html">Server Rules</a></li>
        <li class="option border"><a href="mods.html">Mods</a></li>
        <li class="option border"><a href="admin-gateway.html">Admin Access</a></li>
        <li class="option border"><a href="apply.html">Apply for Admin</a></li>
        <li class="option border"><a href="donate.html">Donate</a></li>
        <li class="option border"><a href="complaint.html">File a Complaint</a></li>
        <li class="option border"><a href="about.html">About</a></li>
        <li class="option border"><a href="contact.html">Contact Us</a></li>
        </ul>
        </div>
        <div class="main">
            <h1 id="title">ommitted</h1>
            <p id="intro">Depending on traffic and member availability, we sometimes run the server with mods. The current mod status can be found below. If the server is running in mod-mode, all mods required to play are listed under the Mod Directory. Instructions on installation can also be found below. </p><br>
            <h1 id="mod-status">Server Mod-Mode Status: <span>ON</span> (some or all mods enabled)</h1><br>
            <h2 class="mod-title">Mod Directory</h2>
            <p id="intro" style="text-align:center">To view the mod's file size or to download the mod, access this site using a computer.</p>
            <div class="dir">
            <table id="table" style="margin-left:auto;margin-right:auto">
                <tr><th valign="top"><img src="/icons/blank.gif" alt="[ICO]"></th><th>Mod Name</th><th>Currently Enabled</th><th class="negate">Download</th><th class="negate">Size</th><th class="negate">Description</th></tr>
                <tr><th colspan="9"><hr></th></tr>
            <!-- Mod entry start -->
            
                <tr><td valign="top"><img src="/icons/layout.gif" alt="[TXT]"></td><td style="color:blue">Bale Storage</td><td align="center">Yes</td><td align="center" class="negate"><a href="mods/FS17_BaleStorage_placeable.zip"><button class="download">Download</button></a></td><td align="right" class="negate">8.72 MB</td><td align="center" class="negate">-</td></tr>
                
                <tr><td valign="top"><img src="/icons/layout.gif" alt="[TXT]"></td><td style="color:blue">Follow Me</td><td align="center">No</td><td align="center" class="negate"><a href="mods/FS17_DCK_FollowMe.zip" download><button class="download ">Download</button></a></td><td align="right" class="negate">48 KB</td><td align="center" class="negate">-</td></tr>
                
                <tr><td valign="top"><img src="/icons/layout.gif" alt="[TXT]"></td><td style="color:blue">Pleasant Valley 17</td><td align="center">No</td><td align="center"><a href="http://www.mediafire.com/file/4sppp6sex8rpfzw/PV17_V3.zip" download><button class="download negate">Download</button></a></td><td align="right" class="negate">1.5 GB</td><td align="center" class="negate">-</td></tr>
                
                <tr><td valign="top"><img src="/icons/layout.gif" alt="[TXT]"></td><td style="color:blue">Seasons</td><td align="center">No</td><td align="center" class="negate"><a href="http://download940.mediafire.com/4ufibwb79iug/7b7fhdd77x2vmmo/FS17_RM_Seasons.zip" download><button class="download">Download</button></a></td><td align="right" class="negate">16.55 MB</td><td align="center" class="negate">-</td></tr>
                
                <tr><td valign="top"><img src="/icons/layout.gif" alt="[TXT]"></td><td style="color:blue">Stappenbach 17</td><td align="center">No</td><td align="center" class="negate"><a href="http://download1080.mediafire.com/qdfw3ozosgeg/v515ttpa4tbsjp7/FS17_Stappenbach17.zip" download><button class="download">Download</button></a></td><td align="right" class="negate">736.12 MB</td><td align="center" class="negate">-</td></tr>
                
                <tr><td valign="top"><img src="/icons/layout.gif" alt="[TXT]"></td><td style="color:blue">VehicleWaterBreak</td><td align="center">No</td><td align="center" class="negate"><a href="mods/FS17_VehicleWaterBreak.zip" download><button class="download">Download</button></a></td><td align="right" class="negate">14 KB</td><td align="center" class="negate">-</td></tr>
                
            <!-- Mod entry end -->
                <tr><th colspan="9"><hr></th></tr>
            </table></div><br>
            <h2>Windows Installation Instructions</h2>
            <ol>
                <li>ommitted</li>
            <ol>
                <li>ommitted</li>
            </ol><br>
            
            <br>
            <p>ommitted</p>
        </div>
    </body>
</html>

1
  • The weird page has the <meta name="viewport" content="width=device-width, initial-scale=1.0"> meta tag. I'd bet thats the problem.
    – lupz
    May 4, 2018 at 10:50

1 Answer 1

0

This is in the <head> of "mods" but not any other page.

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

You should include this on every page for faster/fluid mobile development.

Read about it here https://www.w3schools.com/css/css_rwd_viewport.asp

1
  • Ah, that makes sense! Thank you so much :) May 4, 2018 at 17:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.