Unsemantic grid not working properly in tablet mode

Hi there,

I'm having a hard time loading the link you provided.

Can you double check?

Thanks!

Sorry, can you try again please?

Thanks.

If the screen is messed up when you first access the site, just click on a link and it should fix itself. I think this is a side effect of having access through a dynamic dns forwarding to my vm through my router.

Still no unfortunately.

This is what I'm seeing: https://www.screencast.com/t/h3wxs9em

Yes, I think that's a temporary screen bug due to it being routed through a dynamic dns to my vm (not the issue I need assistance with).

Just click on any menu link and it should fix itself.

Thanks.

This is what I get when clicking on menu items:
https://www.screencast.com/t/cGSnU9VuE0m

This could be a reason why the columns aren't working properly as well as it's not rendering properly.

Let me know if there are anything else I can do to see the problem :)

OK, thanks Leo. Definitely seems to be an issue reaching my machine as all looks fine when accessing directly through our network. I'll have to get back to you once I figure out why the machine isn't reachable.

Thanks.

Leo,

I changed the address and it seems to be working now (for me at least). Can you visit this new address please: http://homeaddress.ddns.net

Thanks.

Can you try this solution here?
https://generatepress.com/forums/topic/problem-with-section-color-size-in-tablet-layout/#post-551270

Thanks Leo. Tried it, but unfortunately doesn't seem to have helped. I left the code in so you can look at it.

Floated items with different heights can cause weirdness like this unfortunately.

Try adding this CSS:

.hot-items {
    display: flex;
    flex-wrap: wrap;
}

Depending on browser compatibility needs, you might want to run it through this tool: https://autoprefixer.github.io/

Thank you, that did it!

You're welcome :)