Responsive and adaptive design |
Responsive and adaptive design |
Christian J |
Jan 29 2024, 07:54 AM
Post
#21
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
Edit I selected the "notification by email" option for any replies but it doesn't work. I've had similar issues with other forums when using a Microsoft email address. The spam filters on their servers are not well designed. If I can change my email address on this forum to my Gmail account, I'll receive email notifications about replies. I moved the replies to its own topic: Email notifications not working https://forums.htmlhelp.com/index.php?showtopic=61436 |
Lee Batchelor |
Jan 29 2024, 03:14 PM
Post
#22
|
Member Group: Members Posts: 82 Joined: 10-May 20 Member No.: 27,332 |
Coothead was generous enough to devote his time to making my website responsive to mobile devices. I was trained long before mobile devices were used and didn't know how to do this. Thanks again, Coothead!!
I uploaded the Home page and it works perfectly on every device we tried it on. The only remaining issue is, the menu is displayed in two rows and is confusing to read. I'd like to use a media query to resize the menu to fit smaller screens and be readable. I don't really want the menu to change to a hamburger menu. It looks straight forward, however, I don't know what to set the maximum size to before the query is invoked. Some people say to not use px as the units, but rather %. For example, I found this on the W3schools website: /* When the width is between 600px and 900px OR above 1100px - change the appearance of <div> */ @media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {...code} Your thoughts are most appreciated. Thanks. |
coothead |
Jan 30 2024, 05:57 PM
Post
#23
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
QUOTE
QUOTE
QUOTE
coothead This post has been edited by coothead: Jan 30 2024, 05:57 PM |
Lee Batchelor |
Jan 30 2024, 07:19 PM
Post
#24
|
Member Group: Members Posts: 82 Joined: 10-May 20 Member No.: 27,332 |
Once again, many thanks Coothead!
|
coothead |
Jan 31 2024, 06:49 PM
Post
#25
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there Lee Batchelor,
coothead |
Lee Batchelor |
Feb 1 2024, 09:41 AM
Post
#26
|
Member Group: Members Posts: 82 Joined: 10-May 20 Member No.: 27,332 |
They look great, thanks Coothead!
I just finished modifying the menu bar to preserve space, by removing some titles and using links, as per your earlier suggestion. Looks like you did the same but were able to keep the Testimonials page on the menu bar. Shall I download the HTML and CSS files from those pages? Thanks again!! |
Lee Batchelor |
Feb 1 2024, 10:04 AM
Post
#27
|
Member Group: Members Posts: 82 Joined: 10-May 20 Member No.: 27,332 |
Coothead, I used the Inspection tool in Chrome and set the breakpoint to 340px. The site looks fine! The band name floats over top of the picture but that too is fine.
|
coothead |
Feb 1 2024, 11:09 AM
Post
#28
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead |
coothead |
Feb 1 2024, 11:24 AM
Post
#29
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead |
coothead |
Feb 1 2024, 12:23 PM
Post
#30
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there Lee Batchelor
coothead |
Lee Batchelor |
Feb 1 2024, 03:04 PM
Post
#31
|
Member Group: Members Posts: 82 Joined: 10-May 20 Member No.: 27,332 |
Thanks, Coothead. That looks better. I forgot to mention that the music page has a script that turns off a clip if another one is chosen. I added it to your code. it reads as follows:
<script> document.addEventListener('play', function(e){ var audios = document.getElementsByTagName('audio'); for(var i = 0, len = audios.length; i < len;i++){ if(audios[i] != e.target){ audios[i].pause(); } } }, true); </script> This post has been edited by Lee Batchelor: Feb 1 2024, 03:08 PM |
coothead |
Feb 1 2024, 03:56 PM
Post
#32
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead |
Lee Batchelor |
Feb 1 2024, 04:18 PM
Post
#33
|
Member Group: Members Posts: 82 Joined: 10-May 20 Member No.: 27,332 |
Good catch Coothead.
I ran the the pages through the W3C Validator and they said it wasn't necessary to specify the Java script type. I don't know if you use this validator or find it unsuitable at times. I tried using the one on this site but it won't let me. Something about not having permission to use the "htaccess" file? I ran the finished CSS file through the W3C, CSS validator and flagged an error with the margin definition. p { margin: 1em 2; It didn't like the 2 not having a unit (px or em). I tried modifying it but it messes up the paragraphs. I like them they way they are. Thoughts? EDIT I just ran the CSS code through three different validators. They all found a million things wrong 🙄. It's so sad that in this hi-tech society, we can't all get on the same page 👿. This post has been edited by Lee Batchelor: Feb 1 2024, 04:42 PM |
coothead |
Feb 1 2024, 05:30 PM
Post
#34
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
QUOTE
QUOTE
coothead This post has been edited by coothead: Feb 1 2024, 05:57 PM |
Lee Batchelor |
Feb 1 2024, 07:15 PM
Post
#35
|
Member Group: Members Posts: 82 Joined: 10-May 20 Member No.: 27,332 |
Hi Coothead,
Many thanks for the validator information. When I trained in 2012, there were no mobile devices for websites, so we were only taught how to code for PC and Mac computers - much simpler days! I'm delighted you use the W3C validator. I used it in training and for every website since. Never had any reported issues with the code not working on certain browsers. I've learned SO much from reading through the code you wrote for me. The band members extend their gratitude as well. I'll be 71 in July, so I'm not that far behind you. All our band members are between 69 and 72. I'll finalize the website and then upload it. As it stands, the pages all look fine at a breakpoint width of 340px. I modified some of the design concepts in your finished pages. I teach technical writing at Humber College in Toronto. In one of my courses, I teach the concepts put forth by Dr. Robin Williams (not the actor of course). She wrote a book entitled, The Non-Designers Design Book. In it, she coins the acronym, CRAP. It stands for Contrast, Repetition, Alignment, and Proximity. I use these rules exclusively in all my website and document designs for large companies. The goal is to drastically increase readability and information retrieval. Your designs follow these principles, with only a few minor differences. Off topic - I have a friend who will hit the 80 mark this May. He's doing well and I'm sure we won't see you fall off the planet anytime soon either. At any rate, I'm eternally grateful for the help. Stay well... - Lee This post has been edited by Lee Batchelor: Feb 1 2024, 07:18 PM |
Lo-Fi Version | Time is now: 26th September 2024 - 10:45 AM |