Streaming live at 10am (PST)

Design goes mess in Phone portrait


#1

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)


#2

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!


#3

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


#4

Can you please post a screenshot of the issue?


#5

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.


#6

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.


#7

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