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.]
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
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.
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
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
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...
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
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.
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...
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.
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
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.
Copy link to clipboard
Copied
Is your source code free of errors? What's the URL to your test page?
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.
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.
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?
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()">×</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()">☰ open</span>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>
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.
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!