Highlighted

A problem with adaptive styles on different mobile devices.

Explorer ,
Apr 19, 2019

Copy link to clipboard

Copied

I have a style sheet that contains the following values...

min-width: 1000px

max-width:1000px

Beneath each one, I've specified code for the resolutions of desktop—being above 1000px—and mobile—being below 1000px—so that they will change the layout.

In my previous topic, chrome stopped scaling adaptively, but on an actual phone, it worked.

The problem now...

On my older LG phone, the website works almost perfectly.

On my somewhat newer Samsung Galaxy S5 there are several problems that are showing up that don't exist on the other phone.

Here is a link to test the website...

Pokémon - English dubbed episode 0001

on the LG, the social media buttons float to the top left with the screen and the navigation menu comes down as a list, like this.

Demonstration number 1

Demonstration number 2

Demonstration number 3

Demonstration number 4

Demonstration number 5

On the S5, they list out like this...

Demonstration number 1 Demonstration number 2 Demonstration number 3 Demonstration number 4 Demonstration number 5

...which is identical to chrome, firefox, and IE11.

Other than that, the text toward the top is extremely tiny on the S5, which, again, is not the case on the LG. I don't know why they would be so different? I don't believe the resolution is significantly different?

The S5 is probably an inch and a half bigger than the LG.

I would like them to have the same effects as the LG on all different mobile devices.

This is my current CSS...

[Excess code removed by moderator. CSS is in the online page so no need to post it twice.]

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

When I'm trying to get something to work, I put it in a plain vanilla page.

This code does exactly what is expected.  Nothing more, nothing less.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Fullscreen Nav Demo</title>

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

<style>

body { font-family: 'Lato', sans-serif; }

.overlay {

height: 0%;

width: 100%;

position: fixed;

z-index: 1;

top: 0;

left: 0;

background-color: rgb(0,0,0);

background-color: rgba(0,0,0, 0.9);

overflow-y: hidden;

transition: 0.5s;

}

.overlay-content {

position: relative;

top: 25%;

width: 100%;

text-align: center;

margin-top: 30px;

}

.overlay a {

padding: 8px;

text-decoration: none;

font-size: 36px;

color: #818181;

display: block;

transition: 0.3s;

}

