I am trying to make the header responsive so when it is viewed on phones or smaller devices, it will actually shrink. No matter what setting I choose, it tries to make it larger than the height is supposed to be and pushes the menu and everything else down. I tried different CSS settings but nothing was working. I tried using padding but it still isn’t working out correctly. The client wants it to shrink and it needs to be at the image height when viewing on larger devices. Is this possible?
Instead of using a background image for the header, can you change it so it uses a Photo module instead? As it is now we can reduce the size of the image by setting a different padding when it hits certain viewport widths via media query, which would be a lot. Give it a shot and let us know how it goes!
I tried that but it doesn’t go all the way to the edge and leaves a gap around the picture. Can I adjust that in CSS without having to change the Global settings?
On a side note, is it best to use a class or ID instead of using the node number when changing certain areas in the CSS? I am still trying to get used to using the CSS in here and I found using the node number easier but didn’t know if that is “proper” way I should be doing it. I don’t see an in-depth tutorial on CSS in here unless I missed it??
It’s considered best practice to use a class over id. Also, you’re free to use either the node-id class or your own custom class. I would always go with the custom class option as you can be specific so you know in you CSS what it is referring to.