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.
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.
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.
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)