Responsiveness

[Chysbert]

I constructed my site (www.schaatsenmuseum.nl) from scratch using html only and then added a style sheet using css. This worked fine untill I started trying to make things responsive. I tried to apply what I learned with W3 schools but though I have put in many many hours I did not manage. I contacted some professionals but they appeared to be only interested in reconstructing the site with Wordpress. But that is not what I want. I want to understand the underlying system, as part of the pleasure, and do things mainly myself.. So, I hope there is some nerd around that understand and appreciate my problem and is willing to direct me to the correct trail again.

For guidance I mention that I added the viewport to the meta section and @media instructions for screens up to 600px and for 601px und up.

[Ingolme]

If they're telling you to just use Wordpress, I would hardly call them professionals.

The first step, before applying media queries, is to make everything flexible. Don't give fixed widths to anything.

For example, the header, section and footer you can set max-width instead of width:

#header, section, footer {
  max-width: 1080px;
}

The site content and side bar need to be replaced with percentage values:

#sitecontent.sitecontentleft {
  width: 72.22%;
}

#sidebar.sidebarright-index {
  width: 25%;
}

The media queries will only be necessary once things get too small to nicely fit two columns. You choose a breakpoint by eye based on when you think it stops looking good. At the breakpoint, you would stack things vertically. The easiest way to do that would be to remove all float declarations and set the width to auto.

@media screen and (max-width: 800px) {
  #sitecontent.sitecontentleft,
  #sidebar.sidebarright-index {
    float: none;
    width: auto;
  }
}

The media query must go after all the other rules in order to be able to override them.