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

Phoca Cart - complex e-commerce extension
User avatar
dmlwebal
Phoca Professional
Phoca Professional
Posts: 238
Joined: 18 Sep 2019, 12:49

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

Post by 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

Tags:
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

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

Post by Jan »

Hi, great, thank you for the guide.

Jan
If you find Phoca extensions useful, please support the project
Post Reply