Need help with mobile version

Design help General
1

Hello everyone,
I am brand new to Webflow. I started designing my website this week and hit a roadblock with formatting the mobile version. Can anyone advise what was done incorrectly?

Your assistance is greatly appreciated.
https://preview.webflow.com/preview/gabriel-knight-agency-a1b9a8?utm_medium=preview_link&utm_source=designer&utm_content=gabriel-knight-agency-a1b9a8&preview=2f0e773f9f93f300afba5b8d63561b6b&workflow=preview

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

2

Welcome to the forum vraymond!

Could you elaborate further on what you mean with formatting the mobile version? Which specific element or section needs improvement?

I’m guessing you want to prevent the long height in the first section. If so, I’d recommend changing the 100% to Auto!

image
image1880×764 164 KB

3

Hi Rory- Notice the primary image is at the bottom. If you look at the desktop version vs the mobile version it’s totally not the same.

4

Example:
image

5

I’ll try to get you on the right path, but I’m afraid the issue lies in the base structure of how the section has been build up; which will take many steps and fiddling around to explain.

What may help you out is giving the image a position: absolute and making it stick to the bottom of the first relative parent element. This would be CF | 1140px wrapper 2.

image
image3803×1736 413 KB

Then give that wrapper a height 100% and a bottom padding of 80%

image
image1920×755 63.7 KB

Hope this helps!

7

I spoke too soon. I was able to get the mobile version updated but now the desktop version got affected.

image
image1268×657 66 KB

image
image462×684 67.8 KB

8

Im wondering if I should I just delete the component and add it again.

9

It might be best to use a back-up from when it worked, and then apply the changes i suggested on mobile landscape for example!