Website on smaller devices => pictures do not adapt !??

• 

  beneebabiche · Member · Feb 23, 2017 at 2:55 pm

  • Copy link
  • Add topic to favorites

  Hi there!

  Whenever someone views my website on a smaller device such as a phone or tablet, it cuts off the important parts of my images and leaves a big white space underneath like this :
  https://cloudup.com/cflL9Rqrk1S

  I’d like the image to continue taking up the entire screen, and crop differently according to the device (as it does perfectly in preview mode : https://benedictelelaycom.files.wordpress.com/2017/02/captureaccueilportable.png).

  Although, I don’t want to use the mobile theme (which is too different from Harmonic)

  Can someone help me with that code? Thank you!

  The blog I need help with is: (visible only to logged in users)

• 

  staff-loquaciousloon · Staff · Feb 24, 2017 at 6:06 pm

  • Copy link

  Hi ciebeneelelay!

  It looks like part of the problem is that ther isn’t any text displayed (the tagline would be displayed there if you used one) to give that panel the height it needs to show the full image. Then the lack of additional panels also becomes a factor.

  Since your home page is a single panel with no text at all, try using this CSS. It should do the trick:

  .bcg {
      min-height: 100vh;
      background-position: center;
  }

  Let me know how it goes!

• 

  beneebabiche · Member · Feb 28, 2017 at 9:44 am

  • Copy link

  Hi Chad1008 !

  Thank you for your answer. I tried this CSS unfortunately it still doesn’t work.
  The background picture is not ill-cropped but it still doesn’t adjust to the smaller phone’screen.
  See : https://benedictelelaycom.files.wordpress.com/2017/02/screenshot_2017-02-28-10-36-57.png

  But thank you again !

• 

  staff-loquaciousloon · Staff · Feb 28, 2017 at 3:17 pm

  • Copy link

  Interesting, what mobile browser are you using?

  When I open your site in Chrome, the image resizes to fill the screen:
  https://cloudup.com/czXmT-zv1KY

• 

  beneebabiche · Member · Feb 28, 2017 at 3:30 pm

  • Copy link

  Indeed ! It works perfectly on Chrome but not on the standard Web browser on android

• 

  dave2swords · Member · Feb 28, 2017 at 4:01 pm

  • Copy link

  Hi ciebeneelelay!
  I am curious – have you tried it on the default browser on a phone different from the one you are seeing this on? It might be the browser on just that particular flavor of Android doesn’t like something in that theme. Does it also show up like this on Iphones?

  wondering..
  dave

• 

  beneebabiche · Member · Feb 28, 2017 at 4:14 pm

  • Copy link

  Hiu Dave2swords,

  Yes it shows like this on Iphone as well

• 

  staff-loquaciousloon · Staff · Mar 1, 2017 at 3:00 pm

  • Copy link

  What version of Android are you seeing this on? What iOS version is the iPhone you’re testing? If it’s an older version, it may not support some modern CSS styles.