header_text_feature_image not displayed properly on mobile(android) browser

[yshrsmz]

https://yshrsmz.github.io/

So here is my page.
when I browse this page on Android Chrome, header_text_feature_image is not displayed properly(it's way smaller than the display). it's displayed at the left side at first, and when I scroll it will be aligned to right.

Your demo page's header image ( https://sylhare.github.io/Type-on-Strap/ ) also looks strange. its width looks like wider than the display, but when you scroll, it becomes same width as display

[yshrsmz]

Oh, it's not android problem, if you make your PC browser's width small enough, you'll see what I mean

[sylhare]

Hi, can you do a screenshot, I have trouble seeing what you mean.

Maybe it has to do with the size of your picture? I will check what's up.

[yshrsmz]

Sorry for my english.
Here's screenshot's

Before scroll	After scroll

You can see obvious difference on my site. But even with your site, header image is wider than the parent width, and when you scroll, it matches parent's width.

https://github.com/yshrsmz/yshrsmz.github.io/blob/master/assets/img/dactyl.jpg
here's my image if you need.

thanks.

[sylhare]

Ok I'll make some tests, thanks.

[sylhare]

So, I fixed the glitch with the scrolling. (It should not move anymore now).

Now for your image, the blue (behind) is because of the image ratio (it should be a bit more rectangular like the one I am using).
So you can either:

• Crop your image to a better ratio
• Try with another image
• Update _index/scss in the .call-out check the "responsive" and update with something like:

    /* --- Responsive ---*/
    @media screen and (max-width: 730px) {
        background-size: auto 200%;
    }

or remove it entirely.

[yshrsmz]

thanks!

[yshrsmz]

I updated image with more rectangular one, but still having problem.
It looks like header image's width is depending on header text.
If you replace your header text with shorter one(such as <p>This is test header</p>), your image will not be displayed properly

I've attached an image to better explain the behavior. I just replaced header text with <p>test</p>.

[sylhare]

Oh that's interesting, I'll investigate ;)

[yshrsmz]

Let me correct my previous comment. it looks like header image's width is depending on the height of div#main. (Yes, this is what background-size: auto 150% means)

Since auto retains image's ratio, image cannot match the parent width if div#main does not have enough height,

[sylhare]

Hi, since I don't have a solution for a scaling slightly bigger header image, I'll let it on cover that should solve your problem.
Once I have a solution I will re-implement the feature

[sylhare]

I'll make it available only for short text, since it's not made to m=put as much text as I did. so I'm changing the _config.yml
It should be now 100% width on the page for smaller screen.
I'll merge the branch when ready.