Responsive and adaptive design |
Responsive and adaptive design |
Lee Batchelor |
Jan 12 2024, 01:12 PM
Post
#21
|
Member Group: Members Posts: 82 Joined: 10-May 20 Member No.: 27,332 |
Hi all,
When I was trained in HTML and CSS, it was when desktop computers were the only platforms. Now that mobile devices are used for 51% of all web browsing, we need to use responsive and adaptive design so that the website resolves correctly on all devices. I recently completed a web design and used this code in the meta tags, <meta name="viewport" content="width=device-width, initial-scale=1"> Sadly, this doesn't cause the website to resolve correctly on mobile devices in landscape and portrait modes. I have a feeling there's a 500 hour course of instruction in my future if I want to fix this issue. Perhaps there are some easier lines of code that will solve my problem? Thoughts? Thanks... |
Lee Batchelor |
Feb 1 2024, 03:04 PM
Post
#22
|
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 |
Lo-Fi Version | Time is now: 25th May 2024 - 01:48 PM |