I'm trying to make a different layout for mobile and desktop, but it isn't working right?

Question

I'm using ssi to call different .html documents (that are being parsed as .shtml) for my different layouts. I'm using the tags for min-width and max-width, which I have set to 1000px. Both of them are set to that number.

The point is to only show the ssi-called .shtml file for mobile at only up to a maximum resolution of 1000px, and to show the ssi-called .shtml file for desktop at anything beyond that.

Beyond that, I have a specific style set up for internet explorer, that has it's own settings and does not adapt to mobile devices.

At this point, it is correctly calling the desktop style, but not the mobile one. It doesn't matter the displa size, and I've tested it on every major browser.

I actually have both the mobile and desktop styles set to the following...

.headermobile {

display: inline;

}

.headerdesktop {

display: none;

}

…and it still only calls the desktop one for some reason?

I would appreciate any help and if someone could point me in the right direction? I'm also aware that the .css file is terrible.

I can't find the button to hide this in a box, though. I need a moderator to fix it, please?

this is my css

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
}

li {
float: left;
width: 100%;
text-align: center;
}

li a, .dropbtn {

    display: inline-block;
    color: #9F9F9F;
font-size: 15px;
font-family: 'Josefin Sans';
    text-align: center;
    padding: 7px 8px;
    text-decoration: none;

}

li a:hover, .dropdown:hover .dropbtn {
color: #282828;
background-color: #ffffff;
transition: color 0.7s ease-in-out;
}

li.dropdown {

}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 160px;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
color: #9f9f9f;
padding: 6px 8px;
background: #ffffff;

    text-decoration: none;
    display: block;
    text-align: left;
width: 1000%;
}

.dropdown-content a:hover {
color: #282828;
background-color: transparent;
transition: 0.9s;
}

.dropdown:hover .dropdown-content {
display: block;
}

.paragraphs {
padding-top: 50px;
padding-bottom: 50px;
padding-left: 0px;
padding-right: 0px;
}

.h1 {
font-family: "Josefin Sans";
font-weight: 100;
font-size: 48px;
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 0px;
padding-right: 0px;
}

.h2 {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 32px;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 0px;
padding-right: 0px;
}

.paragraphs {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 20px;
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 0px;
padding-right: 0px;
}

.pictures {
padding-top: 50px;
padding-bottom: 50px;
}

.footer {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 20px;
text-align: left;
padding-top: 150px;
padding-bottom: 50px;
padding-left: 0px;
padding-right: 0px;
}

.header {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 20px;
text-align: center;
padding-top: 0px;
padding-bottom: 12px;
padding-left: 0px;
padding-right: 0px;
}

.social-media {
padding-bottom: 10px;
}

.contents {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 20px;
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 0px;
padding-right: 0px;
}

.episodedescription {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 20px;
text-align: left;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 0px;
padding-right: 0px;
}

img {
width: 100%;
height: auto;
}

.social-media {
padding-top: 25px;
position: fixed;
width: 40px;
}

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #282828; /* Set a background color */
    color: #ffffff; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 7px; /* Some padding */
    border-radius: 0px; /* Rounded corners */
font-size: 16px;
font-family: "Josefin Sans light"
}

#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
transition: 0.5s;
}

/* / / / / / / / / / / / / */

@media screen and (max-width:1000px){

.headermobile {
display: inline;
}

.headerdesktop {
display: none;
}

.social-media {
padding-top: 25px;
position: static;
width: 100%;
}

img {
width: inherit;
height: auto;
}

ul {
list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
}

li {
float: left;
width: inherit;
text-align: left;
}

li a, .dropbtn {
    display: inline-block;
    color: #9F9F9F;
font-size: 25px;
font-family: 'Josefin Sans';
    text-align: center;
    padding: 7px 8px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
color: #282828;
background-color: transparent;
transition: color 0.7s ease-in-out;
}

li.dropdown {
display: inline-block;

}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: transparent;
    min-width: 160px;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
    z-index: 1;
}

.dropdown-content a {
    color: #9f9f9f;
    padding: 6px 8px;
background-color: transparent;
    text-decoration: none;
    display: block;
    text-align: left;
width: 1000%;
}

.dropdown-content a:hover {
color: #282828;
background-color: transparent;
transition: 0.9s;
}

.dropdown:hover .dropdown-content {
display: block;
}

.paragraphs {
padding-top: 100px;
padding-bottom: 100px;
padding-left: 10px;
padding-right: 10px;
}

.h1 {
font-family: "Josefin Sans";
font-weight: 100;
font-size: 48px;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 5px;
padding-right: 5px;
}

.h2 {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 32px;
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 5px;
padding-right: 5px;
}

.paragraphs {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 20px;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 5px;
padding-right: 5px;
}

.pictures {
padding-top: 100px;
padding-bottom: 100px;
}

.footer {
font-family: 'Josefin Sans';
font-weight: 50px;
font-size: 20px;
text-align: left;
padding-top: 300px;
padding-bottom: 150px;
padding-left: 0px;
padding-right: 0px;
}

