Image error on mobile desktop

[remnantique]

The banner is cut off on the desktop version on mobile. It'll most like be because of the cloud animation coding at the bottom of the css or the html in the forum wrapper. Anyone care to check the inspector and see if they can figure it out?

www.thesaplingforums.com

[remnantique]

If it helps, i can replicate the error. It's when you minimise the width of the window to a certain point where the scrollbar appears. The banner then cuts off

[Tumbleweed]

Aug 29, 2017 11:33:12 GMT -8 remnantique said:

The banner is cut off on the desktop version on mobile. It'll most like be because of the cloud animation coding at the bottom of the css or the html in the forum wrapper. Anyone care to check the inspector and see if they can figure it out?

www.thesaplingforums.com

Somewhere in your css you have it hidden:


header {
margin-bottom: -10px;
display: block;
position: relative;
overflow: hidden;
}

either remove that line or change hidden to visible. It seems to fix it when I minimize my screen only checked in Chrome and IE.

[remnantique]

That doesn't work, it appears to at first but the purpose of the overflow: hidden is to hide the horizontal scroll bar appearing when the clouds reach the left of the window. It fixes the banner issue but without it, the window scrolls along with the cloud animation = S Try hiding it again in the inspector and wait until the clouds reach the edge of the screen.

[Tumbleweed]

Sept 1, 2017 8:12:25 GMT -8 remnantique said:

That doesn't work, it appears to at first but the purpose of the overflow: hidden is to hide the horizontal scroll bar appearing when the clouds reach the left of the window. It fixes the banner issue but without it, the window scrolls along with the cloud animation = S Try hiding it again in the inspector and wait until the clouds reach the edge of the screen.

Hmmm, I thought I replied to you but maybe I forgot to press create post. Having one of those days...well weeks, it seems. lol
Anyway, that makes total sense and why I didn't consider that or notice the scroll bar is beyond me.  I set up a mock up on my test site using your css but I'm using my own javascript and before I could do much of anything it seems ProBoards is having some unusual server problems as none of my css is saving so can't do anymore now.

I noticed that with it unhidden on your site, once you minimize your screen to a certain point you don't notice the bar moving or maybe it isn't at a certain point? But maybe a option would be unhide it only when it gets to a certain screen width. Like ...


/*For smaller devices*/
media screen and (max-width:990px) {
header{overflow:visible;}
}

Or maybe play with the widths just for media screen? I also tossed around the idea maybe it had to do with using the headers tag. I have these things I want to try but still, my css isn't saving and things are super slow on my test site so anymore testing will have to wait. So for now, I'm getting offline for a while and will check back later.

My wish is one of our more savvy coders (I'm a amateur) will come along while i'm gone and help you. They know all the tricks to the trade.