Responsive and adaptive design Options

[Lee Batchelor]

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]

Okay, I opened the new page design Coothead did for me and it looks perfect on my Android and iPad. The only issue I see is the words "The Offbeats" and our group picture are forced to the outer left and right margins respectively. How do I fix that so they reside in the middle? I don't want to ruin the code that Coothead wrote. Much appreciated!!

Note
On the current index.html page, I added a link at the bottom beside the StatCounter. It's labeled "Test". It displays Coothead's reworked page.

This post has been edited by Lee Batchelor: Jan 17 2024, 10:52 AM

[coothead]

The only issue I see is the words "The Offbeats" and our group picture
are forced to the outer left and right margins respectively.

How do I fix that so they reside in the middle?

Replace the existing rules with these...

CODE

h1 {
   margin: 0;
   padding: 3rem 0;
   font-size: 4rem;
   font-weight: normal;
   line-height: 1.5;
   color: #f5f5f5;
   text-align:center;
   background-image: url(images/band2.png);
   background-repeat: no-repeat;
   background-size: 28rem 17.72rem;
   background-position: center 1rem;
}

@media ( max-width: 28em ) {
h1 {
   font-size: 3rem;
   background-size: 17.5rem 11.77rem;
}  
}

Also note that I resized and compressed all the images used for the page.

coothead

This post has been edited by coothead: Jan 17 2024, 12:00 PM