search

klugjo / hexo-theme-clean-blog

Hexo implementation of Clean Blog http://blackrockdigital.github.io/startbootstrap-clean-blog/index.html
MIT License
401 stars 129 forks source link

Change background-image to scale height/width, no tiling, attempt to … #30

Closed breitenb closed 6 years ago

breitenb commented 7 years ago

I'm trying to tweak the header image styling so that my banner looks passable on mobile devices as well as with a desktop. This works well for my banner. I guess mileage may vary. :o Thoughts?

klugjo commented 7 years ago

I don't really agree with these changes. You are overriding background-size: cover in the .ejs file that's really bad

By mobile do you mean iOS ?

Can you find another solution ? Have a look at http://codepen.io/j_holtslander/pen/RPOJVj and see how you can adapt it.

Also can you let me know if http://blackrockdigital.github.io/startbootstrap-clean-blog/index.html displays properly on the device you are testing with

breitenb commented 7 years ago

My phone is an iPhone 6+ running Chrome. The demo URL indicated has the same problem, which is that the banner is truncated (the ends are cut off) instead of being scaled. It probably is not a "problem" but rather intended behavior -- it just doesn't work with my banner image.

The simplest thing is probably for me to redesign the banner so that it fits properly on mobile and desktop, but hey, I'm not really a graphics guy. :) On the plus side, I finally learned how to use Chrome developer tools to edit the CSS in a live page. :) Thanks to that, I do know how big the banner wants to be on the different mobile options -- although the banner is smaller on the other pages and biggest on the clean-blog main index.

Thanks for the ideas. I guess we can just table this PR for now...

klugjo commented 7 years ago

I see. It seems alright on my iphone 5S.

Could you create an issue instead and I will fix it ?

Right now, I think your PR might have implications for other platforms as well

Thanks for reporting :)

breitenb commented 7 years ago

Since the example template looks the same, it probably makes more sense for me to fix the image anyway? Thanks.

klugjo commented 7 years ago

If that solves it for you yes