Questions About Media Queries

[FrankJohnson]

Friends:

I have a general question about media queries and then a question about a specific problem I'm encountering implementing media queries on a particular site.

A little background might be helpful. My HTML/CSS skills are self-taught, which means they oftentimes seem deficient. I tend to arrive at the final code I use through a trial-and-error process (I know it's not the best and that I should probably take a comprehensive course at some point, but with more than a full-time job and a family, it's sometimes hard to find the time). One of the areas where my knowledge is definitely insufficient is media queries. I'm just starting to use them, and I'm struggling a bit with the concepts.

With that as background, here's my general question: from what I've read, it seems to me that the best approach is not to target specific devices (which would be an endless process I think), but to instead keep adjusting the width of the viewport to find each breakpoint and then create specific media queries for each of the breakpoints I find. Am I on the right track?

Now, the more specific question. I'm working on this site. The stylesheet is here.

The process I have followed so far is this:

1. With a lot of help from Brad at WP Sites, I was able to implement Ambiance Pro so that it displays a single post on the home page.

2. I've adjusted the basic CSS so it displays how I want the home page post to appear when the viewport is wide (1519 pixels wide on at full width on the monitor I'm using).

3. I then wanted to implement media queries. As a start, I removed all of the media queries in the Ambiance Pro stylesheet and saved them.

4. I then started reducing the width of the viewport until the layout broke (I'm using this Chrome extension to adjust the browser width - not sure if that matters or not, but ....). The first breakpoint was at about 1198 pixels (I can't recall the exact width). I created a media query for a max-width of 1230 pixels and the 1198 pixel breakpoint was solved (I set the max-width at 1230 because I wanted to maintain a bit more whitespace in the left and right margins than if I had set the max-width at the actual breakpouint).

5. I then started reducing the width of the viewport further until the layout broke. The next breakpoint was at about 998 pixels (again, I can't recall the exact width). I created a media query for a max-width of 1024 pixels (again, wanting to maintain a bit more whitespace in the left and right margins)

6. So at this point, I have two media queries - one for a max-width of 1230 pixels and another for a max-width of 1024 pixels. But when I started reducing the width of the viewport further, I noticed that at a width of 1000 pixels, I had a problem. Although the layout of the home page had not broken itself, the browser had a horizontal scroll bar.

7. My first thought was that there must be an element in the stylesheet with a width greater than 1000 pixels, but I've checked every class and id on the page and can't seem to find anything that would be the source of the problem.

Any thoughts on how I should approach this? I'm at a loss as to what to do next to figure out the problem. Am I confused? In other words, I'm wondering now if the method I've described above is faulty in some way.

Thanks in advance for any help anyone can offer - it's much appreciated!

Frank

http://www.linksforchristians.net

[FrankJohnson]

After searching online a bit, I found a solution - adding this to the media query with a max-width of 1024:

body {
overflow-X: hidden;
}

Frank

[Author]

Posts