responsivity problems

[Franzi Kreis]

Hello Bill,

I checked the theme on several devices now. There are some problems with the responsivity.
It works very well on Windows 7 (Notebook) and on iPad Mini.

Problems:

– iPhone 5 and 5c: crosses don’t appear, homeblocks are cut, homeblock-caption is cut
– Mac Book Pro: Plus and homeblock-caption sliding away
– Samsung tablet with Android System: navigation-line of browser is hiding the plus

I attached some screenshots.

All the best, have a nice evening and thank you for your help:
Franzi

Attachments:

1. 

   android.jpg
   

2. 

   iphone.png
   

3. 

   iphone3.png
   

4. 

   macbook.jpg
   

[Bill Robbins]

Hello Franzi,

Let’s see if we can help you out here. On smaller mobile devices the arrows are hidden, but the lightbox is touch enabled, so they are not necessary. You can swipe between them instead of clicking.

You can adjust the amount of time before the captions and arrows disappear on a desktop. In the Theme Options page, on the Advanced tab there is an option there for the Ligthbox Navigation Delay which sets how long before they hide. You can set a really large number there (it’s in milliseconds) to keep them from going way. You could try 50000 which would be 50 seconds before hiding as an example. It’s unlikely someone would view an image for that long without interacting.

Depending on the aspect ratio of the device being used to view your site, you will have some cropping on the top/bottom or left/right of your main home block image. That is a result of the image completely filling the background without skewing. If you’d like to make sure the entire image is always visible, you can find instructions on this post: https://support.organizedthemes.com/forums/topic/selfie-on-ipad/ but that will let the background image be visible around the image so there is a tradeoff.

Hope that helps out. Let me know if I can help,
Bill

[Franzi Kreis]

Hello Bill,

many thanks for the response.

Maybe my question wasn’t precise enough, sorry for that. I try to describe it better: the problem doesn’t appear in the galleries. Those work very well with touchscreens of mobile devices and also the pictures are shown in the right aspect-ratio.
If not viewed with a mobile device the arrows appear perfect and I also found the function for changing the navagation-delay.

The described problem appears by viewing the homeblocks. My screenshots show single homeblocks viewed with the described devices: the “+” doesn’t appear on half of the blocks so that some of the galleries even can’t be opened.
I can understand that the image is always cropped a little bit depending on the aspect-ratio of the device, the problem is: the pictures aren’t cut a little bit, they are zoomed in that for example only a part of the persons face is visible instead of the whole person. Maybe you can compare my screenshots to my webpage to see the difference.

Thank’s again and have a nice day,
Franzi

[Bill Robbins]

Sorry for misunderstanding there. I believe I can help you out. The plus sign to open up the lightbox is positioned relative to the content of that home block (the text area). So if the text area ends up being taller than the window, then the open button can be pushed out of view.

I noticed that on some of the home blocks, there are spaces that have been used to move the text down inside the home blocks. Let’s try this instead. Remove the blocks. We can then set the text to align to the bottom instead of the middle. This is how to do that:

1. Go to the Theme Options page and select the Advanced tab.
2. Scroll down to the Custom CSS box and paste this:

   
   .window .content-area {
   	vertical-align: bottom;
   }
   

3. Update your settings.

See if that won’t help out with the mobile situation and your button. Let me know if that doesn’t do the trick.

Thanks,
Bill

[Franzi Kreis]

Hello Bill,

oh wow, thank you! It worked out with changing the text – the pictures are in the right place now. Thank you!

Only one problem left:
If I view the site with iphone 5 the iphone-navigation-line appears as soon as I try to klick on the “+” and the “+” is no more visible.
Another little thing: there is still one single homeblock left that doesn’t show up the “+” at all.
– I attached screenshots of both problems.

Thank you very much!
All the best,
Franzi.

Attachments:

1. 

   screenshot3.jpg
   

2. 

   screenshot4.jpg
   

[Bill Robbins]

Yeah. I’m glad we’re making progress. It looks like the chiemsee reggae [2013] block has some spaces and paragraphs below the text. You’ll want to take those out so they don’t move the plus sign out of the screen.

Also on my iPhone 5s, the people’s + sign is visible, but it is hidden by the navigation bar at the bottom until I move it (see attached screenshot).

I’ll take a look today about making the plus sign positioned relative to something other than the content spot to see if that works out better here.

Thanks,
bill

[Franzi Kreis]

Hi Bill,

it worked out with ‘chiemsee Reggae [2013]’ now – thank you and sorry for not checking before.

Great that you have a look at the thing with the iPhone-navigation-line.

Have a nice day,
Franzi.

[Bill Robbins]

Glad to hear that worked out Franzi. If you need anything else, just let me know.

Enjoy your day too 🙂

[Author]

Posts