I have been working with theme Showcase and customized a number of different things in the Assets > styles.css.liquid - but now all of a sudden the code has stopped working. The code is still in styles.css.liquid.
Does anyone know how to fix this?
hellohello
Maybe try moving the custom styling to a seperate asset file and call it inside the header, so when any updarte comes the code isn’t overwritten.
Use !important or add new classes and IDs to overwrite existing code.
Thanks!
I have facing same issue!
I am new to coding - could you be more specific or include screenshots please?
@KetanKumar @LitExtension can you help by any chance?
Go to the Admin > Themes, click Actions and select Edit code
In the Assets folder click “Add a new asset” and “Create a blank file” as .css
Write you code there and you also have to call the asset in the header.liquid
Use the following code:
{{ 'myfile.css' | asset_url | stylesheet_tag }}
I am sure you didn’t understand what I wrote.
You create a file named let’s say mystyle.css (in the assets)
you call it in the header.liquid file with the code
{{ 'mystyle.css' | asset_url | stylesheet_tag }}
oh sorry for any issue can you please me know what’s exactly issue
Hi @KetanKumar all of a sudden all my coding has stopped working. The code is still in the section styles.css.liquid but when I preview my website it’s not initiating the changes I coded such as header text side, header font weight etc… that I had customized in the code.
Could you provide screenshots? Sorry I still don’t get it… sorry beginner here…
sorry but what’s issue
@KetanKumar I think that a shopify update came and all my code stopped working…
I need screenshots how to solve the problem…
yes, please share issue video or screenshot
Thanks - see blow.
I have added the code so this font is not bold. The code worked for 2-3 weeks but all of a sudden stopped working and the font went back to bold.
I used the code below which is inserted into Assets > styles.css.liquid but it’s not longer activating the change of font weight.
// code for heading weight start
h1, h2, h3, h4, h5, h6, p, body, a, .btn, .under-cart, .subtotal, blockquote,.apb_text_columns_with_images_section, .apb_text_columns_with_images_heading
// code for heading weight end
oh sorry your store password protect
p: hellohello
is there a quick and easy way to fix the bulk code that is not working - because this problem with the weight of the font is only one issue. All the below code is not working…
// code for heading weight start
h1, h2, h3, h4, h5, h6, p, body, a, .btn, .under-cart, .subtotal, blockquote,.apb_text_columns_with_images_section, .apb_text_columns_with_images_heading
// code for heading weight end
// code for mobile height size start
@media (min-width: 750px){
h2{
font-size: 48px !important;
}
}
@media (max-width: 749px){
h1, h2{
font-size: 40px !important;
}
}
// code for mobile height size end
// code for customized colour page background workshops start
body.page-workshops {
background-color: #CAD5FF!important;
color: #CAD5FF !important;
}
body.page-workshops #page-content * {
color: #FF9D66 !important;
}
body.page-workshops #page-content .content {
background-color: #CAD5FF!important;
}
// code for customized colour page background workshops end
// code for footer links to flash colour start
.section-footer a:hover,
.section-footer a:focus {
color: #7898FF !important;
}
// code for footer links to flash colour start
// code for changing subheader text size starts
/* code for desktop /
.feature-subheader {
font-size: 15.5px;
}
/ code for mobile */
@media (max-width: 767px) {
.feature-subheader {
font-size: 13.5px;
}
}
// code for changing subheader text size ends
// code for changing 3rd line banner text size starts
/* code for desktop /
.overlay-type .line-2 {
font-size: 18px;
}
/ code for mobile */
@media (max-width: 767px) {
.overlay-type .line-2 {
font-size: 15.5px;
}
}
// code for changing 3rd line banner text text size ends
// code for chaning colour of contact form starts
#contact_form #contact_name {
color:#7898FF;
border-color:#7898FF;
}
#contact_form #contact_email {
color:#7898FF;
border-color:#7898FF;
}
#contact_form #message {
color:#7898FF;
border-color:#7898FF;
}
#contact_form #contact_name::placeholder, #contact_form #contact_email::placeholder, #contact_form #message::placeholder {
opacity: 100%
}
// code for changing colour of contact form ends
// code for centreing product page starts
.product-list { display: flex; justify-content: center; flex-wrap: wrap; }
// code for centreing product page ends
// code for fixing instagram gallery height start
@media only screen and (min-width: 1140px) {
#section-id-template–15982161264889__1652032293fcbcff97 .gallery__item {
height: 380px !important;
}
}
// code for fixing instagram gallery height ends
// code for newsletter pop up dark shadow starts
.cc-popup .cc-popup-modal .cc-popup-image:after {background: #7898FF;}
// code for newsletter pop up dark shadow starts ends
Try this:
h1.feature-header.align-left.cc-fade-in-up.cc-animate-init.feature-header--visible.-in.cc-animate-complete {
font-weight: 400;
}
h2.feature-header.h2.align-right.cc-fade-in-up.cc-animate-init.feature-header--visible.-in.cc-animate-complete {
font-weight: 400;
}
Use font-weight to overwrite boldness.