Design goes mess in Phone portrait

Hi,

I am designing a very simple site CMS and some elements in Phone Portrait goes out of position. WhenI resize the design for different devices, the paragraph item either shifts up or down, which I prefer to stick with the image.

Could you please advice? Here is the read only link - Please go to Investment page, Full wedding packages item.

https://preview.webflow.com/preview/the-good-wedding?preview=9205aa2e5610d92b08cd1ea43f33111b

Regards,
Kamal


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @kamalmostofi!

For the home page, you will have to make all of these elements display block.
(on mobile landscape viewport)

  • Flex Row Child
  • Flex parent child 2 columns
  • Flex parent
  • Flex column child
  • Flex parent child 4 columns

For the investment page, on the desktop viewport, you will have to do the same process
(make elements display block)

  • Flex parent

Then select this one:

Give it a subclass of “1”

And then a margin-top of 130px

After that you should be able to make the final adjustments yourself!
If you need any more help, do not hesitate!

Hi Donaldsv,
Many thanks for your response to my issue.

The home page is fine and flex boxes works as I expected. The issue is on the investment page, ‘Full wedding pacakge’ panel, the text below the image keeps shifting.

I tried your solution but it didn’t work.

Regards,
Kamal

Can you please post a screenshot of the issue?

Webflow%20-%20The%20Good%20Weddings%202018-06-17%2000-08-50iphone6

I uploaded desktop and phone 6 preview design. I don’t get this issue on other panels. I republished the project.

Thank you.

I think the easiest solution is to give a white wallpaper to your paragraph 6 on mobile portrait. I can’t be sure since the issue only appears on the published site.

Thank you - it did the trick to add the white ground to overcome the issue. :slight_smile:

1 Like