Solving issues with BS5 and Gantry 5 UIKIT layouts (J4 PC4)

[dmlwebal]

'.row' fix for: Joomla 4, Phoca Cart 4, Gantry 5 UIKIT3 (Joomlead Particles)

I have Phoca Cart set up like this in Admin options

https://imgur.com/a/1UkSl51

I have been having some issues with the css-compiled bootstrap.css in Gantry5 and decided to fix it.

So, if a user is using Gantry5 and UIKIT Atom then this may help

the .row > * is where the problem lies, it sets width to 100% so UIKIT widths end up being ignored/overwritten

so, from here: [ROOT]media/gantry5/engines/nucleus/css-compiled

copy bootstrap5.css

edit with notepad++ or similar

From this (around line 26):

Code: Select all

.row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-top: var(--bs-gutter-y); }

to this

Code: Select all

.row > * { flex-shrink: 0; /*width: 100%;*/ max-width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-top: var(--bs-gutter-y); }

(it comments out width: 100%)

Then upload this edited file to

templates/[TEMPLATE-DIR]/custom/engine/css-compiled

You can make this directory if it does not exist already. It is a documented Gantry5 override

Hope that this helps someone else too

It *should* also work with UIKIT2 if you have the default Atom enabled in Gantry5

[Jan]

Hi, great, thank you for the guide.

Jan