How to disable layout.min.css file

[zeshanshani]

Hey guys, 

I'm new to HubSpot COS. Currently developing a page using Bootstrap 4. However, the styling from layout.min.css file is conflicting with my Bootstrap 4 styling.

Is there a way to disable layout.min.css so that it doesn't get loaded on page?

[Amit_95]

3 years on, still no solution to remove layout.min.css natively via HubSpot. Nevertheless, another solution would be:

$("link[href$='layout.min.css']").remove();
$("link[href$='layout.min.css']").attr('disabled', 'disabled');

This will find all the <link> hrefs that end with 'layout.min.css' and remove them. 

Edit:

Having said that, I would suggest using pure JS to remove the stylesheet, otherwise you'll have to wait for jQuery to be loaded in first. Do this instead:

const cssElement = document.querySelector("link[href*='layout.min.css']");
cssElement.disabled = true;
cssElement.remove();

[dillonbailey]

Hey @zeshanshani sorry for being so late to the party!

One workaround we've commonly implemented is the following code snippet:

<script>const stylesheets = document.querySelectorAll('link[rel=stylesheet]'); for (var i = 0; i < stylesheets.length; i++) { if(stylesheets[i].href.indexOf("responsive/layout.min.css") >= 0) { stylesheets[i].disabled = true; } }</script>

You can put this here under Settings > Website > Pages:

 

Hopefully this helps!

Dillon Bailey | CEO | honestfox.com.au

[MichaelJ]

Hi zeshanshani,

Unfortunately there is no way to disable this file, its forced on you for all drag-and-drop templates. It does make life hard since you have to work around the very limited grid system.

You can override the styles it uses with your own. I saw this article a few months ago that gives an example - currently the formatting of the code examples are a bit broken though.

[zeshanshani]

Hey guys, thanks for your responses!

@MichaelJ, >> It does make life hard since you have to work around the very limited grid system.

Hmm, if you guys know it makes the life hard, why don't you make it optional? It's fine to force it in the backend but on the front-end, I can't see any reason to have it a must. 

Though I was already able to overwrite the styles, this worked so far:

.header-container.container-fluid,
.body-container.container-fluid,
.footer-container.container-fluid{
    padding: 0;
}

.container-fluid:before,
.container-fluid:after {
    display: none;
}

.row-fluid [class*="span"] {
    min-height: 0;
}

Thank you,
Zeshan

[huenisys]

I had to work around this issue too.

How I wish we can define our grid system and still has access to the drag and drop backend.

Also, the grid system can easily be modified by allowing devs to modify what Module Group does. Right now, it auto adds wrapping divs. How hard is it to allow a parameter so we can decide on what wrapping element we want.

[tjoyce]

@zeshanshani - if you don't see it in the page editor settings, try going to the gear icon in the top right -> marketing -> web pages

You will see a section for automatically included CSS files. 

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.