Highlighted

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

Explorer ,
Apr 18, 2019

Copy link to clipboard

Copied

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;

}

TOPICS
Create menus in Dreamweaver, Learn Dreamweaver

Views

760

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
Apr 18, 2019

Copy link to clipboard

Copied

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;

}

TOPICS
Create menus in Dreamweaver, Learn Dreamweaver

Views

761

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 18, 2019 0
Adobe Community Professional ,
Apr 18, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 18, 2019 0
Explorer ,
Apr 18, 2019

Copy link to clipboard

Copied

Alright, I'll work on the test page in a little bit.

The mobile version should create a navigation layout like this...

Home Page

About

Information

More Information

Contact Us

Forums

The Desktop version should create a navigation layout like this...

Home Page About Information More Information Contact Us                                                Forums

The desktop works fine. It's the only thing that works. Mobile was also working last week, but I visit my website today, and then nothing happens when on a lower resolution. I have no explanation for that. I have not touched it since then.

Even if I set every display in that .css file to "none" on the desktop's ssi-called .shtml, it still displays it somehow.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 18, 2019 0
Adobe Community Professional ,
Apr 18, 2019

Copy link to clipboard

Copied

You should learn about responsive web design.  Nobody builds separate sites for mobile and tablet and desktop these days.   It's way too much work and too much trouble to maintain.  What you want is one site that fits all devices.

Start with the responsive Starter Templates in DW CC.

Click on File > New > Starter templates.  Choose one and hit the Create button.   See screenshot.

CC-StarterPage.jpg

Save and name your newly created responsive page.  Preview  & resize the page in your browser.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 18, 2019 2
Explorer ,
Apr 18, 2019

Copy link to clipboard

Copied

I think that's more or less what I'm trying to accomplish with that css I posted. It must be worse than I thought if it doesn't even come across like that, lol.

It would be too late to start over, unfortunately. I have over 5000 pages created for this website already.

Is there anything I could do to get this min-width/max-width to work correctly? The issue is that I don't even understand the problem. It worked fine a week before.

Here's my updated .css from the last hour. Same exact results, and my server is updated with the file, too.

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 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;

}


/////////////////////////////////////////////////////////






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


.headermobile {
display: inline-block;
}

 
.headerdesktop {
display: none;
}
 


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


.headermobile {
display: none;
}

 
 
.headerdesktop {
display: inline-block;
}
   
   
   
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 18, 2019 0
LIZZIE LATEST
Explorer ,
Apr 19, 2019

Copy link to clipboard

Copied

I figured it out!

The problem doesn't appear on my phone, just on my desktop browsers. Google chrome almost always adapts as if it were a phone when I shrink the browser, but that didn't happen this time, even though last week it was working fine.

On my phone, I had a lot of css that needed to be worked on, but it started to work out eventually. Now I'm running into a different problem, but this specific problem has already been resolved. Thank you for the help.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 19, 2019 0
Explorer ,
Apr 18, 2019

Copy link to clipboard

Copied

I'll just link you to the website itself for right now. After the problem is resolved, I can delete the link, right?

I'm working on this website with a friend, but I do have her permission to link you to it directly, so you can troubleshoot for it.

Most of the links don't work. The ones that do are >animewalktrough>soundtracks and the DVD listings ones. Also the home page.

You'll also notice that on IE11, the social media icons are huge, which is an unrelated problem that I am looking into still.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 18, 2019 0