Orange Footer Line

Visual Voodoo

Hi guys...on my smug mug site I used HTML to create the footer. On a regular computer...or I think an iPad the orange line is the separator, but on an iPhone the orange line gets shifted down into the gray box and the width is shortened. If you goto another link in the menu you will see (that is my other website) that the code works there. So I would like to fix the HTML code or the CSS to make the orange separator where it should be...right on the edge of the gray to white of the footer and be full width.

This only happens when my site is viewed with an iPhone (I use an iPhone X).

Here is the website:
http://gallery.photoguy.com/Photos

The first photo shows how it should look on an iPhone X (as it looks on all the other pages when selecting from the menu at top).

Next...now lets see how it looks on SmugMug on a mobile device.

Thanks for any help,
David

Hikin' Mike

You should NOT use a <hr> to create your orange line. I would use a border-top: 5px solid orange; on your footer gray area.

Hikin' Mike

Like this:

.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-footer {
    border-top: 5px solid #e58627;
    }

Visual Voodoo

Hi Mike...thanks for responding.

Now there is no orange line yet showing.

What I did...Ok so I removed the HR reference from the HTML and CSS and add your CSS code just as you have it. How do I make it display? Probably in HTML like I did with the HR?

David

Hikin' Mike

I would put that in your site-wide CSS.

Visual Voodoo

Ah. Ok. Now I understand...and yes that worked. I appreciate your help with solving my HTML/CSS mystery.Thanks again...Mike.

David