Hi guys,
I just finished designing my first site and was mortified to see what it looks like on other devices…
When looking at my website in different formats (iPad, mobile) there are major issues in some of the most central design elements of my website.
First, as they are hover on elements, they look like a mess in these formats. Any way to change hover interactions to tapping interactions on mobile?
Second, the layout seems completely messed up - divs with images are stacked on top of each other, instead of piling up in a row.
Third - some of the section margins and paddings cut up into the section.
Am I missing anything crucial in the initial construction phase that makes this happen?
I realize I might have screwed up royally, I’m new to web design and to using webflow…
Any help that could lead me toward tackling this would be super appreciated.
Can you share a link to your site and the share link to the designer as well. Without being able to see an example of what’s wrong, it’s going to be difficult to help.
Yes you definitely have an issue there with the mobile sizes, but nothing that you can’t sort!
When you start and you make changes to desktop, it changes all the sizes below (cascading).
So if you change the mobile version, it won’t affect the desktop or iPad version. As jdesign said, upload your read only link and you should get plenty of help!
I did start going back to fix the easy things like padding and line height but the major issue still is, what to do with all those hover on elements and pop up modals.
@Tal_Mohr Looking at the share link, I’m seeing a few things that probably need adjustment. It looks like the positioning of some sections is set to absolute and might be creating issues. Do you have a sketch or sample of what you want the layout to look like? To keep your sections from overlapping I’d recommend changing the position or reorganizing your div structure using relative position when possible and absolute only when necessary for the design.
Hi,
Thanks for your response!
I do not have a sketch of the outline, but basically all I need is the sections to follow one another with decent padding, nothing complicated. I think some of the absolute positions may have been a result of initially using a template that I later didn’t want to screw up by changing existing positions…
I’m hoping the positioning and sizing part is easily fixed, and am most concerned about how to make all the hover elements clickable, and have them arranged in a reasonable manner in the mobile version. Any ideas on how to make that happen would be super helpful.
@Tal_Mohr Did you add flexbox to that section with the hover elements? My suggestion would be to work back through that. When using flexbox it’s generally a good idea to have an outer wrapper to work with and apply Flexbox to. I’ve worked with Flexbox but used my own divs inside I assume they will work with columns but it might complicate the layout.
I know that’s probably not the answer you are looking for…it might be easier to quickly rebuild that section.
