Hi
have created a website which looks great on desktop and iphone but not so good in Android.
Under Services if you look at the Building Surveying page on Android there is a large gap between the text and the Flexblock which is not there on an iphone. Any ideas why this should happen??
Here is my public share link: https://preview.webflow.com/preview/ec-project-ae8127?preview=a289f0e0187ae6e6fb42517abd424ec0
I see that you’ve used various positioning properties on your elements and have applied pixel values to position the text block and the flex-block, as you called it.
When designing for multiple browsers and devices, applying too many styling properties can be counter-effective. Pixel values aren’t fluid and will most likely produce different layouts on different devices.
I believe you can recreate your design without any position styles with ease.
Check out this tutorial about the box model:
Please, let me know if this is helpful or if you have any additional questions, I’m happy to help further.
Hi and thanks for your help. I am using the box model with sections and containers. I have had a play around and I find if I get rid of the Flexbox and replace it with an image it works fine on all platforms, but as soon as I put the Flexbox back again things start playing up.
Hi again @Derek_McNutt
Try to remove all position properties from your sections and containers. Let the page flow naturally. Your design doesn’t need any relative or absolute positioning. Also, you don’t need any of those large paddings.
Once, you remove all those properties, we can see if there’s still an issue with the design and find a way to resolve it.
Hi Anna
I have removed all padding from sections and containers. Everything is all over the place, and when you look at the mobile site the flexbox has disappeared altogether.
Hi again @Derek_McNutt
I see that you have also used floats and position on various elements. Can you please remove all layout settings from all elements in div block 3. Then, the document flow should be more natural.
At that point, you can add a columns element to container 2 and drag your image into column 1 and the text into column 2 and fix the styling and column layout to get the desired result.
That should fix the layout.
2 posts were split to a new topic: Issue with Maps. They go to full screen
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.