CSS making my page responsive for smaller screens

HTML & CSS
1

Hello,
I don’t normally break cover on a forum such as this, but the fact is that I use a screen reader, and compose pages with an imagined idea of how they look. As a consequence, if this is entirely wrong, bear this in mind.
I have the following code. Grid layouts make sense to me, and it’s how I visualize things.

html {
  margin-left: 0;
  margin-top: 0;
}

table,
th,
td {
  border: 1px solid;
}

#body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 300px auto;
  grid-template-areas: 'menubtn header '
    'sidebar content'
    'footer footer';
}

#menubtn {
  grid-area: menubtn;
  position: sticky;
  top: 0;
  height: 3rem;
}

#header {
  grid-area: header;
  background-color: white;
  position: sticky;
  top: 0;
  height: 3rem;
}

#sidebar {
  grid-area: sidebar;
  background-color: white;
  position: sticky;
  height: calc(100vh -3rem);
  align-self: start;
}
#sidebar.hidden {
  display: none;
}

#content {
  grid-area: content;
}

#footer {
  grid-area: footer;
  background-color: white;
}
h1 {
  color: #330099;
}

h2 {
  color: #330099;
}

h3 {
  color: #330099;
}

a:link,
a:visited {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 3px;
  text-decoration: none
}

#content a:link {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 1px;
  text-decoration: none
}

#content a:visited {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 1px;
  text-decoration: none
}

a:hover {
  background-color: #06C
}

I got someone to look at a page using this CSS, and they say that the top heading is overlapping the lower content.
Further to this, I’d like to use the @media tag, so that I just have one column. Does this mean changing everything, or can I just change the grid layout?
Thanks.

2

To get a real answer you will need to also provide the HTML stucture to give context to the CSS code you posted.
But on a side note, there is a lot that can be done to reduce repetition in your CSS code.
For example all of the anchor elements (<a>) share these properties:-

  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  text-decoration: none;

So you only need apply them to the a selector and all others will inherit.

a {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 3px;
  text-decoration: none;
}

Then you only need define the exceptions or differences.

a:hover {
  background-color: #06C /* Hover has a different background */
}
a:visited {
  color: #FFF;  /* Visited has a default style to override */
}
#content a {   /* Anchors within Content have different padding */
  padding: 1px;
}

Your heading elements share the some color:-

h1, h2, h3 {
  color: #330099;
}
2 Likes
3

Many thanks for this comprehensive explanation. I’m that new to CSS that the idea is still pretty cool, and I’ve not yet mastered what actually needs to be there. I’d happily provide the rest of the code, but it’s in php and includes subscripts etc. Apparently, the header masks part of the menubutton, not the content.
Thanks again

4

The best thing in this case is to post the resulting HTML that is output to the browser, rather than the PHP souce code.

5

Assuming the html follows the design of your grid layout then what I see is that the menubtn element which you have made a sticky element will be covered by the sidebar which will scroll upwards when the page scrolls.

You need to give a high z-index to sticky elements to ensure they stay on top of other stuff because of course they will stick to the top of the viewport when using top:0;

You also gave the menubtn and the header a fixed height of 3rem and in a responsive layout that would likely break if text wrapped or font-size was increased. Avoid fixed heights and use min-height or indeed let the content control the height.

Regarding your sidebar you set it to height 100vh - 3rem and that makes no sense as that will limit its height and it will scroll away with the content. If indeed you wanted a sticky sidebar as well then you would just put the menubtn and the sidebar in one 100vh div and no magic numbers needed. You would of course need to control the overflow on a fixed height element. I’m not sure where you were going with that sidebar as I see you have a hidden class waiting to be added so indeed you may want it sticky also.

I’ve copied your code into a codepen for ease of use and just added the elements prescribed by the grid. I’ve adjusted the css so there is no overlap unless sticky and added the other changes I mentioned.

(If its easier for you to see the code if I post it in here then let me know.)

Once we get the large screen version working then we can set about the small screen version but we will need to know how the small screen is supposed to look and where elements need to be. In most cases it will mean changing the grid definitions to suit the smaller layout.

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.