Jump to content

Custom CSS working only when in editor mode

Recommended Posts

Site URL: http://www.homejoydesigns.com

Hi, 

Hope someone can help me with a very frustrating issue. I added some custom CSS to a website I'm building and while I see the changes in the editor mode, when I open the site in any browser, the changes disappear. 

Attached what I'm trying to do - to add a border around each block of text (i.e. Full Service Design + Learn More) like on the screenshot attached. 

website: homejoydesigns.com

password: homejoydesigns

The code I use is: 

/* Full Service Design */
div#block-827624cf6024d9afe262 
{
border-left: 2px solid #546978;
  border-right: 2px solid #546978;
  border-top: 2px solid #546978; 
}
div#block-yui_3_17_2_1_1617890410823_11067 
{
border-left: 2px solid #546978;
  border-right: 2px solid #546978;
  border-bottom: 2px solid #546978; 
}
 

/* Renovation and New Build */

div#block-yui_3_17_2_1_1617403684426_30021 
{
  border-left: 2px solid #546978;  border-right: 2px solid #546978;  border-top: 2px solid #546978; 
}
div#block-yui_3_17_2_1_1617403684426_34873 
{
border-left: 2px solid #546978;  border-right: 2px solid #546978;  border-bottom: 2px solid #546978;
}

 
/* Decor and Styling */
div#block-b2cd85c116c53d5c577e 
{
border-left: 2px solid #546978;
  border-right: 2px solid #546978;
  border-top: 2px solid #546978; 
}
div#block-b8cee46e8daad722721d 
{
border-left: 2px solid #546978;
  border-right: 2px solid #546978;
  border-bottom: 2px solid #546978; 
}
 
Thanks so much! 

 

 

Screen Shot 2021-04-08 at 1.37.09 PM.png

Link to comment
  • Replies 2
  • Views 2k
  • Created
  • Last Reply

Try adding this new code to Design > Custom CSS

/* 3 boxes */
div#page-section-60710969cd5e2035f1919fd4 .span-4 {
    border: 2px solid #546978;
    width: 30%;
    margin-left: 2%;
    margin-right: 2%;
    padding-top: 20px;
}
div#page-section-60710969cd5e2035f1919fd4 .span-12>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}
@media screen and (max-width:767px) {
div#page-section-60710969cd5e2035f1919fd4 .span-12>.row {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
div#page-section-60710969cd5e2035f1919fd4 .span-4 {
    margin-bottom: 30px;
    width: 100% !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
On 4/8/2021 at 6:45 PM, michelle_nen said:

I added some custom CSS to a website I'm building and while I see the changes in the editor mode, when I open the site in any browser, the changes disappear. 

This usually happens when the browser fails to load the Squarespace CSS file (site.css) correctly. This usually happens for one of three reasons:

  • Errors in your Custom CSS that prevent it saving/loading. You can resolve this by replacing your Custom CSS with a few simple lines of CSS for testing purposes. If this is applied correctly, your Custom CSS was at fault.
  • Errors in the browser cache. This can be cleared with a hard refresh (Cmd  and Shift ⇧ + R on Mac).
  • Errors in the site cache on the Squarespace backend. If this is the issue (the other two suggestions didn't fix it) then you'll need to contact Squarespace Customer Care and ask them to clear the site cache.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.