I am designing my first site through webflow. So…kind of a newbie here. I started doing my first page and here is the problem I am facing!! everything looks perfect in the preview mode in all the devices…but once I publish it and view it in my iPhone se / iPhone 10/etc …my layouts completely messed up… In my iPad …vertical mode seems fine but not the horizontal!.. I have used grid as a background… In my desktop everything works fine even after publishing… but once I see it in mobile view …the grids are completely compressed behind…and the text is all on top of each other… Please help!!! I am still not able to figure it out!!!
When you look at the published link in the actual mobile… both the vertical and landscape… the grid in the background is totally compressed. In the designer mobile view…It looks fine though…
I don’t have a problem for Desktop and IPad
@Nicole_Klaver… Ok here is what I figured. The problem happens when I add an interaction to the contact button. When I remove it…The background grid is still compressed but at least it is fixed and covers the whole screen in the mobile view.
1- I don’t know how to have the same uncompressed grid as I see in the designer view even after I remove the interaction while the screen is fixed and covers the whole area.
2- and also how to at least get the fixed background screen(still compressed if I don’t have the choice) with the interaction on
3- Issue. when view in landscape mode in an iPhone X and not on any other phones(iPhone se etc)…the instagram word and also the title “photographer/filmmaker…etc” is cut off. It seems like a bug.
Hello I’m sorry - I am struggling to understand what the final outcome is supposed to be like. When you speak about it being compressed, do you mean it is being shrunk/made smaller?
Please see the screenshot and let me know if this is more or less how you’re wanting it to look
Also - when I looked on my iPhone (portrait and landscape) I noticed that ‘Instagram’ was being cropped. You need to double-check that you haven’t made the height of the text div blocks too small.
Something to note Because I have an iPhone XS Max - it picks up desktop view in landscape as the size of the screen is bigger than some other phones. It was something I figured out a while ago when I couldn’t understand why what I designed on the mobile landscape wasn’t showing up correctly on my phone.
Once I publish without the interaction on the contact button. Without any interactions …
The background grid which I see in the mobile is like this( shrunk height wise …if you compare it from my previous reply). The two pictures which I am uploading are the same. It is a result of taking a screenshots at different moments while scrolling. If you notice the background grid and the menu is fixed…Only the text scrolls.
And when I add interactions to the contact button. The background grid scrolls with the text, even though the positioning is fixed. And it doesn’t fill up the whole area. It is squeezed even more and ends half way even before the text is over ( I have pointed it out with an arrow)… Here it is.
And the other issue which I was talking about was in the iPhone X landscape view…is the text getting cut off. Here is a picture of what is happening. I have checked the height of the div block. It has enough space…so normally it can’t get cut. I don’t understand how to correct this as well.
Well @Nicole_Klaver … after several tries… I managed to fix the iPhone X issue. The changes should NOT be done in the landscape view in the designer area but the tablet iPad view. As from iPhone X landscape view somehow detects this as an iPad. If anyone comes across this problem…here is the solution!! It worked for me at least.
As for the shrunken grid background and the grid not being fixed anymore after adding interactions only in the tablet and mobile view…still trying to figure out…in case @cyberdave/ @Vincent / @dram@sabanna@PixelGeek or anyone has a solution to this I d be happy to take it!! As 50% of my website will be based on Grid backgrounds…I d like to find a real solution before I go ahead. And thank you again @Nicole_Klaver for trying to help!! Cheers and Hi to everyone mentioned
Please could you share the Read-Only link again. I cannot seem to access it.
