photos are streched in the mobile theme

• 

  mrcompass · Member · Mar 23, 2015 at 12:25 pm

  • Copy link
  • Add topic to favorites

  hello Support Team,
  i write you to improve the website wordpress.com. I found a problem on the theme organic tube in the mobile version. If I go to the site mistercompass.com on my mobile phone and click on one of the cover photos the new page will appear. So far it is correct, but the cover photo is displayed in the new page again, but not in the original format. The photo is streched. Please contact me if you could confirm this problem. So what can i do? Can I change the format of the cover photo on the new page? Besides if I open the new page on PC, there the cover photo is cutted in the new page. That should not happen either or is this not changeable?

  Thanks a lot in advance and please contact me for further information.

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

• 

  jeremeylduvall · Member · Mar 23, 2015 at 7:52 pm

  • Copy link

  Hi!

  Here’s how the photo is displaying on my side on an iPhone 6 in landscape mode in Safari:

  http://d.pr/i/1gqy1

  It looks like that pretty closely matches the desktop version of the site. When I switch to portrait view, the sides of the photo are truncated a bit:

  http://d.pr/i/NRIX

  That’s due to the mobile responsiveness of the theme (the intended appearance). You’ll notice the same appearance in the theme demo. Is this the “stretching” you’re referring to?

• 

  mrcompass · Member · Mar 23, 2015 at 8:14 pm

  • Copy link

  Hey,

  thank you very much for your quick support. That is very pleasing.
  In landscape mode I have the same picture as you, that is cool.
  But the stretching seems not to be visible on your device. Maybe wordpress is better matched with OSX?. I use an HTC One M7 and I also tried it with another smartphone with android and the stretching appears. I have a screenshot attached. May you be able to fix it?
  https://mistercompass.files.wordpress.com/2015/03/screenshot_2015-03-23-21-00-08.png
  Thanks

• 

  jeremeylduvall · Member · Mar 24, 2015 at 12:01 am

  • Copy link

  Thanks for the screenshot! That helps a ton. I checked out the appearance of your site in a HTC One X (which appears to have the same size screen as the HTC One (M7)). Here’s how it appeared on my side:

  http://d.pr/i/L1vH

  While this isn’t foolproof (I’m using a browser emulator), it seems like we should be seeing similar things. What browser are you using on your HTC One M7? Just to be sure, there isn’t a zoom going on in the browser is there?

• 

  mrcompass · Member · Mar 24, 2015 at 12:28 pm

  • Copy link

  okay, i just tried different browsers on my HTC now. The stretching appears by the dolphin browser which i use regularly. If I use chrome or the internet explorer the stretching is not visible. But on a Huawai Ascend P6 (android) the stretching appears with the normal internet explorer, too. That is confusing.. but I think you are right, that the problem is based on the browser..

• 

  jeremeylduvall · Member · Mar 24, 2015 at 5:29 pm

  • Copy link

  I’ll keep trying to reproduce the issue! I’m glad it’s working correctly on your HTC Now with Chrome. Is your Huawai Ascend P6 running an older operating system/browser by chance?

• 

  mrcompass · Member · Mar 24, 2015 at 5:40 pm

  • Copy link

  oh yes, it is running on an older operating system/browser. I think there is the problem.

• 

  mrcompass · Member · Mar 24, 2015 at 5:52 pm

  • Copy link

  thank you so much for taking time. Please tell me if you can reproduce it or not. First I thought that the stretching appears on every mobile device but apparently only on some old devices. I can live with it. Thanks for that.

• 

  mrcompass · Member · Mar 24, 2015 at 6:38 pm

  • Copy link

  There is another problem which you have mentioned on the beginning. It is about the truncated photo of the cover photo on the next page. It is only in fullscreen mode and in landscape mode on mobile device how you already said. I have two screenshots attached. At the red lines the picture will be cutted. Is it possible to move the area of the truncated part, so that my hair is shown on the photo? Or is it not changeable because the photo format is adjusted to change automatically with the size of margin?
  https://mistercompass.files.wordpress.com/2015/03/screenshot-2015-03-24-19-27-15.png
  

• 

  jeremeylduvall · Member · Mar 24, 2015 at 10:52 pm

  • Copy link

  Please tell me if you can reproduce it or not. First I thought that the stretching appears on every mobile device but apparently only on some old devices. I can live with it.

  Unfortunately, I haven’t been able to reproduce yet. I’m still in browser emulators, but I tried with an HTC One M8 using KitKat 4.4, and the page appeared the same:

  http://d.pr/i/aJww

  Do you know what version of the operating system these phones are running?

  Is it possible to move the area of the truncated part, so that my hair is shown on the photo? Or is it not changeable because the photo format is adjusted to change automatically with the size of margin?

  This might be possible with some custom CSS. Right now, it looks like all of the photos are truncated to a certain height and the aspect ratio is maintained. If you would like to try the custom CSS workaround, could you post in the custom CSS forum?

  https://en.forums.wordpress.com/forum/css-customization

  We have some gurus in that forum that will be able to help you with this much better than I!

• 

  mrcompass · Member · Mar 26, 2015 at 2:34 pm

  • Copy link

  at the moment I only know the operating system of the HTC One M7:

  Android version: 5.0.2
  HTC Sense Version: 6.0
  Software-Nummer: 7.19.401.2

  Dolphin browser: V11.4.3

  thank you very much, i posted it in the custom CSS forum.

• 

  jeremeylduvall · Member · Mar 26, 2015 at 7:33 pm

  • Copy link

  Thanks for the additional info. Out of curiosity, on the same phone when viewing the site in a traditional browser like Chrome, are you able to replicate the issue? I’m wondering if this has to do with the Dolphin browser.

• 

  mrcompass · Member · Mar 31, 2015 at 12:43 pm

  • Copy link

  i tried it, but in chrome it is not stretched…neither in the normal internet explorer… In the dolphin browser it is still stretched. The stretching is only on a view posts. It appears at the following posts: ABOUT, BLUE STRIPES and STAN SMITH :D. I give up. It is not that bad! Thanks for helping.
  But if you want some more work, i have another issue:
  I like it that the cubic theme is adapted to the mobile device. But the logo “MR COMPASS” at the top of the site should be centered like in the desktop version (see the first screenshot attached). I have minimized the logo with CSS, so that the menu button on the upper right corner is cubic. That is important and the logo ist in the middle of the line in opposite to the mobile version (see second screenshot), you know what i mean?
  CSS:
  .site-branding {
  float: left;
  margin-bottom: 0;
  margin-top: 0;
  }

  .site-logo-link .site-logo {
  display: block;
  max-height: 70px;
  }

  1. https://mistercompass.files.wordpress.com/2015/03/screenshot-2015-03-31-14-36-53.png
  2. https://mistercompass.files.wordpress.com/2015/03/screenshot-2015-03-31-14-40-46.png

• 

  jeremeylduvall · Member · Mar 31, 2015 at 1:54 pm

  • Copy link

  Hi!

  Can you give this a try?

  @media only screen and (max-width: 480px) {
  	.site-branding {
  	padding-top: 15px;
  	}
  }

  That should fix up the vertical alignment on mobile devices.

• 

  mrcompass · Member · Mar 31, 2015 at 2:35 pm

  • Copy link

  yeah, cool. That helps. Thank you so much :)

• 

  jeremeylduvall · Member · Mar 31, 2015 at 8:18 pm

  • Copy link

  No problem!