Responsive Design, Breakpoints, and Media Queries

HTML & CSS
1

I started a new topic because I was getting lost in the weeks in my old thread.

Before proceeding, I have to thank all those who have responded to my posts for all the help and encourgement they’ve given, especially PaulOB.

To restate for those who have not seen my other posts, I’m 83 yo and just beginning to dabble in web development. I can crawl around in CSS and HTML and have a passing acquaintance with VS Code and a few other tools. I am in all respects a newbie, except chronological years.

I’ve got a small website for family history purposes. I have not yet tried to adapt it for effective access on various platforms. It will display on smaller screens but poorly, being best suited at the moment mostly for large screens, ie, desktops and laptops.

I’ve begun to explore breakpoints and media queries. I’ve received good advice about designing from the outset for responsive pages, but the horse is already out of the barn; so I’m going to be in retrofit mode (or will have to start again from scratch :grimacing:), If it’s true that form follows function, then it has to be said that the content I’m creating is, perhaps, ill-suited to small screens. It’s hard for family trees and photo chains and albums to be suitably viewed on smartphones, but I’m up for trying and doing the best that I can.

Although I know that many of you will tell me to forget screen sizes and focus on responsive design, my experience so far hasn’t prepared me to do so. My mind tells me that smart phones, notepads (iPads), and large screens (~1000px) are three categories to focus on. For that reason - and until I gain enough knowledge and experience to do otherwise - I have the opinion that my media queries should be based on those sizes as breakpoints. Using ChatGPT I found that small (min-width 575px), medium ( min-width 768px) and large (min-width 992px) are common boundaries. I believe they will suit my needs (assuming that I can force the content to fit smart phones); so I was thinking those might be the limits I set for media queries. It is, at least, a starting point that I can work from going forward.

Before running too far too fast down this new rabbit hole, I thought I should seek advice and opinions here. Please critique my thinking and give guidance. It will be easier to take a different tack now than after I’ve coded a lot of @media constraints.

TIA

2

No that’s pointless I’m afraid. Thats a rabbit hole that will lead you nowhere. I strongly advise against using that method.

Concentrate on your design and not some imaginary device sizes. I gave full instructions on how to do this in the other thread so I won’t repeat myself as I explained at length the process. If you want me to repeat the instructions because you missed them then let me know and I’ll try again. :slight_smile:

No your content is fine for small screens as I have already shown many times in my demos. They work all the way down to phones with very little work at all.

Even the most complicated designs can be catered for on mobile but it sometimes takes a little more forethought and planning. For example look how this SitePoint page works on a mobile. Forum pages are a hundred times more complicated than your photo site. I’m actually typing this post on a mobile at the moment. :wink:

You do though seem to be jumping from one task to another without completing the original task and therefore missing out on the overall learning curve. Try to complete one thing properly before moving to the next.

Nothing you have shown me so far will be any problem to make responsive for all devices. The problems you are encountering are simply that you haven’t progressed far enough in your learning curve yet to understand what needs to be done. That’s why it’s a learning curve :slight_smile:

You have made improvements in some areas so it’s a matter building on top of what you have learned. Rome wasn’t built in a day.
Don’t give up as you are making progress and you do seem to be understanding some of the logistics now. :slight_smile:

If you have a drawing of a design in mind then post a picture and we can offer suggestions on how to code and what it should look like on smaller screens.

2 Likes
3

I’m struggling with the concept of how to find the breakpoints. My mind wraps around a fixed number of pixels. It struggles with narrowing the browser until content becomes unwieldy at that size. I can narrow the browser window easily enough, but when I do, I don’t know how many pixels width I have which, as I understand it, must be known to set media query break points.

You pointed out in a lesson some days back that the @media query belongs in my code and even corrected me when I put in in the wrong place in the CSS (it belongs at the end :winking_face_with_tongue:). I’m trying to figure out what it needs to contain and what HTML pages need it in their CSS.

I’m a much slower learner these days. I can’t absorb too much at once . . . a small garden hose overwhelms me as much as a fire hose used to. In the other thread I bounced around a lot, evidencing how easily I’m distracted/overwhelmed. I’ll try to go back and string together your posts on the responsiveness topic and examine them again. It’s quite possible (probably even) that I missed your points because I was so focused on a different issue.

Thanks for your patience and not throwing in the towel on me.

4

Open devtools in chrome and click the device toggle icon near the top left. You will then get a screen where you can select various devices but instead select the responsive option which gives you a corner handle to easily drag the panel open and closed. As you do this the dimensions are automatically displayed at the top.

