Why do my customisations get ignored?

Hi all ! Hope you can help with this as it’s beginning to do my head in!

When I change certain things in the css sheet, such as background color, it changes while I am doing it but as soon as I click out of the area it reverts back to what it was originally, even if I then use the !important hack.

Here’s a couple of examples:

<h1>optin {</h1>

background: #4C9ED9; padding: 10px 0; color: white; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 1.2em; } .hero-text {<br /> background:rgba(62,66,73,0.5); } The background changes in the editing screen as I type it but then goes away.

Also, when I add a new section it wont let me add the things I want in the order I want them.

For example, here’s the optin section of the site I building and how it should be laid out:

<section> <div class="container"> <div class="row"> <div class="col-sm-8 </div><!--- col-sm-8 --->

    &lt;div class=&quot;col-sm-4
    &lt;/div&gt;&lt;!--- col-sm-4 ---&gt;
&lt;/div&gt;&lt;!---row ---&gt;

</div><!--- container ---> </section>

With Bootstrap Studio it wont allow me to add a div with the class of col-sm-8 to the row, I am forced to use column and that gives me a locked class of col-md-12.

Any idea how I can overcome this?

It's most likely because there is another class that is overriding it. You need to look at all the classes attached to the element, it's container(s), and so on and see what might be overriding it. Another issue could be you might have the classes in the wrong order. Always keep in mind that any classes with duplicate names, the very last one read by the browser is the one that will be applied.

One easy way to see what it might be is to check the Options pane area and click the "Look & Feel" tab. Now start with the element section you're trying to alter the settings for and see if it shows anything in the attribute settings under the layout model. From there click the next item up from that using the Overview tree is the easiest way to be sure you're moving up only one item at a time. Check the settings to see if they are different there at all and do this until you narrow down the culprit that is overriding your code.

From there you just alter your classes, which I tend to duplicate the class causing me the issue and then add an extension class to it and to the element I'm trying to change so it will override the original without affecting other elements that may be using that original class as is.

Hope that helps :)

@tymbusku, it seems you haven't fully grasped the available options in the Options pane.

When you add a column to a row, that column has a predefined class. You can change that class in the Options pane(top/right) by selecting the Gear Cog icon. Once you've selected the column (in the Overview pane) you want to change, in the Options pane for the column there is a Columns option section.

For BSS4 The Column Section Width has an arrow. Click on it to expand to see all of the possible col width options. Change which ever you want.

For BSS3 The Column Size is visible from the get go. You should see 12 as the value for MD, change it and others to what you want for each column.