Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom CSS working only when in editor mode


Go to solution Solved by paul2009,

Question

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 post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

2 answers to this question

Recommended Posts

  • 0
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.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

Link to post
  • 0

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;
}
}

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...