I have recently completed my first website using Webflow and I am trying to correct some issues. I would greatly appreciate any help with these. Here are the issues:
When viewed on my iPad (first generation).
Images Stretched: The icons in the “Small Websites. Great Care.” section are distorted, stretched long. This also happens with the two website images in the section the “Recent Work” section.
Images Above Nav Bar: When scrolling down the page the icons and text in the “Small Websites. Great Care.” section appear above the navigation bar. I have the nav bar set to a z index of 25.
Hero Image Cropped: The hero image does not scale when viewed in the landscape view but does (as I want it to) in the portrait view.
Nav Links Highlight Blue: The menu links highlight blue when the related section is reached
When viewed on my iPhone 5.
Images Above Nav Bar: When scrolling down the page the icons and text in the “Small Websites. Great Care.” section appear above the navigation bar when viewed in landscape. The website sample image do as well.
DON’T resize your images with pixel values, and DON’T resize your images for the main device, this makes no sense. Prepare your images at the exact right size you need them, don’t touch the values for the desktop. Then put some %ages values for the devices.
your navbar is (weirdly) a child of your Hero Image. So it’s useless to put a zindex there, it’s not on the same level than the section containing the icons. So remove your 25, put 25 for the Hero Image, and put 24 for the services section and it will work.
I see no difference in crop from the Tablet to mobile landscape device.
in the editor in edit mode scroll until a link is blue, select it, you’ll see a Current class to it. Edit the color, set it to what you like.
Thanks for helping me with the site issues. Well, I have fixed #2 and #4. I am not sure about the image sizes. I have re-uploaded them without scaling. I do check the box to use for HiDPI. This is correct, yes? The original images are twice the size and then they are scaled down.
The images still stretch greatly when viewed on my iPad. Is this some glitch with the first generation iPad? I will have to check it on a newer iPad.
I now have another problem that you might have a fix for. When I click the menu items the page will scroll to the section but not exactly at the start of that section. It stops just before. I am thinking that this has to do with my nav bar showing and hiding on scroll. The space it stops at looks like it is the same height of the nav bar. Can this be resolved?
For the scroll target, there is no offset we can set in Webflow so you’ll have to trick it… playing with margins or nesting sections to get the desired effect I guess.
Hi @stuzz, @vincent, see my video response below on the Sections and scrolling. Basic instruction is for you to add a section to your site below body, add the nav bar to the new section, and give the section a tag type of header: