Jump to content

Custom Css not working when being implemented

Recommended Posts

5 hours ago, creedon said:

Could you please be more specific? What code and what design issue?  Can you post a screenshot of the relevant code or the code itself? Also please describe what design issue you are trying to fix.

yes of course sorry for not being specific! 

So the issue I was trying to fix -  I had 4 product images on my home page being displayed side by side on desktop, but on mobile they were stacked on top of each other. So I was given this code so it would display in 2 rows and 2 columns on mobile:

/* Home 2 products row mobile */
@media only screen and (max-width: 768px) {
#block-yui_3_17_2_1_1611892954947_10780 + .row .sqs-col-3 {
width: 50% !important;
float: left !important;
}
#block-yui_3_17_2_1_1611892954947_10780 + .row .sqs-col-3:nth-child(2n+1) {
    clear: left !important;
}
}

 

This code seemed to work perfectly. However I checked my website again a couple days after and it had just reseted to how it was before the code was even put in. Ive tried deleting and re-entering the code and refreshing the page but nothing seems to work. 

I'll add some photos of the specific section I'm talking about. Hope this helps.

Cheers!

 
 

Screen Shot 2021-02-10 at 8.19.12 pm.png

Link to comment

In the @bangank36 and @tuanphan code you provided replace...

Quote

block-yui_3_17_2_1_1611892954947_10780

...with...

Quote

block-yui_3_17_2_1_1612958115703_8544

Did you edit that page recently? I'm thinking the block id was updated in response to that edit.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
2 hours ago, creedon said:

In the @bangank36 and @tuanphan code you provided replace...

...with...

Did you edit that page recently? I'm thinking the block id was updated in response to that edit.

Let us know how it goes.

the code still seems to not do anything but yes I think its because I have been making changes as I go so it must be updating everytime I do that. Would you be able to give me the updated Block Id again. After Ive implemented that I wont make any more changes so it should work wonders. Thanks so much for your help!

Link to comment
  • 11 months later...

Hi There,
I have quite a bit of CSS code on my site and everything worked fine and then all of a sudden none of it shows up on my site. Here is the code:

//TOP NAVIGATION//
.header-nav-item a:hover {
    font-weight: 500!important;
}

//Drop Down Navigation//
.header-nav-folder-content{background-color:#a4c6ab!important;
text-align:left!important;
  font-size: 15px;
}
.header-nav-folder-content a {
padding-bottom:.1rem!important;
padding-top:.3rem!important;}

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:hover a {color: #ffffff !important;}

//Drop Down Navigation MOBILE//

@media only screen and (max-width: 640px)
{
.header-menu-nav-folder-content {
  font-size: 10px!important;
  text-align:left!important;
  padding-left:.5rem!important;}
}

//Above the fold//
[data-section-id="618e31365856d72ef4181f1f"] .content-wrapper {
    padding-top: 15px !important;
    padding-bottom: 5px !important;
    padding-right: 0px !important;
}


//2nd home page section//
#block-80093575694f29df0263
{
background: #ede9e3;
padding: 40px;
text-align: left;
}

#block-yui_3_17_2_1_1643617675182_9684
{
background: #ede9e3;
padding: 40px;
text-align: left;
}
[data-section-id="61f7a0e715eb135ee257ac59"
.content-wrapper {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

//LOCATION SOLUTION CARDS//
[data-section-id="61a39fe6dfd0aa67845aaf2d"]{
  @media screen and (min-width:768px)}
  .design-layout-card .intrinsic {
    width: 15% !important;
}



//LOCATION HEADER TEXT BLOCK WEST  
#block-yui_3_17_2_1_1637496431053_6696
{
background: #d67347;
padding: 40px;
text-align: center;
}
//LOCATION HEADER TEXT BLOCK FIRESTATION 
#block-7dcbc9ca22b6716b2273
{
background: #d67347;
padding: 40px;
text-align: center;
}
//LOCATION HEADER TEXT BLOCK  BANK  
#block-c68cbb8d0871d3100486{
background: #d67347;
padding: 40px;
text-align: center;
}
//LOCATION HEADER BLOCK KLOOF
#block-2894f80e8f48f864f644{
background: #d67347;
padding: 40px;
text-align: center;
}
//LOCATION HEADER TEXT BLOCK WATERSHED  
#block-41626d245953d6ac62fe{
background: #d67347;
padding: 40px;
text-align: center;
}
//LOCATION HEADER TEXT BLOCK TABAKHUIS  
#block-3d7b6632ad2b0e1838f2{
background: #d67347;
padding: 40px;
text-align: center;
}

//FORM FIELDS//
.field-element {
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: 1px solid !important;
border-color:#42454e !important;
  background: none !important;
}
.form-wrapper .field-list .field select {
    padding: 15px;
    border-radius: 0px;
    width: 100%;
  border-left: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
  font-color:#59a370 !important
}

//HIDE PRICING TABLE FROM MOBILE/
@media screen and (max-width:767px) {
	[data-section-id="61f0f4383f658266e84fa2f2"] {
		display: none;
	}
}

//HIDE ACCORDIAN TABLE FROM DESKTOP/
@media screen and (min-width:768px) {
	[data-section-id="61f1440ab05c682781de7b17"] {
		display: none;
	}
}
/* accordion title background */
.sqs-block-accordion .accordion-item__title-wrapper {
    background-color: #b3d0b9;
}
/* accordion content background */
.sqs-block-accordion .accordion-item__dropdown--open {
    background-color: white;
}

#block-8bc4c71a67e281379f68
{padding: 0px;}

[data-section-id="61f0f4ea7f98de524c5ee3d0"].content-wrapper {
    padding-right: 0px !important;
}

Site: 
https://dory-antelope-3w8g.squarespace.com
Password: W172021

@tuanphan 

Link to comment

Create an account or sign in to comment

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

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