Bug: Section Scales Down More Than Expected on Mobile

Question

I have one other small issue I can't seem to figure out. I have a section copied from the preview templates on the home page here:

http://justshare.ronkh.com/

Refer to the "Example Video" two-column section.

On desktop and tablet, this is what the section looks like:

https://imgur.com/a/c7ZTZMY

However on Mobile, the left image scales down more than expected, Rather than the two sections maintaining a similar height, the image shrinks down to a really small height.

Reference this: https://imgur.com/a/teUmlcI

Can you advise on why this section's height is so small on mobile? I would like it to maintain a similar height as the other column in this section.

Thank you.

SemiColonWeb · Accepted Answer

Hello,

The Common Height feature works only when they are side-by-side in the Grid. If they are on a different row, they have their own Height based on their content. Since the Image used is a Background Image and does not have any content, it displays small. However, this can be easily fixed by assigning a minimum height to the Image Container by adding a Height Utility Class: http://docs.semicolonweb.com/docs/utility-classes/heights/ . We suggest using the .min-vh-60 Class. Simply add this Class to the .col-lg-6 DIV which has the Image.

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Ron · Answer

That worked, thanks again! :) Still getting familiar with this theme, sorry.

Semicolon Web · Answer

Hello, Very Happy to Help! Do let us know if we can help you with anything else or if you find any further issues with Canvas.