Problem with custom CSS - rules are ignored

Solved
Highlighted
Tourist
6 0 0

I have a problem with my custom CSS in my themekit project: some rules are ignored at runtime.

 

I've created a custom.css in the /assets/ folder and linked it from the theme.scss.liquid

 

@import "custom.css"

the style is mostly applied successfully, but some rules seem to be ignored. I say ignored and not overwritten.

Upon inspection of the code, they appear in the page's HTML... but don't render. I thought I was doing something wrong until I styled this "Subscribe" button:

Apart from background and text-colour, all rules are ignoredApart from background and text-colour, all rules are ignored

You can see in the inspector (see picture after the snippets) that the class

.bas-button

doesn't appear at all! Its variants

.bas-button--red
.bas-button--large

are listed.

 

CSS classes are present in the HTML but don't appear in the inspector to the rightCSS classes are present in the HTML but don't appear in the inspector to the right

 

If I paste the same CSS code in the section file where this HTML is generated, the button is styled as intended:

Screenshot 2019-08-15 at 17.16.00.png

Here follows the code (from the section) for reference

{% style %}
	.bas-button
	{
		display: block!important;
		position: relative;
		top: 0px;
		padding-top: 16px;
		padding-bottom: 12px;
		font-size: 20px;
		font-weight: 300;
		text-align: center;
		text-transform: uppercase;
		-moz-box-shadow: 0 6px 12px rgba(0,0,0,0.25);
		-webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.25);
		box-shadow: 0 6px 12px rgba(0,0,0,0.25);
		transition: all ease 0.1s;
	}
	
	.bas-button:active
	{
		top: 3px;
		-moz-box-shadow: 0 4px 8px rgba(0,0,0,0.45);
		-webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.45);
		box-shadow: 0 4px 8px rgba(0,0,0,0.45);
	}
	
	.bas-button--large { min-width: 256px; }

	.bas-button--red
	{
		background: #E10000;
		color: #FFFFFF;
	}
{% endstyle %}

 

0 Likes
Highlighted

This is an accepted solution.

Hello ,

Add file in Theme -> Assets -> custom.scss.liquid in your theme
and call that file in Theme -> Layout -> theme.liquid just like screen shot i shared .


css call.jpg

 

Not Paste you CSS code in to custom.scss.liquid file. it will work for you.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
2 Likes
Highlighted
Tourist
6 0 0

Thank you Pallavi, this works!

0 Likes