You can easily see when something doesn’t fit so use a dimension before that point and create a media query to make the necessary changes. Usually that involves reducing the number of columns or reducing large text or large images to suitable sizes for the space available.

You should do this process for every new section you create while you are creating it and in that way you build in responsiveness as you go. It’s easier to make changes to one item rather than waiting until the end and changing everything as you won’t know which element is really causing the problem.

Just practice with a few simple elements and try to get to grips with the methods:)

2 Likes
5

Update:
I found the answer to this dilemma. The “Nest Hub” drop down arrow reveals a menu with ‘responsive’ as an option. I’m leaving the post in case someone else finds the thread searching for the same answer.

I got lost in these instructions because I couldn’t locate what you refer to as “the responsive option.” Can you tell me more about this. I took this screenshot so you could see what I see when I choose the toggle option:

Paul devtools toggle
Paul devtools toggle1908×1011 165 KB

I did an AI search and learned that Chrome DTs are supposed to open in responsive mode when choosing the toggle mode. This is supposed to allow me to drag the edges of the viewport but I can’t seem to find what that refers to. I moused over and found nothing to drag. The mouse pointer turns into a blurred circle with a darker circle within when it moves over my screen (which I infer is the viewport), but no amount of right or left clicking results in dragging the edges.

6

OK, I took what I think is my simplest page (lineage-page.html) open in Chrome and drug the viewport down in size to ~710px and got the result shown below (It looks horrible for a small screen like a phone’s). I have no frame of reference that informs me where to go from here with the design. At that screen size, a single container showing demographic info for a single individual seems appropriate, but I have no clue how to code to do that.

Can you point me to tutorials or articles? I think my problem is poor knowledge of what makes good design (in addition to my technical limitations).

lineage at 710px
lineage at 710px805×6418 529 KB

7

Where it says nest hub in your screenshot with the drop down arrow. Click that arrow and you will get a whole menu of items. Just choose responsive which is the first one at the top.

Screenshot 2025-06-03 at 20.22.10
Screenshot 2025-06-03 at 20.22.101046×1338 150 KB

1 Like
8

UPDATE:
I should point out that I got here by asking the Perplexity AI "
How to code @media content for max-width 710?" The response gave me a push. The CSS still has errors (to say the least).

Checkpointing here before trying to move ahead.

I looked at what happened to my lineage-page.html at ~ 700px and decided that for that media I needed to display a single generation-wrap and its contents which should then allow subsequent containers to scroll. To that end I inserted this CSS;

