Streaming live at 10am (PST)

Need help with style rendering on iPad


#1

I have finalized the desktop version of the website I am working on:

https://preview.webflow.com/preview/joulestudio?preview=62297ad0886176c0beaef1153b364811

However, my “what we do” and “how we do it” pages are all funky when I check them out on an iPad 2.

Does anybody can advise me on what coud be done to make this work…

Many thanks

GT


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi @Gato

Can you define ‘funky’ for us in more detail :man_dancing:t2::dancer:t2: - maybe some screenshots - but also the published link will be useful so we can see for ourselves.

As you move down the breakpoints it’s generally best to go for a % or VH/VW approach to sizing - as set numbers of pixels will cause problems…


#3

Hi @StuM

Thank you for your message and for offering your help.

here is the link to the project again:

First issue:

Here is an ipad screen grap where you can see the text is stuck to the top of the image:

However in the designer tool, it is showing all fine (centered in the middle of the page)

Second issue. On the “What we do” (advertising + Cinema/tv) and the "how we do it page), I have some really nice animations. All beautiful on the desktop version but they don’t look right on ipad.

Here are more screen shots (red circle is where the part of the info appear. Red line is where it should appear):

You can view how it should work here:

http://joulestudio.webflow.io/what-we-do-cinema-tv

Thank for your help again. Let me know if you need more info.

GT


#4

Hi @Gato

On the first issue - can you try centering using Flexbox for Container 36 - publishing - and seeing if that solves it…


#5

Hi @StuM

No…

Any suggestion for 2nd issue?

Or could you advise on who I could reach out for help?

Many thanks.

Gato


#6

Hi @Gato

If you can give it a couple more days there may be more free advice from other users here…sorry i’m a little short on time right now to delve deeper!

We can also move the post to the ‘Freelance’ category where you can ask for paid help…let me know.

Or you can contact a verified expert at https://experts.webflow.com/ or try the independant https://www.usesixty.com/webflow (i’ve not used either - just signposting)

Hope that gives you some options


#7

Hi @Gato, you mentioned: "You can view how it should work here:

http://joulestudio.webflow.io/what-we-do-cinema-tv"

What is the urls for the pages that are not rendering as you expect on ipad? Here is what I see for the /what-we-do page in the designer:

And then on the published site:

Also, what version of iOS on the iPad are you running?

On Issue #2, here is what I see in designer:

and what I see in the published site:

Thanks in advance


#8

Hi @cyberdave

I have now fixed most of my big issues. The only one I don’t get is:

#ISSUE 1
Page “who we are”: text box on the last image does not center on ipad the way it does on desktop version.

Screen grab from designer tool (or how I would like it to look):

Ipad screen grab (how it is looking once checked from an ipad):
946d5f1f8c949f8884fbc55f2aa7b20d92699ca7_1_375x500

The ipad I am using is an IPAD2 (IOS 9.3.5).

Thank you again for all your help with this.

Have a good Sunday.

Gato

https://preview.webflow.com/preview/joulestudio?preview=62297ad0886176c0beaef1153b3648113

http://joulestudio.webflow.io/


#9

@nita sorry to ask for your help again. but is there any chance you could help me with this last part of this post. Just above.

The issue is with on the iPad. I can’t feature out the setting for the text box…

Thank you again


#10

Hi @Gato,

I’m not able to reproduce this on my end but there is a known bug about how Safari and IOs devices render Flexbox.

You can either do one of the following options:

(1) Redo this Flex element on Safari and the styles should cascade down to smaller IOs devices and fix this issue

(2) Instead of Flexbox, use a combo of absolute positioning and transforms:

Hope this helps :wink: