Yeah, that’s what I has done, have imported style sheet and customised part’s of it, it was all fine everything was how I wanted it in the child theme css and was showing up perfectly, then did a refresh and half of the styles reverted back to the parent style sheet, check the child style and nothing was different, all styles were exactly the same as before, when it was working, now I don’t know how to get it back to overriding parent style sheet with child style sheet,or even if that’s the issue as the template is taking some of the parent style sheet and some of hte child style sheet.
Can give example:
Parent:
.widget {
background-color: rgba(247, 245, 231, 0.7);
font-size: 14px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
margin: 0 0 24px;
padding: 20px;
word-wrap: break-word;
}
Child:
.widget {
background: #fcfcfc; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #fcfcfc 0%, #f2f2f2 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fcfcfc), color-stop(100%,#f2f2f2)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #fcfcfc 0%,#f2f2f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #fcfcfc 0%,#f2f2f2 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #fcfcfc 0%,#f2f2f2 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #fcfcfc 0%,#f2f2f2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f2f2f2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
font-size: 14px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
margin: 0 0 24px;
padding: 20px;
word-wrap: break-word;
}
and it’s taking the parent theme style sheet instead.
in this one it’s doing what it’s suppose to do and taking the child theme style sheet:
Parent:
.site-header .home-link {
color: #141412;
display: block;
margin: 0 auto;
max-width: 1080px;
min-height: 230px;
padding: 0 20px;
text-decoration: none;
width: 100%;
}
.site-header .home-link {
color: rgb(128,128,128);
display: block;
margin: 0 auto;
max-width: 1080px;
min-height: 150px;
padding: 0 20px;
text-decoration: none;
width: 100%;
}
[Code corrected by moderator]
So I don’t know what the issue is, because it was all working fine, the way it’s suppoe to with the child theme overriding the parent, then after a refresh only half of the child stylesheet is being used.