Banner image alignment

  • 1
  • Problem
  • Updated 7 years ago
  • Solved
I would like to use the free theme 'Numerology' but for some reason the default banner image/area is about 1 or 2 pixels out of alignment with the rest of the page. If you look closely you can see that the edge is slightly to the right. Does anyone know how to resolve this please?

Photo of rogers2201

rogers2201

  • 4 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi rogers,

I think You can fix this with some CSS styling.

If you have Silver add this code to your CSS over-rides:


#menu ul {

margin: 0;

padding: 2 px;

list-style: none;

line-height: normal;

margin-left:10px;

}
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
OK Rogers,

I think this is correct. let me know please?

Silver CSS over-ride

#sys_banner {
border-left: 1px solid #D5D5D5;
border-right: 1px solid #D5D5D5;
border-top: 1px solid #D5D5D5;
height: 327px;
margin: -1px;
padding-left: 13px;
width: 785px;
}


Bronze/Free


<style css= "text/css">
#sys_banner {
border-left: 1px solid #D5D5D5;
border-right: 1px solid #D5D5D5;
border-top: 1px solid #D5D5D5;
height: 327px;
margin: -1px;
padding-left: 13px;
width: 785px;
}
</style>


If you have Free or Bronze you need to place the relevant code into an HTML widget on each page. For Silver the one placement in your CSS over-rides will carry through
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Looking at it further there seems to be an overall problem. I've fixed the alignment of the banner and the menu but if you look to the right hand side of the menu line you will see the content border is misaligned.

I tried reducing the overall width of the content container and it worked for the first pixel but then it chopped off the line border on the right hand side. The solution is not obvious to me. You have a couple of options I think:

  1. I can try and work this out but it may take me some-time

  2. Change to another Style. If it's the banner that is attracting your eye primarlily we can rip the banner off and place it in another style and hopefully that would satisfy that aspect. I can't guarantee that it would be successful.
Photo of rogers2201

rogers2201

  • 4 Posts
  • 0 Reply Likes
Thanks Gop. That worked! It aligned to the left but was still a tiny bit out on the right so I changed the

width: 787px

and now it aligns perfectly.

Thanks a lot for your help!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
That's great. It might be a browser affect as when I took it to 788 it cut the border line out leaving the white abutting the off-white ??

I didn't even try 787 :( Apologies.
Photo of rogers2201

rogers2201

  • 4 Posts
  • 0 Reply Likes
Hi Gop,

It was more to do with size of the banner and menu bar style why I was interested in this theme.

Have just checked it on my tablet in safari and the alignment works, so thanks for the code you gave me. I'll test it on a few browsers later at my computer and if there's any more problems I'll just use a different theme.

Thanks again for all your help!