Getting weird wrapping on home page

Toolie

I'm getting a weird wrapping of the columns on my client's home page that I cannot seem to remedy. I have an 8+4 layout in the second row of my layout where I have a home-page image (8-width) and an Upcoming Events module (4-width).

I have swapped out the image, made the image smaller, and that seems to have no impact. For the right side, I've swapped out the types of modules and it doesn't seem to matter. When I see the Home page in preview in the Template Styles, the wrapping is correct on that home page. Also on that Home page are 3 Footer module positions that used to lay out correctly across the page, but now wrap with 2 in one row and the third below.

https://www.etxla.com

Equally baffling is the fact that the spacing (8+4) works fine with the Mainbody content and sidebar-r (right) on other pages.

https://www.etxla.com/sponsors

I don't recall whether this happened after a Joomla update or one of your updates, but the site definitely laid out correctly until just the last 2 weeks. Has anyone else seen this behavior??

saguaros

Toolie Hi

Could you share the Super admin account of your site so I can check the layout + module settings?

Toolie

This message is visible to Moderators only

hidden content

saguaros

Toolie I just tried to re-configure the "Responsive" tab for the Masthead section on your site and it works fine now.

Kindly check.

Toolie

OK saguaros, I have not had a positive result by setting "auto" on rows, so I've always explicitly set the number of columns. I see that it works here; in fact I had a similar wrapping problem below the Mainbody and setting "auto" on that solved the wrapping problem.

Other than that, I don't understand what is different than what I had before, can you explain?

saguaros

The issue was caused by the removal of the following global CSS rule:

*, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

This rule is required to ensure consistent box model calculations across all elements and pseudo-elements. After restoring it, the layout is rendering correctly again.