I attempted to customize the CSS in page builder mode by adding the following code:
#content {
max-width: 2000px;
}
While in page builder mode, the desired effect was achieved. However, once I published the changes, the page reverted back to the previous smaller max-width setting. Upon further investigation using the inspect element tool, I discovered that the max-width property for #content was still being sourced from style.css and not my custom CSS. To ensure thoroughness, I also added the style rule to Global Settings, but to no avail. Fortunately, through experimenting in the dev tool window, I found that unchecking the max-width property controlled by style.css resulted in my custom style rule being applied. It seems isolating that specific section of style.css may solve the issue.
In an attempt to address the problem, I navigated to the Lyrical theme folder and adjusted the max-width property as intended, saving the changes. However, despite this effort, the page persisted with the previous max-width setting. Further inspection revealed a ?ver=xxxx suffix within the stylesheet, leading me to believe this could be hindering the display of my modifications. Strangely, no file named style.css?ver=xxxx could be located, suggesting it might be dynamically generated upon page load or utilizing another method. These are mere speculations, as my understanding extends only to basic JavaScript and lacks proficiency in PHP, making troubleshooting challenging at this point.
Question: How can I ensure that my published page adheres to the specified max-width property? Should I delve deeper into investigating the versioning of style.css or focus more on the PHP aspect? The complexity underlying these issues has illuminated my limited knowledge about the technical aspects involved. Any assistance, regardless of magnitude, would be greatly appreciated. Thank you.