Swimming to the Left

[Chris_Patchel]

Can anyone tell me why all my sections are swimming to the left in the Portrait Mobile view?

And also why the Fill:Cover grid feature doesn’t work on some of the images in the Portrait Mobile view?

---

Here is my site Read-Only link:

https://preview.webflow.com/preview/chriss-fabulous-project-aee151?utm_medium=preview_link&utm_source=designer&utm_content=chriss-fabulous-project-aee151&preview=9c9f3f23e843f686a66a8d3100953552&workflow=preview

[JimF (Jim Forbes)]

There are numerous elements - Red Patch and Green Patch for example - which are outside the width of the ViewPort width. Additionally there are a lot of margins set to % which may be the cause.

Screen shot shows they don’t all fit the width >>

[cyberdave (Dave S.)]

Hi @Chris_Patchel

I took a quick look, it appears your gradient overlay has some overflow, when I set this to overflow hidden it may help to resolve the issue:

Learn more about overflow hidden in the “Overflow: hidden”

I hope this helps

[Chris_Patchel]

How cow, that actually worked, cyberdave (though I don’t get why there’s an overflow). Thanks!

Any idea why the fourth grid isn’t containing the images properly?

[cyberdave (Dave S.)]

Hi @Chris_Patchel, thanks for your good question.

In the first three grids all the images in each grid are the same dimension.

In the fourth grid, the images are different sizes and different aspect ratios.

I would either upload images that are all the same size like in the first three grids, or you can set a fixed size in pixels on the lb link class with overflow set to hidden on the lb link: Webflow - 3D Try 2022-01-08...

After doing this, you can see the white space in each lb link that is caused by uneven image dimension: Webflow - 3D Try 2022-01-08...

Next, on the image c class set the image to be 100% width and 100% height and the Fit set to Cover: Webflow - 3D Try 2022-01-08...

This results in that 4th grid looking like this: Webflow - 3D Try 2022-01-08...

Note however since other grids are also using this lb link class, you might want to give separate classes to those other lightboxes on the page in different grids where the image dimensions are different, so that the different lightbox thumbnail has a different size, that is a design decision.

I hope this helps

[Chris_Patchel]

Yes, I can do that. But the whole point of the Fill:Cover option is to make that unnecessary, as seen in all the other views that are working correctly.

[cyberdave (Dave S.)]

Hi @Chris_Patchel,

When the parent element to the image has a height or width set to auto, then the images will resize according to their own aspect ratio resulting in different height images and appear uneven.

Currently the image class in that 4th grid is set to contain, so that will show the image at it’s own aspect ratio.

If you change the image class to Cover, there still will be no “cover” of the parent element because the parent element is not constrained, it has an auto height and width.

If you change the parent element though to have some constraint which makes the parent element a different aspect ration than the image, then the Fill:Cover will make the image behave like a background image in that respect and cover the whole parent element area with no white space.

Let me know if you have a question on that, here is an article on how that object fit is used to “squeeze” images in to areas that do not have same height and width: https://webflow.com/feature/object-fit-support

You can also set the parent element to 100% height and width and set the image class to Fill:cover to have the image fill the lb link with all images be the same size:

I hope this helps

[Chris_Patchel]

Thanks, cyberdave, for taking the time to explain that. I thought I finally got it, since everything looks good in the Designer now, but those same grid images are elongated when viewed on my cell phone. Also, the ‘width, height, and fit’ options all have slashes through them on the Base Breakpoint view now, so something’s wrong.

[cyberdave (Dave S.)]

Hi @Chris_Patchel, thanks for your reply.

The slashes just mean that on a lower viewport there is an override to the class you have set at a higher breakpoint.

Could you let me know what kind of device phone you are viewing the site?

[Chris_Patchel]

Thanks for that info. It’s an iphone SE (the smallest of the iphones).

[cyberdave (Dave S.)]

Hi @Chris_Patchel, thanks.

When the lightbox lb cover class has a height of 100%, there is still no constraint to the height and some of the images in the grid do not have the same height dimension.

To have all items be the same height on mobile portrait, I would add a fixed height in px instead of using 100%:

That results in:

I hope this helps, let me know if the issue still persists after making that change and then republishing the site.

When I check just in the browser on the published site and changing the height to 50px on iphone se, then I see the following on the iphone se:

The 100% height on the lb cover class caused the elongation on iphone se.

[Chris_Patchel]

Yes, that works. I don’t get why the portrait phone view is the lone outlier but I’m grateful for a fix.

Thanks again for your help. Much appreciated!

[cyberdave (Dave S.)]

Hi @Chris_Patchel, thanks for the update.

Well, one thing that is not helping too much is the 99vh font size applied to the grid heading 2 class:

That font size is also causing some overflow on the mobile portrait view, I might remove that style override on mobile portrait.

The overflow right now is hidden, so it is working, but the root cause of the overflow seems to be related to the font size override.

[Chris_Patchel]

That also worked! I zeroed out all the hidden type (I didn’t even know it was there) and set the parent lb link’ boxes back to 100% and it looks fine on my iphone now!

Thanks so much.