Streaming live at 10am (PST)

Responsive Design on Mobile


#1

Hi Webflow Forum
I made a portfolio website for showing my design works that I have done before.

When I test it on different screens the responsive design for the Portfolio page (the home page) seems doesn't really fit into all screen; but other pages like About and Contact look okay on all devices all screens. Please see attached. I tried to open it in different device:

  • iphone 6s - looks good
  • Samsung - there is a huge gap in the right hand side.
  • Nexus 7 portrait - cannot find the hamburger menu at the first sight also there is a little gap. Need to zoom out and found out it actually doesn't fit the screen.
  • Nexus 7 landscape, doesn't fit automatically.

My content on the portfolio page is the Dynamic Content to fit all my projects in. I am not sure if it affects. For the mouse over effects I add a divBlock on top of it and made some hover effects

I think it might be because of the size of the mouse over effect on the top doesn't match with the project images? However The width and height I set it into a fix number. I tried to use % but when it shows on different device the cover doesn't adjust itself automatically.

Can anyone shed me some lights?

Many thanks
Dorothy


Here is my public share link: https://preview.webflow.com/preview/dorothylei?preview=74ac37de0bc1f87c45d5222be2cc9d19
(how to access public share link)


#2

Hello @dorothylei,

I think you are right and it might be the reason, that you set "project cover" size in pixels. Let's change settings of some elements and hope it will fix the situation.

Set "Thumbnail link" position: relative and "project cover" position: absolute. And ai the same time project cover size should be width: 100% and height: 100%.

With this settings, project cover will always have same size as thumbnail link.

Change this setting, publish the site and we will check. If the problem will still exist, then will dig deeper.


#3

Hi @sabanna

Thank you for your help. I know it's nearly there.
Here is the link for preview:
https://preview.webflow.com/preview/dorothylei?preview=74ac37de0bc1f87c45d5222be2cc9d19

When I test it again after following your instructions, it happens like this:

  • iPhone 6s - looks okay, the hamburger menu and the projects fits the screen.
  • Samsung galaxy 6 (see attached): the project covers suits the screen but the hamburger menu is hidden (like it is out of the screen), the user has to move the screen and find the menu.
  • Another phone (not sure the model) - there is still a gap next to the projects, on the right handside
  • Nexus 7 tablet - there is still a gap next to the projects, on the right handside

Is it because of the position of the hamburger menu? I set the navigation bar as a symbol in the header.

Samsung Galaxy 6:

Another phone:

Tablet Nexus 7 (my mum uses this):

Thank you again
Dorothy


#4

Hi @dorothylei

Next step will be fix layout settings.

1) In the dynamic list settings, change the layout type, please. From 4 columns to full width:

2) Set Dynamic item width to 25% for desktop and re-set float: left.
3) Set Dynamic item width to 33,3% for mobile-landscape and 50% for mobile-portrait.

Let me know about results :slightly_smiling:
Cheers,
Anna


#5

Hi @sabanna

Thanks for the guidelines, however the result is still the same.

For the android user they cannot see the hamburger menu when they land on the homepage.

https://preview.webflow.com/preview/dorothylei?preview=74ac37de0bc1f87c45d5222be2cc9d19

Any other settings I need to change?

Many thanks
Dorothy


#6

Hi again @dorothylei.

Now when we excluded all other reasons I was able to catch the last one: object that causes overflow and "shift" all content to the left side:

If moving this element out of screen width was done for a purpose, then you need to set overflow: hidden to its parent. If no - simply adjust the settings of this object so its would stay inside the body (screen width)

Regards,
Anna


#7

Hello @sabanna
It works now! Thank you so much for your patience and went through it with me all the way long.

And of course @cyberdave as well :slightly_smiling:

Best
Dorothy


#8

You are welcome :slightly_smiling: :slightly_smiling: :slightly_smiling:


#9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.