@media (max-width: 710px) {  /*  for lineage-page.html on smart phone screen */

.background-wrap {
  background-color:  rgb(234, 217, 201);
  width: 100%;
  padding: 10px;
  }
  
h1 {
    font-size: 1.5rem;
  }

.background-wrap {
  max-width: 750px;
  margin: 1rem auto;
  padding: 1rem 1rem 2rem;
  background-color:  rgb(234, 217, 201);
  border: 3px solid #999;
  border-radius: 20px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
	font-family: Brush Script MT, cursive;
}

.lineage-page-wrap {
  display: block; /*  Show one generation container at a time scrolling down  */
  gap: 1rem 2rem;

h1.heading {
  font-size: 1.5rem;
}
h2.subheading {
  font-size: .8rem;
}
}

With DevTools responsive to 400px I got the screen below, which does the single generation container to appear with others scrollable. I need to get that effect at around 700px. Am I on the right track?

Paul proo of concept
Paul proo of concept1838×988 140 KB

9

Here is how I would do a 3 column layout going down to two then one column as space gets smaller.

It’s just a few lines of code so I expect you to fork the codepen and play with it until you understand what’s happening. It uses grid with a minimum column width that allows the columns to break down as the screen estate gets smaller. If theres something you don’t understand then research it until it makes sense to you.

There’s only one media query which simply changes the column width css variable so that we can go smaller once the screen space is smaller than the column width we set. In reality you may need another media query so that there is not such a big jump downwards but I didn’t want to complicate things at the moment.

Use the responsive mode I mentioned above and see how it changes as you make the screen smaller.

You can now put your content into each of those items making sure that what you place inside is alsoi fluid. In that way you have built a responsive site for every device ever known now and in the future.

1 Like
10

You are basically on the right track :slight_smile: in that you have seen where things should change. I don’t have all your code but here are a few observations.

Only put the changes in the media query as they are modifying the original styles. You don’t need to include anything that hasn’t changed from the original rules. No need to add the borders and shadows unless you are changing them.

You set a media query here at 710px:

@media (max-width: 710px) {

Yet in side that you have set a max-width of 750px! How can 750px fit inside 710px?

.background-wrap {
  max-width: 750px;
etc..

Think logically about what you are saying. At 710px you don 't want that element to be 750px. In essence you don’t need a max-width anymore anyway as that was originally to stop the screen getting too wide.

1 Like
11

I had missed the presets in the Responsive window. (one track mind problem). Those guides help a lot.

12

Yes, on re-examining what I had done and checking to see I had a grasp of what changed what content display, I saw that the AI suggestion and my changes were confused. I’m working on that.

The lineage-page-wrap selector is defined to have 3 columns for full size screens . . .

.lineage-page-wrap {
  display: grid; /* 3 rows / 3 columns*/
  gap: 1rem 2rem;
  grid-template-columns: 1fr 1fr 1fr;
}

. . . so forXR phone screen size:

  1. lineage-page-wrap should display: block instead of a 3-column display: grid
  2. h1 and h2 headings need to change to fit a la
h1.heading {
  font-size: 1.5rem;
}
h2.subheading {
  font-size: .8rem;
}

Still not there yet, but those seem to be the things that the smaller screen needs. What am I missing? Hmmmm . . .
h1.heading (I took this from earlier code you provided)

13

I will chew on this tomorrow. Wife had me cutting grass and trimming trees this PM. Glad I can still do it at my age but it’s tiring, nonetheless..

1 Like
14

One lesson at a time sounds like a good idea. You just get overloaded otherwise :wink:

15

OK, I’ve given the code in the CodePen a bit of examination. I learned some new lessons but still have questions.

Let’s step through the CSS (which is where the real magic lies). I’ve cited your code starting with /* code for clan page only */with my comments added as I went through to grasp the lesson. There are new-to-me concepts.

:root {                       /*  pseudo class defines small screen*/
 --column-width: 450px;      /*  why are there dashes " --column-width?*/
 --gap: 1rem;
}

.clan {                       /*  class defines grid */
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
 gap: var(--gap);
 max-width: calc(3 * var(--column-width) + 2 * var(--gap));
           /*  NEW:  investigate 'calc' element; seems to treble column-width to 1350px*/
 margin: 0 auto;
}
.clan-item {                  /*  defines container for individuals like my .generation-wrap */
 background: white;
 margin: 0 0 1rem;
 padding: 1rem;
 border: 3px solid #999;
 box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
}
h3.clan-title {               /*  styles name text like my generation-name  */
 margin: 0 0 1rem;
 font-size: 1.3rem;
}

@media screen and (max-width: 500px) {  /* NEW LESSON 
                                          "screen" limits effect to devices with screens   
                                          "and" applies "max-width" to screen devices  */
 :root {
   --column-width: 300px;
   --gap: 0.5rem;
 }
  1. I tried using AI to grasp how a pseudo class (:root) works in the example but don’t understand it. I see that the media query uses it, but I don’t understand what is happening.
  2. Can you help me with the grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr)); element?
    I got a ChatGPT explanation but I’m still unclear. I’ve not read about the repeat qualifier. I can guess that repeat sets how many columns there can be but there is no column size defined, auto-fit probably says the columns will be a) fit to the size of the display device and b) have equal width. I see that --column-width: 450px; is defined in the pseudo class :root. I don’t understand how parsed line uses that information. The var(--column-width), 1fr) is a mystery to me.
  3. Can you help me with the max-width: calc(3 * var(--column-width) + 2 * var(--gap)); element? I’ve never used nor read about the calc element. It seems to treble the max-width element which is part of a grid definition. Is the purpose to let the clan selector expand rendering for larger screens? Is this part of the pre-planning for responsiveness in case the media query doesn’t apply?
  4. Parsing the media query: @media screen and (max-width: 500px) { :root { --column-width: 300px; --gap: 0.5rem; } } I see that the query applies to devices with display screens (screen) AND that those devices have a maximum widteh fo 500px. That implies smartphone-size screens to me (but isn’t limited to them). It’s the :root pseudo class that I don’t understand. I understand :root to address the root level of HTML and is used to define things that apply to the entire HTML file. If that’s the case (big if) then it sets a column width of 300px and a container gap of .5rem. for the HTML file. I don’t understand why this is necessary, I guess. There is a variable (--column-width) that is set to 350px (when the query condition is met) instead of its declared 450px in the :root declaration, no? Is that to assure that content is constrained to that width? If so, I can see that the limit for content would then be 350px for small screens, but what happens if the media query condition is not met?, Does it fall back to the 450px set when the --column-width variable was set? If I were to have a very very large screen with, say 2700px, how many 450px containers, ignoring gaps, would display . . . 3000 divided by 450 or 6 containers across the screen?

