Overlapping colums - Joomla 5

baud

After upgrading to Joomla 5 some colums on the front page are overlapping on smaller screens/browser windows. Since I didnt change the code or css, Im not sure what went wrong.

I`m talking about the three colums in the middle of the front page.

Any advice?

saguaros

baud Hi

hat section belongs to the Spotlight block on the homepage.

It looks like the Spotlight is currently configured to display 4 columns (4 module positions). Since only 3 module positions are in use, the fourth column remains empty, leaving the white space on the right and pushing the other three columns to the left.

You can adjust this by going to: Template → Layout Settings → Responsive Layout

Then configure the Spotlight section as shown in the screenshot below:

If you need any assistance with this, feel free to share your Super Administrator account, and I'll be happy to help.

Regards,
Hien

baud

When I go to template layout, instead of the layout positions, I actually see the content of my website. Let me share the login credentials.

Thank you!

saguaros

baud It's weird issue, could I take a backup of your site with Akeeba backup and debug in my local?

baud

saguaros

sure

saguaros

I found that the System – Privacy Consent plugin was causing this issue.

I temporarily disabled the plugin and configured the template layout to display three positions in the Spotlight section, as mentioned above.

I then re-enabled the plugin.

Please review it and let me know if you need any further assistance.

baud

Thank you. You were a big help.

There is only one small problem. There is a scrollbar depending on the resolution of the screen. There was no scrollbar in the past.

I tried to get rid of it with "overflow: visible !important;" but without success.

saguaros

You can try with this custom CSS:

.acm-container-tabs .tab-content {
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none; 
}

baud

Yes, now the scrollbar is gone. However, if the column doesn`t seem to be responsive. When I make the browser window smaller, the text is overlapped by the red column "Sommerfest".

saguaros

I just added this custom CSS rule:

.acm-container-tabs .item-list-view p.mod-articles-category-introtext,
.acm-container-tabs .item-list-view li h3 {
    word-wrap: break-word;
}

Kindly check.

baud

Yes, the overlap is gone now. But in general, this part of the site doesn`t seem to be responsive any longer. When I open it up on my phone. It does not display the columns one below the other.

saguaros

baud Kindly check the responsive layout settings in my above post: https://www.joomlart.com/forums/d/52819-overlapping-colums-joomla-5/2

Small or extra screen and setup the columns as you wish.

baud

I tried that but I still have the problem that I cannot make any changes here since it just shows me a weirdly layouted preview of the website and not the individual module position that you can resize.

saguaros

baud Please check my above post again, try to disable System – Privacy Consent plugin >> setup the layout as you wish >> then enable the plugin again.

baud

Sorry, for the misunderstanding. I thought you already had it turned off so I thought that trick didn`t work. Thanks for your help, it worked now!

saguaros

Let me know if you need any further assistance.