Hi Everyone,
This is a call out for help as I enter into the final stage of fine tuning, QA, Responsiveness testing, etc. I am struggling with the following issues, and have hit a wall as to how to fix them :-/
a) Responsive Design: I styled as I went, each section started in Desktop, and I would then style and scale images, text, objects, etc for each viewport. Most things look great in the Preview… Unfortunately, Styling in the Designer/Preview does not necessarily mean that you’ll get what you see when actually tested on Tablet or Mobile (Testing on Apple devices, but I’m sure the same issues will come up on Android/Windows devices).
I need advice (I’d actually like to learn best practices and gain some practical understanding here) on how to have various sections, especially those with dynamic content, that use flexbox to scale to smaller dimensions, how to place fixed objects in a place and successfully keep them there/have them appear where intended on device, how to keep objects centered to the screen, etc. It’s not a lot of work, I think fresh eyes would know immediately what the issue is.
b) Gallery Overlays causing mysterious spacing issues. I’m sure this is a parent/child setting congruency issue, I just can seem to deduce what’s going on. I can explain more, but here’s an image of the gallery, where I’ve set a 2px 1px 1px 1px margin around the Gallery Wrapper just to see what’s going on, and I’ll point out the faint Red to Clear Gradient in the Overlay is protruding by 1-2 pixels on the left and right of each image. This is confusing me to no end
c) Linking. I’ve employed a tab structure in a page, so that users can flip through related content on a single page. I’m struggling to find any difinitive advice or word on the ability to link - say, from the main Nav Drowndown menu - to any one of those specific tabs, so that the user clicking on the FAQ from the menu will be brought to the FAQ tab on the INFO page. Same for all the other tabs. Is there a clever way to set an ID for in-page-linking to a specific object or Section within a tab and use that as the link? Can that be same goal be achieved by some other crafty, clever hack?
Here’s the site links:
Landing Page: http://soulplay.webflow.io/
Info Page (with the Tabs): http://soulplay.webflow.io/info-sub-pages/about
The Preview Link: https://preview.webflow.com/preview/soulplay?preview=4d2d970b11d3cf1bc817ca0fc546c0c2
There are other issues I’m challenged by, but any help with these specific matters would be deeply appreciated.
Sincerely,
- Derek
PS: @Waldo, @PixelGeek, If you could possibly lend me your expertise, please?
Here is my public share link: LINK
(how to access public share link)