I hope that was not too tedious. I wanted to parse your code and grasp its meaning. The only way my feeble brain could think to do that was to display any fallacies in my thinking.

16

I tried to edit my post but kept running into a 404 error when I tried to submit my edits. I realize some of my comments need tweaking as does some of the text of my post.

17

:root represents the root element of the document which in the case of html is the html element. If you were using xml or svg files then the root element could be something different

In the case of XML and SVG files, :root isn’t selecting the html element, but rather their root (such as the svg tag in an SVG file).

Therefore for best practice we use :root.

However if you don’t care about best practices you can use html instead of :root assuming you are only dealing with html.
e.g.


 html{
   --column-width: 300px;
   --gap: 0.5rem;
 }

The two dashes before the word column-width indicate that it is a css variable. Column-width is a word I made up like a variable that will hold the value of 300px which can later be used using the format var(–column-width). That allows great flexibility in being able to change all occurences of that value from one place. Thats what allowed me to change the column widths in the small screen media query in one simple step.

I’ll reply to your other questions tomorrow as I am typing on a mobile at the moment and it’s hard work :slight_smile:

18

Yes so an I. Hopefully someone is working on fixing it soon :slight_smile:

19

grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));

That rule tells the browser to repeat a column at a minimum width of 450px per column as many times as will fit in the available space. If for example the space available was only 1200px then you would get two columns of 450px but then you would have a big gap at the side of 300px. This is where the 1fr comes into play and it tells the browser to divide the free space equally between those columns and thus fill the available space.

This is related to the above and without this rule you would get as many columns across the screen as the screen would allow and on my large iMac you’d get about 6 columns. In order to keep to 3 columns we need to set a max-width equal to the min-width on each column plus the gaps that we are using.

The calc() (calculation) allows us to automate this and instead of working out what 3 x 450px + 2 gaps of .5rem equal (which would be manually impossible of percentages were also involved). We tell the browser to calculate it which is does using the calc() function. It says the max-width is 3 x the column-width variable plus 2 times the gap variable. By using variables we never have to change this rule if we decide that column widths or gaps are to be changed at a later date.

Yes the :root is just a document root as already mentioned so don’t read anything different into it. For your purposes its just the same as saying:

html{
}

However you will 99% of the time see it used with :root because that is best practice.

Applying the variable to :root or html means that the variable is available to everything nested in that context. You can indeed make a local context for that variable just as you would do with classes and if for example you were addressing unordered lists (UL) only you could say.

ul( --column-width: 300px;)

That variable then would only be available inside a list element and its children and not available to say a div outside that context.

When I restated the :root in a media query then that value will only apply if the media query is true.

e.g.

@media screen and (max-width: 500px) {  
  :root {
   --column-width: 300px;
   --gap: 0.5rem;
  }
}

This says that when the screen width is less 500px then the value of the variable for :root will now be 300px. It was 450px originally but that’s too big as we get smaller so by reducing the variable we automatically get smaller columns at screens less than 500px. The 500px is an arbitrary figure that I used because it looked that your design needed to reduce at about that point. I don’t care about devices or screens as they will all work because of the approach that I use.

I’m not sure why you are confused with the media query because we have used it before and in effect you are just saying when the screen is less than a certain size change the values to this. As I mentioned a number of times media queries or alive in the cascade and should you immediately over-ride that rule in any following css then the value in the media query is over-ridden and useless.

If you want to learn the ins and outs of css variables (which are actually called custom properties) then read the following.

1 Like
20

Again, thank you, Paul.

I think I now have a grasp on the @media function. Proof will be when I can use it correctly. :slightly_smiling_face:

I think I might can use the calc function elsewhere. I have an idea that I will work on and come back when I hit problems.

Your explanations are great. Thank you again.

Returning to ask another questions wrt :root.
You showed me its use to declare 2 variables (–column-width and --gap). Would it be correct form to add other variables to that pseudo class declaration? For example, my site deals with generations of people in my family. I might want to identify individuals based on a generation value offset from a given individual. Might I add --generation-code to that declaration without causing further problems?