Issue with page design

HTML & CSS
1

I have three issues with my new site.

  1. The top menu has social Icons and the site menus.

I wanted the social icons to be on the left and the site menu on the right. I tried many ideas without success. Any direction on how to achieve that would be most welcome.

  1. The pages have 2 blocks of white above and below the bottom of the page menu, I would like to eliminate these white bands. I can’t find what is causing this. Originally the template was all white, so the white strips where not noticeable.

  2. The other issue is the copyright at the bottom of the pages are not covering the whole base of the page, just about 80%. I wanted this copyright notice to be like https://www.life-path.stevenredhead.com/index%20copy%202.html but tried many ideas without success.

Any direction would be welcome. Thank you.

2

You do have a fourth, though, that rather concerns me. :winky:

A great deal of your page fails the “Color Contrast Checker” here…

https://webaim.org/resources/contrastchecker/

Unfortunately, I am unable to help you with your other concerns. :unhappy:

coothead

2 Likes
3

Assuming you mean on the right and left of the centered layout then just change your lg-8 to lg-12.

e.g.

<div class="col-lg-12 ml-auto" >

1 Like
4

Thank you as always coothead.

I am swimming is mud :slight_smile:

5

Your instruction worked out perfectly PaulOB much appreciated, thank you.

Is there a way to get a wider gap between the social icons and the menu?

6

They seem to have as much gap as is available but If you mean to the edge of the browser window then you would need to pull the header code out of the container div as that controls the width of the page.

If you mean the .footer element then that#s the 40px padding top and bottom, Remove the padding from .footer and the white strip will go.

You would need to move the copyright outside of .container if you want it full browser width as container is 1140px wide. (You also seem to be nesting .container which is not allowed in bootstrap IIRC).

7

I appreciate your help PaulOB

The only 40.px I could find was line 728 <div style="min-height:40px;<>div>; removing this didn’t removed the white strips around line 852 above the bottom menu <footer id=“footer” class="clearfix “> and around 1058 near the copyright.

https://www.life-path.stevenredhead.com/index%20copy%202.html is the original, which hasn’t the white space and the Copyright is 100%. I did delete some parts that may have caused the issue with the copyright width.

As I have limited knowledge I have been trying hit and miss to resolve the issues, so will continue this method to see if I can resolve those issues, but if you have any advice it will most surely help.

Thank you for mentioning the nesting of .container, as this was the format of the original template I had no knowledge of this.

8

I already mentioned it belonged to .footer :slight_smile:
Lines 265 style.css:

.footer {
  padding: 40px 0;
  background-color: #fafafa;
}

Just change it to padding:0 or give the footer the same background as you have the internal element.

1 Like
9

Yes, that worked perfectly, thank you for the great help and support, I appreciate your kindness in resolving the issues I had with this template.

I hadn’t realized this issue was related to the style.css and was looking for the 40px in the index html, which I obviously now couldn’t find.

1 Like
10

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