Streaming live at 10am (PST)

Horizontal Tablet Display Issue


#1

Hey all,
I’m kinda new here so bear with me. I’m designing a website for a client and having an issue with one portion displaying correctly. On all the device previews on webflow, I cannot replicate the issue (even when dragging the display window to the max and min size of each device preview). However, my client found this issue using an iPad horizontally, specifically for the banner on the homepage entitled “technical lectures.” I set the picture to cover the area, but cannot get it fully display on horizontal tablets, thus giving me that purple band (see screencap of error).

Also, my client loves the “scrolling” effect that occurs on each of those banner category images (setting the image to fixed and having it “reveal” as the page moves); he wanted to know if its possible to get that effect on tablets as well (a true tablet aficionado might I add), but loading it on any mobile device just provides a static image, so I’m just verifying if this possible or not?

Thanks for any and all help!:slightly_smiling_face:


Here is my site Read-Only: LINK


#2

Hey,

Mind sharing the website link also :slight_smile:

Looking at the designer, the only difference between these elements is that you have repeat image vertical on that section in question. So I’d suggest change that so there is no repeat like the other ones.


#3

Hi @samholly

An astronomical welcome to the Webflow Community (see what I did there?) :smiley: and a great start on your site too, you’ve got stuck right in there.

When testing for various screen sizes to see potential layout issues, a good way is to visit your published site (this way is on Chrome) right click and choose, “Inspect Element” In the right hand corner and choose the mobile icon. You can then see the various sizes of devices and how they are likely to behave by appearance. You can do this on Safari too with developer tools enabled.

CloudApp

For the scrolling (parallax) effect, the default “fixed” setting is only displayed on desktop, however you create some really awesome scrolling effects with the use of interactions, and in my opinion, is much nicer and smoother than using the fixed setting.

Here is a great parallax tutorial for you to get you started:

And this shows you what is possible with Interactions 2.0 in Webflow…

Any questions… the community is here :smiley: