CMS objects always adds "display: block;"

hi there,

this might be a super simple ask, but whenever I publish my site all of my ‘CMS collection list’ objects are set to ‘display: block;’ and I want to have them ‘display: inline;’ and text-align ‘justify’

this is a screenshot from the inspector from my published site:
Screenshot 2023-10-04 at 11.08.49

whenever I display my site in the editor there are no problems…


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Element level styling means those styles are probably set by your interactions.

1 Like

sounds about right, I have some hover styles set to those elements.
Is there any way to bypass those styles tho?
And do you know why it works in the editor but not on the published site?

Edit: It worked! thx alot

1 Like

Yes but it would break your interactions. If you did have a use case for this you can override element level styles with a <style> snippet that uses !important. This is generally considered bad practice though, I’d avoid it when possible.

The editor modififies the page so that it can be edited. Likely interactions get disabled. It would be difficult to edit something that’s running around the screen.

The designer presents a representation of the page, it doesn’t have the exact styling and page structure that the browser will get on publish. Think, photoshop + layers + filters, v. finished photo.