Stuck on the CSS fro my project

HTML-CSS
1

Hi,
I am making a little oroject that suggests TV /books and podcasts when you click a button. I am stuck on the CSS as in mobile view it goes very tiny and when I shrink the window the result box spreads over the header. I know this is something to do with responsive design but I can’t figure it out. Would love someone to help!
Thanks, Clare
Live Site

Code repository

1 Like
2

Try adding the viewport meta tag to the head.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
3

Great thanks that fixes the small view on phone - somehow that bit got lost of the head I was copying and pasting!

Still not sure about the result div getting too big - should I do a media query?

4

Hi @clare.parkes

You should add charset and language to your head too. It is always better work with browser’s parser that go against it.

If you want you can try this code after comment out yours, and using it as starting point. The grid make 3 rows, tow fixed (header and footer) and one in the middle than will take all the available space.
The border or outline is for actually see the boxes.

* {
  border: 1px solid red;
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh; 
  display: grid;
  grid-template-rows: auto 1fr auto;
}

main {
  max-width: 70ch;   /* you can use pixel here if you want */
  justify-self: center;
  align-self: center;
}

Also I think you will fine very interesting this two JavaScript links:

querySelector() is the modern way to get elements from the DOM, in this case getElementById will do the work anyway.

Element.classList: it comes with very cool methods to add, remove, replace or toggle between classes.

I hope that helps and not get you in more trouble :sweat_smile:, ask as much you want.

Nice job by the way! :sunglasses: :ok_hand:

Happy coding!

1 Like
5

Thanks for taking so much time to help I appreciate it! I have heard of querySelector but everywhere I look they seem to use getElementById! I am just about to learn about classes in teh course I am doing so may add that in later!

I will have a play using grid to make the smaller viewport layout better

Thanks again!
Clare

6

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