add css to multiple data-sections

Hi is it possible to list out multiple data section ids for one  set of css 

This doesn't seem to work so im wondering if there is another method

[data-section-id="63a47ed57f4f560e989882c9”],
[data-section-id="63a480337f4f560e9898ac76”],
[data-section-id="63a4804fd610163651c3c4f5”],
[data-section-id="63a480771e0fe210f84f4001”],
[data-section-id="63a4809914e37d1742619a31”],
[data-section-id="63a480b5ee1b281b1e1ea0e0”] {
position: fixed !important;
z-index:9999;
}

13 hours ago, joshuaechevarriadop said:

Hi is it possible to list out multiple data section ids for one  set of css 

 

This doesn't seem to work so im wondering if there is another method

 

[data-section-id="63a47ed57f4f560e989882c9”],
[data-section-id="63a480337f4f560e9898ac76”],
[data-section-id="63a4804fd610163651c3c4f5”],
[data-section-id="63a480771e0fe210f84f4001”],
[data-section-id="63a4809914e37d1742619a31”],
[data-section-id="63a480b5ee1b281b1e1ea0e0”] {
position: fixed !important;
z-index:9999;
}

 

Your syntax is right. Howerver, what do you want to achieve? 

7 hours ago, Beyondspace said:

Your syntax is right. Howerver, what do you want to achieve? 

I wanted to apply a fixed position for it.  

when I used the above code it said there was a syntax error but I achieved what I needed by using this code below but I would like to figure out how to target multiple data sections at once

.page-section:nth-child(1) {
  position: fixed !important;
  z-index:9999;
}

Quote

when I used the above code it said there was a syntax error

The syntax error is because you have smart quotes in your code. CSS doesn't like smart quotes. Change them to straight quotes.

Otherwise the general syntax for having multiple selectors is correct.

selector,
selector,
selector,
selector

  {
  
    property : value;
    
    }

Hi I'm having the same issue. It works great with one, then when I start adding more data-section-ids the entire css doesn't work. In the last part of the css - if I use a comma after the section it will stop displaying full width. see screen shot. 

here is the code that works (see screenshot - titled withonly one): 

/*HORIZONTAL STICKY CONTENT NAV - 7.1*/
section[data-section-id="63d2d9da32af660a9bb515e7"]
{
  box-shadow: 0px 8px 8px rgba(0,0,0,0.1);
  min-height: 0 !important;
  position: sticky !important;
  -webkit-position: sticky !important;
  top: 0;
  z-index: 999;
}

section[data-section-id="63d2d9da32af660a9bb515e7"]
.content-wrapper {
  padding-top: 25px !important;
  padding-bottom: 10px !important;
}

section[data-section-id="63d2d9da32af660a9bb515e7"]
.html-block {
  padding-bottom: 0 !important;
  text-align: center;
}

section[data-section-id="63d2d9da32af660a9bb515e7"]
.html-block p {
  display: inline-block !important;
  margin: 0 20px;
}

here's what it looks like when i add more sections - and it breaks the css (see screenshot - titled afteradding more): 

/*HORIZONTAL STICKY CONTENT NAV - 7.1*/
section[data-section-id="63d2d9da32af660a9bb515e7"],
section[data-section-id="63d3f7101a747f1a9fdd4644"],
section[data-section-id="63d3f99f03e4472872bcea8a"],
section[data-section-id="63d3f9d3e68141630f2d2375"],
section[data-section-id="63d3fa0096f1a24a26e4a399"],
section[data-section-id="63d3fa337d11266dadde5407"]
{
  box-shadow: 0px 8px 8px rgba(0,0,0,0.1);
  min-height: 0 !important;
  position: sticky !important;
  -webkit-position: sticky !important;
  top: 0;
  z-index: 999;
}

section[data-section-id="63d2d9da32af660a9bb515e7"],
section[data-section-id="63d3f7101a747f1a9fdd4644"],
section[data-section-id="63d3f99f03e4472872bcea8a"],
section[data-section-id="63d3f9d3e68141630f2d2375"],
section[data-section-id="63d3fa0096f1a24a26e4a399"],
section[data-section-id="63d3fa337d11266dadde5407"]
.content-wrapper {
  padding-top: 25px !important;
  padding-bottom: 10px !important;
}

section[data-section-id="63d2d9da32af660a9bb515e7"],
section[data-section-id="63d3f7101a747f1a9fdd4644"],
section[data-section-id="63d3f99f03e4472872bcea8a"],
section[data-section-id="63d3f9d3e68141630f2d2375"],
section[data-section-id="63d3fa0096f1a24a26e4a399"],
section[data-section-id="63d3fa337d11266dadde5407"]
.html-block {
  padding-bottom: 0 !important;
  text-align: center;
}

section[data-section-id="63d2d9da32af660a9bb515e7"],
section[data-section-id="63d3f7101a747f1a9fdd4644"],
section[data-section-id="63d3f99f03e4472872bcea8a"],
section[data-section-id="63d3f9d3e68141630f2d2375"],
section[data-section-id="63d3fa0096f1a24a26e4a399"],
section[data-section-id="63d3fa337d11266dadde5407"]
.html-block p {
  display: inline-block !important;
  margin: 0 20px;
}

https://cornet-strawberry-368d.squarespace.com/citizenship
pw: mingus12

4 hours ago, dfesenmyer said:

here's what it looks like when i add more sections - and it breaks the css (see screenshot - titled afteradding more):

Your selectors are incomplete. The CSS should look something like the following.

section[data-section-id="63d2d9da32af660a9bb515e7"] .content-wrapper,
section[data-section-id="63d3f7101a747f1a9fdd4644"] .content-wrapper,
section[data-section-id="63d3f99f03e4472872bcea8a"] .content-wrapper,
section[data-section-id="63d3f9d3e68141630f2d2375"] .content-wrapper,
section[data-section-id="63d3fa0096f1a24a26e4a399"] .content-wrapper,
section[data-section-id="63d3fa337d11266dadde5407"] .content-wrapper

  {
  
    padding-top : 25px !important;
    padding-bottom : 10px !important;
    
    }
    
section[data-section-id="63d2d9da32af660a9bb515e7"] .html-block,
section[data-section-id="63d3f7101a747f1a9fdd4644"] .html-block,
section[data-section-id="63d3f99f03e4472872bcea8a"] .html-block,
section[data-section-id="63d3f9d3e68141630f2d2375"] .html-block,
section[data-section-id="63d3fa0096f1a24a26e4a399"] .html-block,
section[data-section-id="63d3fa337d11266dadde5407"] .html-block

  {
  
    padding-bottom : 0 !important;
    text-align : center;
    
    }
    
section[data-section-id="63d2d9da32af660a9bb515e7"] .html-block p,
section[data-section-id="63d3f7101a747f1a9fdd4644"] .html-block p,
section[data-section-id="63d3f99f03e4472872bcea8a"] .html-block p,
section[data-section-id="63d3f9d3e68141630f2d2375"] .html-block p,
section[data-section-id="63d3fa0096f1a24a26e4a399"] .html-block p,
section[data-section-id="63d3fa337d11266dadde5407"] .html-block p

  {
  
    display : inline-block !important;
    margin : 0 20px;
    
    }

If you're putting the code in Custom CSS you can use LESS syntax to reduce some of the repetitive text of standard CSS.

/* uses LESS syntax */

section[data-section-id="63d2d9da32af660a9bb515e7"],
section[data-section-id="63d3f7101a747f1a9fdd4644"],
section[data-section-id="63d3f99f03e4472872bcea8a"],
section[data-section-id="63d3f9d3e68141630f2d2375"],
section[data-section-id="63d3fa0096f1a24a26e4a399"],
section[data-section-id="63d3fa337d11266dadde5407"]

  {
  
    .content-wrapper {
    
      padding-top : 25px !important;
      padding-bottom : 10px !important;
    
      }
      
    .html-block {
    
      padding-bottom : 0 !important;
      text-align : center;
      
      p {
      
        display : inline-block !important;
        margin : 0 20px;
        
        }
        
      }
      
    }

I tried the password for the site but it didn't work.

Let us know how it goes.

sorry about that -

heres the password

pw: mingus12!

your suggestion worked!!! however the .content-wrapper should be sticky? 

/*HORIZONTAL STICKY CONTENT NAV - 7.1*/
/* uses LESS syntax */

section[data-section-id="63d2d9da32af660a9bb515e7"],
section[data-section-id="63d3f7101a747f1a9fdd4644"],
section[data-section-id="63d3f99f03e4472872bcea8a"],
section[data-section-id="63d3f9d3e68141630f2d2375"],
section[data-section-id="63d3fa0096f1a24a26e4a399"],
section[data-section-id="63d3fa337d11266dadde5407"],
section[data-section-id="63d3fa5bfc703f102cee7de3"],
section[data-section-id="63d3fa9ff18e2f67b26f99ed"],
section[data-section-id="63d3fc3e69877625abaf0353"],
section[data-section-id="63d3fc791122d450f6bce63a"],
section[data-section-id="63d3fca117e5a3539cda8fe0"],
section[data-section-id="63d3fd29dfcbee58269cbd4c"],
section[data-section-id="63d3ff17f60fa726f15c6ca1"],
section[data-section-id="63d3fd73bcde2501d846e044"],
section[data-section-id="63d40527c392bd3a0c6b5f50"],
section[data-section-id="63d4058ff679e32fba95154e"],
section[data-section-id="63d4059af75935614200890e"],
section[data-section-id="63d405a7f8a2f972db0aafda"],
section[data-section-id="63d405b371b5476458f514e8"],
section[data-section-id="63d405c01c535a124ece65c9"],
section[data-section-id="63d405cce158984767bae86d"],
section[data-section-id="63d409e31257eb14e31d95d0"],
section[data-section-id="63d40a20a525244fb4f9cea6"],
section[data-section-id="63d40a339c8b554a7ee1b73f"],
section[data-section-id="63d40a471d7615439aa2f7de"],
section[data-section-id="63d40a5946744037285e531b"],
section[data-section-id="63d40a706109964256c2b7ca"],
section[data-section-id="63d40a83d7a88f51e3b61c16"],
section[data-section-id="63d3fa9ff18e2f67b26f99ed"],
section[data-section-id="63d3fd29dfcbee58269cbd4c"],
section[data-section-id="63d3ff17f60fa726f15c6ca1"],
section[data-section-id="63d3fc3e69877625abaf0353"],
section[data-section-id="63d3fc791122d450f6bce63a"],
section[data-section-id="63d3fca117e5a3539cda8fe0"],
section[data-section-id="63d3fd73bcde2501d846e044"]
{
  .content-wrapper {
    padding-top : 15px !important;
    padding-bottom : 10px !important;
      }
      
    .html-block {
      padding-bottom : 0 !important;
      text-align : center;
      p {
        display : inline-block !important;
        margin : 0 20px;
        }
      }
}
 

and for some reason, now - my site logo disappeared? 

https://cornet-strawberry-368d.squarespace.com/citizenship

pw: mingus12!

2 hours ago, dfesenmyer said:

however the .content-wrapper should be sticky?

I only tackled the code that had issues. The first ruleset in your post appeared to be correct.

Quote

and for some reason, now - my site logo disappeared?

Your code is not manipulating the header. Your page appeared to be OK after I disabled the Mega Menu and Secondary Navigation code. I'm an unable to help with someone else's custom code. Perhaps there is an error in your install process or it isn't configured properly?

and for some reason, now - my site logo disappeared? 

https://cornet-strawberry-368d.squarespace.com/citizenship

pw: mingus12!

thanks - you helped a ton.. The logo was another issue - trying to use a svg for the logo. (buggy and i couldn't get it to work). 

On 1/29/2023 at 5:48 AM, dfesenmyer said:

 

and for some reason, now - my site logo disappeared? 

https://cornet-strawberry-368d.squarespace.com/citizenship

pw: mingus12!

 

thanks - you helped a ton.. The logo was another issue - trying to use a svg for the logo. (buggy and i couldn't get it to work). 

You mean replace this logo with a svg logo?

Hello there, I've been having a similar issue as the above. I've got a plugin which turns carousels into scrolling banners, I've added a stroke width to the carousels media inner + outer, but for some reason when I target the specific carousels I want to apply the code to, it doesn't work? 

example of the code is below - 

Quote

/* All stroke widths on carousels*/
section[data-section-id="64ccd4e92079911e09514ba8"],
section[data-section-id="650c060ac97f4823171d72f5”],
section[data-section-id="650c06b7a277bf38fde5d847”],
section[data-section-id="650c06c7569e6d6dd1f2ea51”],
section[data-section-id="650c06d5f7526b1f444cd89d”],
section[data-section-id="650c06e34b7aa01f134cd92d”],
section[data-section-id="650c06f09261f61f43da9ee2”],
section[data-section-id="650c0700c58b6e585a4d288f”],
section[data-section-id="650c070e8cb6796d4714d4ad”],
section[data-section-id="650c071bf36a69211f69c2f0”],
section[data-section-id="650c072815f9893c42486df1”],
section[data-section-id="650c0736250301451d5ef7c5”],
section[data-section-id="650c0744f198f50ec8f002b6”],
section[data-section-id="650c07520f44b837111f5ed8”],
section[data-section-id="650c07603b5d0752d30ccaa0”],
section[data-section-id="650c076fe1bbb10af1e7b7a4”],
section[data-section-id="650c077f0a19773b8f4fa94a”],
section[data-section-id="650c07900f44b837111f6411”]
.list-item
{background-color: white, !important;
  border-radius: 40px 40px 0px 0px,
   !important;
border-style: solid;
border-color:#000000;
border-width:3px;
}
.user-items-list-carousel__media-inner
  {border-radius: 20px 20px 0px 0px,
   !important;
    border-style: solid;
border-color:#000000;
border-width:3px;
}
 

 Any help would be greatly appreciated. 

Website link here - https://aqua-polygon-cy42.squarespace.com
Password - Peppapig123! §

On 9/29/2023 at 4:27 PM, squarenoob123 said:

Hello there, I've been having a similar issue as the above. I've got a plugin which turns carousels into scrolling banners, I've added a stroke width to the carousels media inner + outer, but for some reason when I target the specific carousels I want to apply the code to, it doesn't work? 

example of the code is below - 

 Any help would be greatly appreciated. 

Website link here - https://aqua-polygon-cy42.squarespace.com
Password - Peppapig123! §

Peppapig123! §

Peppapig123!

incorrect password. Can you check it again?

Peppapig123! 

this is definitely the correct password, maybe try again? 

On 10/4/2023 at 11:30 PM, squarenoob123 said:

Peppapig123! 

this is definitely the correct password, maybe try again? 

Which section are you referring to? It looks fine to me

Screenshot: https://prnt.sc/eF2KJbm66eX0

I'm referring to the carousels on the case study pages linked here -
https://aqua-polygon-cy42.squarespace.com/case-study-1-2 

They are working on the home page, but i have multiple carousels over lots of pages and they only appear to be working on the home page. 

Thanks! 

On 10/11/2023 at 11:26 PM, squarenoob123 said:

I'm referring to the carousels on the case study pages linked here -
https://aqua-polygon-cy42.squarespace.com/case-study-1-2 

They are working on the home page, but i have multiple carousels over lots of pages and they only appear to be working on the home page. 

Thanks! 

Hi,

I see your code still works here

Hello, 

The code is meant to apply the same outer stroke width + colour as the carousels on the home page, not have the green colour. 

Any ideas as to why it is only applying to the inner media? 

On 10/13/2023 at 10:11 PM, squarenoob123 said:

Hello, 

The code is meant to apply the same outer stroke width + colour as the carousels on the home page, not have the green colour. 

Any ideas as to why it is only applying to the inner media? 

The site is expired, you can access this link to extend it 

Hey, Sorry about that. Should be live again now! 

On 10/17/2023 at 7:05 PM, squarenoob123 said:

Hey, Sorry about that. Should be live again now! 

Hi,

I see both already same now

homepage

current page Or you need to make text + button center?