CE Phoenix Cart Forum

I'm trying to remove the borders from around the Pi modules.

I've tried using border-0, inline CSS and .pi-model {border-style: none;} in user.css with no avail.

I've also cleared cache.

Thank you.

Use Dev Tools to identify the element that has the border set - https://phoenixcart.org/phoenixcartwiki ... and_Colour

So, on a clean 1.0.8.21 with Modules>Layout>Model installed and using Chrome browser, go to the store side product_info page, Right Click on the Element (the Module), then Click on Inspect in the menu to open the Dev Tools panel.

The Dev Tools panel opens with the Element already selected.
See the upper panel with Elements highlighted blue. This lists all the Elements on the page. In this case, an Element is already selected and is also highlighted blue -
<li class="list-group-item d-flex justify-content-between align-items-center">
See the lower panel with Styles highlighted blue. This lists all the Styles applied to the selected Element.
(Click on any Element in the upper panel and the Styles applied to that Element will show in the lower panel.)
Scroll down the lower panel to see all the Styles applied to the selected Element.
It can be seen that border: 1px solid rgba(0,0,0,.125); is applied to the list-group-item Class. That Class is applied to the <li> Element.
So, in this case, it can be seen that the border Style sets the border so to remove the border, the border Style must be changed.
One feature of Dev Tools is the ability to experiment, test and see the results of changes to Style before changes are made to server files.
At the top of the lower panel, an empty element . style { } input can be seen.
Click the empty input to input Style(s). In this case, input border (the : is already there) then click Tab on the keyboard, a dropdown menu list appears where none is one of the options, select it. (the ; is already there).
The Style will apply automatically and the border around the element disappears! Yay! The Style works.
This Style can now be added to /templates/override/static/user.css
However, this Style was applied to the <li> Element.
In this case it is not desired to apply the style to every <li> Element on the site but only to the Layout Module.
Look again at the Dev Tools upper panel to see that this <li> Element is contained by (or is a child descendant of) the Element <div class="col-sm-12 pi-model mb-2">
See the Class pi-model is applied to that <div> Element.
This enables specifying the Style change to an <li> Element that is a descendant of an Element with a Class pi-model.
So, in user.css, add The space between .pi-model and li means "select li Elements that are inside Elements that have Class pi-model"