.header {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 20px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}

.social-media {
padding-bottom: 50px;
}

.contents {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 20px;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 5px;
padding-right: 5px;
}

.episodedescription {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 20px;
text-align: left;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 5px;
padding-right: 5px;
}

}

/* / / / / / / / / / / / / */

@media screen and (min-width:1000px){

.headermobile {
display: inline;
}

.headerdesktop {
display: inline;
}

.social-media {
padding-top: 25px;
position: static;
width: 100%;
}

img {
width: inherit;
height: auto;
}

ul {
list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
}

li {
float: left;
width: inherit;
text-align: left;
}

li a, .dropbtn {
    display: inline-block;
    color: #9F9F9F;
font-size: 25px;
font-family: 'Josefin Sans';
    text-align: center;
    padding: 7px 8px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
color: #282828;
background-color: transparent;
transition: color 0.7s ease-in-out;
}

li.dropdown {
display: inline-block;

}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: transparent;
    min-width: 160px;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
    z-index: 1;
}

.dropdown-content a {
    color: #9f9f9f;
    padding: 6px 8px;
background-color: transparent;
    text-decoration: none;
    display: block;
    text-align: left;
width: 1000%;
}

.dropdown-content a:hover {
color: #282828;
background-color: transparent;
transition: 0.9s;
}

.dropdown:hover .dropdown-content {
display: block;
}

.paragraphs {
padding-top: 100px;
padding-bottom: 100px;
padding-left: 10px;
padding-right: 10px;
}

.h1 {
font-family: "Josefin Sans";
font-weight: 100;
font-size: 48px;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 5px;
padding-right: 5px;
}

.h2 {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 32px;
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 5px;
padding-right: 5px;
}

.paragraphs {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 20px;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 5px;
padding-right: 5px;
}

.pictures {
padding-top: 100px;
padding-bottom: 100px;
}

.footer {
font-family: 'Josefin Sans';
font-weight: 50px;
font-size: 20px;
text-align: left;
padding-top: 300px;
padding-bottom: 150px;
padding-left: 0px;
padding-right: 0px;
}

.header {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 20px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}

.social-media {
padding-bottom: 50px;
}

.contents {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 20px;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 5px;
padding-right: 5px;
}

.episodedescription {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 20px;
text-align: left;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 5px;
padding-right: 5px;
}

}

/* / / / / / / / / / / / / */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

/* IE10+ CSS styles go here */

.headermobile {
display: none;
}

.headerdesktop {
display: inline;
}

.social-media {
padding-top: 25px;
padding-bottom: 50px;
position: static;
width: 100%;

}

img {
width: 1920px;
height: auto;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
}

li {
float: left;
width: inherit;
text-align: left;
}

li a, .dropbtn {
    display: inline-block;
    color: #9F9F9F;
font-size: 25px;
font-family: 'Josefin Sans';
    text-align: center;
    padding: 7px 8px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
color: #282828;
background-color: transparent;
transition: 0.9s
}

li.dropdown {
display: inline-block;

}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: transparent;
    min-width: 160px;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
    z-index: 0;
}

.dropdown-content a {
    color: #9f9f9f;
    padding: 6px 8px;
background-color: transparent;
    text-decoration: none;
    display: block;
    text-align: left;
width: 1000%;
}

.dropdown-content a:hover {
color: #282828;
background-color: transparent;
transition: 0.9s;
}

.dropdown:hover .dropdown-content {
display: block;
}

.paragraphs {
padding-top: 100px;
padding-bottom: 100px;
padding-left: 5px;
padding-right: 5px;
}

.h1 {
font-family: "Josefin Sans";
font-weight: 100;
font-size: 48px;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 5px;
padding-right: 5px;
}

.h2 {
font-family: 'Josefin Sans';
font-weight: 50px;
font-size: 32px;
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 5px;
padding-right: 5px;
}

.paragraphs {
font-family: 'Josefin Sans';
font-weight: 50px;
font-size: 20px;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 5px;
padding-right: 5px;
}

.pictures {

padding-top: 100px;
padding-bottom: 100px;
}

.footer {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 20px;
text-align: left;
padding-top: 300px;
padding-bottom: 100px;
padding-left: 0px;
padding-right: 0px;
}

.header {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 20px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}

.social-media {
padding-bottom: 50px;
}

.contents {
font-family: 'Josefin Sans';
font-weight: 50px;
font-size: 20px;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 5px;
padding-right: 5px;
}

.episodedescription {
font-family: 'Josefin Sans';
font-weight: 100px;
font-size: 20px;
text-align: left;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 5px;
padding-right: 5px;

}

Jon Fritz · Answer

So, what is happening vs what is expected (you forget to mention that in your post)?

It's easiest to troubleshoot your code if you upload a test page to your server and post a link to it here in the forum. Once the problem is found, you can simply delete your test page.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded