Streaming live at 10am (PST)

Overlap Problem

Hi there,

I have a problem getting the content to fit within the grid. I checked the template to see what setting I changed, but so far I haven’t found anything.

The content overlaps the section and flows out on mobile (320x100).

Any ideas on what could be the problem?


Here is my site Read-Only:

[1]: Read only link
[2]: Template link

HI @farid - can you please be a little more specific - what content is overlapping? are you talking about the “dot grid”? - best practice would be to provide specific div names of what is overlapping what - so we don’t waste time trying to figure out what exactly you need help with! That being said, I (as I am sure many others on this forum) would be happy to help with this!

1 Like

Hi @IVG, thanks for the response.

All of the content in the “container” div doesn’t stay in the div. The right side of content pushes out of the div (picture in OP).

How can I keep everything in the div “container” and aligned?

In the original template here, this didn’t happen, so I must have touched something.

It looks like it happens in the original too

Do you see how it’s centered in the original theme though? Mine isn’t centered and is shifted to the right.

Here’s pictures from my site and the theme site from my iPhone SE:

@IVG I just realized it was the Google reCaptcha that was causing the problem.

Do you have any suggestions on how to keep the recaptcha and size it accordingly to the “container” div?

you just removed the reCaptcha can you add it back so I can see how you were doing that… and I will have a look

1 Like

Thanks @IVG if it wasn’t for our chat I wouldn’t have even known it was the recaptcha. I just added it back.

Ok first, you can have the recaptcha in its own parent div, and that parent div can have an interaction (on hover on desktop and on tap on mobile) that will reveal it, otherwise it will be hidden not to mess with your sizing…
also, if you move the “dotted pattern” div inside the container div - it will be “absolutely” positioned in relation to its parent that is positioned - meaning the container div… also you can change the units to % so it will be sized as a percent of its parent and not of the viewport…

I hope I explain it clearly :slight_smile:

1 Like

Cool! Thanks for the all help @IVG.

I ended up putting the recaptcha in a div with a max width to 290px and it did the trick. The rest of the content doesn’t overlap anymore. The recaptcha is a bit off centered but not enough to ruin the design.

I am glad that it works for you - but try to make the recaptcha div 100% wide, and have a flex layout with centered children - this way the recaptcha will always be in the middle of that form…

Also, i thought you wanted to have the dotted pattern inside the container…?

1 Like

Thanks the flex change helped center the recaptcha. No, the dotted part wasn’t a concern to me. Everything looks good now.

1 Like