making old site responsive – spacing issues

[tracybags]

Hello – this will be a doddle for you genius people but I can’t fathom it. I am converting an old site that I built in Dreamweaver (don’t scream) – to mobile version. So for purposes of testing, I have created a single page, template and associated CSS files, also using menuzord.

Issue: banner image is not sitting tight to menu below it. I increased the image size height as I thought this was the issue, but this still added 5+px to the bottom margin. If I put in a -6px to #banner height then it works but I want to know if this is the right workaround or if there is something I’m missing as to where it is adding this margin.

Second (possibly related?) issue is the H1 line sits beneath the navigation bar so why is this and what is the best solution?

The new mobile page is http://www.unityofself.co.uk/test-mobile.html

thank you very much

[Beverleyh]

1. Gap below banner img: this is most likely because images are inline elements by defaults, and with inline elements (think text-related elements like strong and em), there’s a space reserved below for hanging letters. That is, the tails of g,j,p,q,y. The easiest way to remove the extra space is to make the img a block-level element with display:block;

2. H1 (as with all the other heading elements) is a block-level element by default. Blocks want to occupy their own line, so they will push themselves onto a new line below whatever was before them, and push whatever is after them onto the next line too. You can change their behaviour by changing their display property value https://www.w3schools.com/cssref/pr_class_display.asp

[tracybags]

Hi Beverleyh – thank you so much!!!! For the banner image your help did the trick – soooo satisfying to see it jump into place on saving!! Perfect! Thank you.

For the H1 I still don’t understand sorry :( You said it will push itself onto a new line below whatever was before it, but in this case it is not pushing itself low enough, so it’s actually not below what was before it but it’s sitting UNDER what was before it, ie. under the nav bar. So I can’t correlate the solution to the problem and don’t know what to do about this still. I thought it would be a ‘padding’ or a ‘margin’ addition to the navigation to push the H1 down lower. Is that an acceptable solution or do you still think I should change the ‘display’ property?

thank you very much.

[Beverleyh]

Ah… I see what you mean now.

I thought it would be a ‘padding’ or a ‘margin’ addition to the navigation to push the H1 down lower. Is that an acceptable solution … ?

It certainly is :) but it might be better to add it to other elements.

You could increase the overall top padding that’s currently on #body;

#body { padding-top:4.5em }

Or you could increase the top margin on the h1;

h1 { margin-top:2.5em }

[tracybags]

Perfect!!!! Thank you very much for your help! I’ll be back soon no doubt…..
Thanks again :)

[Author]

Posts