.overlay a:hover, .overlay a:focus { color: #f1f1f1; }

.overlay .closebtn {

position: absolute;

top: 20px;

right: 45px;

font-size: 60px;

}

@media screen and (max-height: 450px) {

.overlay { overflow-y: auto; }

.overlay a { font-size: 20px }

.overlay .closebtn {

font-size: 40px;

top: 15px;

right: 35px;

}

}

</style>

</head>

<body>

<div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

<div class="overlay-content"> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div>

</div>

<h2>Fullscreen Overlay Nav Example</h2>

<p>Click on the element below to open the fullscreen overlay navigation menu.</p>

<p>In this example, the navigation menu will slide downwards from the top:</p>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

<script>

function openNav() {

  document.getElementById("myNav").style.height = "100%";

}

function closeNav() {

  document.getElementById("myNav").style.height = "0%";

}

</script>

</body>

</html>

TOPICS
Learn Dreamweaver

Views

1.5K

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

A problem with adaptive styles on different mobile devices.

Explorer ,
Apr 19, 2019

Copy link to clipboard

Copied

I have a style sheet that contains the following values...

min-width: 1000px

max-width:1000px

Beneath each one, I've specified code for the resolutions of desktop—being above 1000px—and mobile—being below 1000px—so that they will change the layout.

In my previous topic, chrome stopped scaling adaptively, but on an actual phone, it worked.

The problem now...

On my older LG phone, the website works almost perfectly.

On my somewhat newer Samsung Galaxy S5 there are several problems that are showing up that don't exist on the other phone.

Here is a link to test the website...

Pokémon - English dubbed episode 0001

on the LG, the social media buttons float to the top left with the screen and the navigation menu comes down as a list, like this.

Demonstration number 1

Demonstration number 2

Demonstration number 3

Demonstration number 4

Demonstration number 5

On the S5, they list out like this...

Demonstration number 1 Demonstration number 2 Demonstration number 3 Demonstration number 4 Demonstration number 5

...which is identical to chrome, firefox, and IE11.

Other than that, the text toward the top is extremely tiny on the S5, which, again, is not the case on the LG. I don't know why they would be so different? I don't believe the resolution is significantly different?

The S5 is probably an inch and a half bigger than the LG.

I would like them to have the same effects as the LG on all different mobile devices.

This is my current CSS...

[Excess code removed by moderator. CSS is in the online page so no need to post it twice.]

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

When I'm trying to get something to work, I put it in a plain vanilla page.

This code does exactly what is expected.  Nothing more, nothing less.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Fullscreen Nav Demo</title>

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

<style>

body { font-family: 'Lato', sans-serif; }

.overlay {

height: 0%;

width: 100%;

position: fixed;

z-index: 1;

top: 0;

left: 0;

background-color: rgb(0,0,0);

background-color: rgba(0,0,0, 0.9);

overflow-y: hidden;

transition: 0.5s;

}

.overlay-content {

position: relative;

top: 25%;

width: 100%;

text-align: center;

margin-top: 30px;

}

.overlay a {

padding: 8px;

text-decoration: none;

font-size: 36px;

color: #818181;

display: block;

transition: 0.3s;

}

.overlay a:hover, .overlay a:focus { color: #f1f1f1; }

.overlay .closebtn {

position: absolute;

top: 20px;

right: 45px;

font-size: 60px;

}

@media screen and (max-height: 450px) {

.overlay { overflow-y: auto; }

.overlay a { font-size: 20px }

.overlay .closebtn {

font-size: 40px;

top: 15px;

right: 35px;

}

}

</style>

</head>

<body>

<div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

<div class="overlay-content"> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div>

</div>

<h2>Fullscreen Overlay Nav Example</h2>

<p>Click on the element below to open the fullscreen overlay navigation menu.</p>

<p>In this example, the navigation menu will slide downwards from the top:</p>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

<script>

function openNav() {

  document.getElementById("myNav").style.height = "100%";

}

function closeNav() {

  document.getElementById("myNav").style.height = "0%";

}

</script>

</body>

</html>

TOPICS
Learn Dreamweaver

Views

1.5K

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 19, 2019 0
Adobe Community Professional ,
Apr 19, 2019

Copy link to clipboard

Copied

When you post a link to your online page, you do not need to also post your code.  We can see all the code from your online page.

I'm seeing a number of beginner mistakes starting with poorly organized  RWD code and no viewport meta tag.

Starting on lines 1 - 54,. replace what you have now with this code.   By the way, embedded CSS code is for page specific styles only.  Sitewide styles really do belong in the external CSS file.  And one more thing, in CSS & HTML, paragraph is not a valid selector name.  Use the p instead.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Pokémon - English dubbed episode 0001</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:100,300" rel="stylesheet">

<link href="css/leeightontalksaboutpokemon.css" rel="stylesheet" type="text/css">

<style>

a { text-decoration: none }

a:link { color: #9F9F9F; }

a:visited { color: #9F9F9F; }

a:hover, a:active, a:focus {

color: #282828;

transition: color 0.7s ease-in-out;

}

h1 {

font-family: 'Josefin Sans', sans-serif;

font-weight: 100;

}

h2 {

font-family: 'Josefin Sans', sans-serif;

font-weight: 300;

}

p {

font-family: 'Josefin Sans', sans-serif;

font-weight: 300;

}

<style>

</head>

LIZZIE  wrote

I have a style sheet that contains the following values...

min-width: 1000px

max-width:1000px

Why?   When you express min-width: 1000px along with max-width: 1000px it is the exact same thing as width:1000px.  Why  over complicate things?

Also these social media icons are a usability problem for me.  They interfere with content on the page.

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 19, 2019 0
Adobe Community Professional ,
Apr 19, 2019

Copy link to clipboard

Copied

I''m also seeing a lot of careless code errors in your markup.  It's important to work with error free code especially with mobile browsers.

The W3C Markup Validation Service

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 19, 2019 1
Adobe Community Professional ,
Apr 19, 2019

Copy link to clipboard

Copied

And  here is a link to the CSS validation service.  You've got problems there as well.

The W3C CSS Validation Service

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 19, 2019 0
Explorer ,
Apr 19, 2019

Copy link to clipboard

Copied

The social media icons aren't like that on my devices at all. That's precisely what I'm talking about. What browser or phone did you take that screenshot on? Where did that show up?

I'm quite aware the css is horrible. Funny enough, it completely works on some devices. I further inspected this, and firefox opens it just about the way it should. The only problem is the navigation menu on firefox.

It seems that the Samsung brand uses an internet browser based on the chromium browser. That would be the same thing that chrome is based on, so that explains the problems conveniently matching up in the same way. I just need to figure out how to fix it.

Now the min-width/max-width thing is probably all messed up. Could someone explain to me what I should actually be doing here?

I'm trying to get mobile devices to call a navigation menu I designed specifically for mobile. That would be the...

.headerandnavigation

For deskop...

.headerandnavigationdesktop

I need to hide one, and show the other one depending on the device or the resolution of the device. This seems to be the problem for the most part.

As a note, I know I must have made it worse since then, but a lot of the code was put together by people from this support forum.

EDIT:

I just followed the link and tried it through. The font-weight thing is the most of the problem. I don't think it's affecting anything, though, because the HTML itself is (from what I see on my end) overriding that anyway. It was really funny, though.

EDIT 2:

Fixed the float error and it actually messed it up worse. Also the social media icons should not be blocking the text there, because the navigation menu should be in a list form in the center. Hm...

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
Adobe Community Professional ,
Apr 19, 2019

Copy link to clipboard

Copied

I use the latest Firefox, Chrome and MS Edge to test on desktops.  I also use zoom to see how well the layout holds up in various situations. You never what settings your end user's have.

Double markup for navigation is twice the code & twice the page load for ALL devices.  The prevailing trend in RWD  is one menu.   With a little CSS magic, you can change the menu's appearance on wide screens from collapsed & vertically stacked to horizontal.   See this link for an example and tutorial..

A CSS-only Touch-friendly Navigation Menu - W3Bits

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 19, 2019 2
Explorer ,
Apr 20, 2019

Copy link to clipboard

Copied

I'm going to check the link and post again tomorrow.

Thank you for always being so helpful Nancy. You're, like, the number one resource for dreamweaver help, honestly.

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 20, 2019 1
Explorer ,
Apr 21, 2019

Copy link to clipboard

Copied

I'm still working on the content in the link and trying to figure it out. I'll probably wind up using it.

Does anyone have a link to somewhere that will show me how I could make a navigation menu that works just like this one...

25 - Pikachu

It's from a Weebly template, but I see it used on a lot of websites. When you zoom in and on mobile it shrinks out to the hamburger icon.

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 21, 2019 0
Adobe Community Professional ,
Apr 21, 2019

Copy link to clipboard

Copied

Have a look at How To Create a Responsive Top Navigation Menu

If you use Bootstrap, then have a look at Bootstrap 4 Navigation Bar


Ben

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 21, 2019 1
Explorer ,
Apr 23, 2019

Copy link to clipboard

Copied

I think I'm almost to the point of creating what I want to creat on my website's navigation menu, but I've hit another dead end for some reason...

I'm following this tutorial...

How To Create a Full screen Overlay Navigation

...but, for some reason, it just displays the text "menu" to the far left in times new roman (so, it isn't even being styled correctly) and clicking on it does nothing.

I copied the html into an shtml file that i'm calling by using ssi.

I copied the css and tried putting it under my mobile screen media query and then at the very bottom of the CSS file that is attached to every page on my website.

I copied the Java script into my Java script file where I also have my return to top button, that is being called into the same shtml file that is also being called into the main pages of my website.

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 23, 2019 0
Adobe Community Professional ,
Apr 23, 2019

Copy link to clipboard

Copied

Is your source code free of errors?   What's the URL to your test page?

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 23, 2019 0
Explorer ,
Apr 23, 2019

Copy link to clipboard

Copied

Probably not free of errors as far as the html goes. The css has since been corrected with no errors. Everything is copied directly from W3Schools

Pokémon - English dubbed episode 0001

On a mobile device or shrunken browser window, you will see the navigation menu.

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 23, 2019 0
Adobe Community Professional ,
Apr 23, 2019

Copy link to clipboard

Copied

It's hard if not impossible to troubleshoot when you have code errors that need attention.  So work on those first.  

Duplicate IDs and spaces in filenames are not allowed.   Also, I prefer to put JavaScript near the bottom of my pages, just above the closing </body> tag.

Showing results for http://leeightontalksaboutpokemon.net/english-episode-0001.html - Nu Html Checke...

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 23, 2019 0
Explorer ,
Apr 23, 2019

Copy link to clipboard

Copied

I can't post what I worked on in dreamweaver a moment ago, because it's not uploaded online, but I started an entire website from scratch, and the result was exactly the same as what I'm getting now. I'm 99% sure that the html errors aren't directly responsible for whatever this is. I'm noticing that on the W3 article, in the CSS section, there actually doesn't seem to be anything there to style that "Menu" text, and the html for the "Menu" text isn't wrapped in a div and has no style class. That could explain the lack of style attributes there, right?

It still wouldn't explain the reason that the button isn't working, though.

EDIT: What do you mean by "duplicate ID?" Where is that on my page?

I don't have anything with spaces in the file names, though. I always use hyphens. The only thing is the header image, but I have that there broken on purpose. It shouldn't affect anything else, though.

EDIT 2:

Oh, this?

<header class="header" id="header">

</header>

It repeats because they're both coming in through ssi. The first one is in headerandnavigation.shtml and the second one is in headerandnavigationdesktop.shtml

They don't ever appear on the page together, because the first is called through a mobile display media query and the second is for desktops.

Should I get rid of them anyway?

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 23, 2019 0
Adobe Community Professional ,
Apr 23, 2019

Copy link to clipboard

Copied

When I'm trying to get something to work, I put it in a plain vanilla page.

This code does exactly what is expected.  Nothing more, nothing less.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Fullscreen Nav Demo</title>

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

<style>

body { font-family: 'Lato', sans-serif; }

.overlay {

height: 0%;

width: 100%;

position: fixed;

z-index: 1;

top: 0;

left: 0;

background-color: rgb(0,0,0);

background-color: rgba(0,0,0, 0.9);

overflow-y: hidden;

transition: 0.5s;

}

.overlay-content {

position: relative;

top: 25%;

width: 100%;

text-align: center;

margin-top: 30px;

}

.overlay a {

padding: 8px;

text-decoration: none;

font-size: 36px;

color: #818181;

display: block;

transition: 0.3s;

}

.overlay a:hover, .overlay a:focus { color: #f1f1f1; }

.overlay .closebtn {

position: absolute;

top: 20px;

right: 45px;

font-size: 60px;

}

@media screen and (max-height: 450px) {

.overlay { overflow-y: auto; }

.overlay a { font-size: 20px }

.overlay .closebtn {

font-size: 40px;

top: 15px;

right: 35px;

}

}

</style>

</head>

<body>

<div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

<div class="overlay-content"> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div>

</div>

<h2>Fullscreen Overlay Nav Example</h2>

<p>Click on the element below to open the fullscreen overlay navigation menu.</p>

<p>In this example, the navigation menu will slide downwards from the top:</p>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

<script>

function openNav() {

  document.getElementById("myNav").style.height = "100%";

}

function closeNav() {

  document.getElementById("myNav").style.height = "0%";

}

</script>

</body>

</html>

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 23, 2019 2
Explorer ,
Apr 23, 2019

Copy link to clipboard

Copied

"I was in the middle of editing my post when you last replied, but this was the complete post."

I can't post what I worked on in dreamweaver a moment ago, because it's not uploaded online, but I started an entire website from scratch, and the result was exactly the same as what I'm getting now. I'm 99% sure that the html errors aren't directly responsible for whatever this is. I'm noticing that on the W3 article, in the CSS section, there actually doesn't seem to be anything there to style that "Menu" text, and the html for the "Menu" text isn't wrapped in a div and has no style class. That could explain the lack of style attributes there, right?

It still wouldn't explain the reason that the button isn't working, though.

EDIT:

What do you mean by "duplicate ID?" Where is that on my page?

I don't have anything with spaces in the file names, though. I always use hyphens. The only thing is the header image, but I have that there broken on purpose. It shouldn't affect anything else, though.

EDIT 2:

Oh, this?

<header class="header" id="header">

</header>

It repeats because they're both coming in through ssi. The first one is in headerandnavigation.shtml and the second one is in headerandnavigationdesktop.shtml

They don't ever appear on the page together, because the first is called through a mobile display media query and the second is for desktops.

Should I get rid of them anyway?

EDIT 3:

It seems that all of the errors in my page are caused mostly by nesting errors in the shtml files that are being called by ssi.

When I remove the ssi, I only receive these errors...

"The type attribute for the style element is not needed and should be omitted."

"This document appears to be written in English. Consider adding lang="en" (or variant) to the html start tag."

...However, I still receive the same broken "Navigation Menu" text even once I remove the ssi from the equation, and work from directly in my html page.

This is with all of the html code and calls to the java script directly in the page so that I can avoid any of the html errors that are present in the usual page.

Pokémon - English dubbed episode 0001

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 23, 2019 0
LIZZIE LATEST
Explorer ,
Apr 24, 2019

Copy link to clipboard

Copied

After looking at the code that you posted, Nancy, I was able to fix my problem with the navigation menu. I was able to use that in the body of the shtml page I was calling with ssi and added a few more lines to that and got it working almost just like what I wanted it to do. A few more lines of code should do it.

Thank you again, Nancy. You're awesome!

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 24, 2019 1