Marzon

On 2/20/2023 at 1:18 PM, ReformDesign said:

I think you just have to put it inside a parent element.

 

<div style="text-align: center;">
 <p4 style="font-weight: bold;"> in • ter - con • scious<br>
</p4>
<p4 style="font-style: italic; font-weight: bold; color: grey">/inˈtər -ˈkänSHəs/<br>
</p4>
<p4>the situation or scene between competing desires or goals<br>
</p4>
</div> 

Just curious, is there a reason you're not using text blocks?

Ah, thanks! I understand now. 

I wasn't using text blocks because it's only specific instances I'm using this font/style. The rest of my site uses a different font, so I thought it made sense to do it this way. But if there is a better way to handle this please tell! 

I am unable to center my custom p4 text. It works with the normal paragraph, but not my p4. 

What can I do to fix this?

EDIT:
page: https://bear-conch-ebj2.squarespace.com/spring2023/project-one-ephnc-pnppe

<p4 style="font-weight: bold;"> in • ter - con • scious<br>
</p4>
<p4 style="font-style: italic; font-weight: bold; color: grey">/inˈtər -ˈkänSHəs/<br>
</p4>
<p4>the situation or scene between competing desires or goals<br>
</p4>

In my css I have

p4 {
font-family: 'timesnr';
}

Site URL: https://llama-scarlet-7jfe.squarespace.com/projects

Hello, 

I'm looking to make Text in certain sections (under header) to be full width. 

I do not want it to indent like it does normally. I want it to behave just like a full width header. 

I'm assuming this would mean removing the orange (see image). 

I figured out how to remove the orange by going:

#yui_3_17_2_1_1645652887174_807
 {
  max-width: none !important;
}

However on refresh, the id changes.

From what I remember a yui changes but a block-yui doesn't? Anyways, I was wondering if someone could help me. 

On 12/18/2021 at 9:25 PM, tuanphan said:

You  can set 5px for mobile, higher for desktop, what do you think?

Nah it's ok it looks fine

12 hours ago, tuanphan said:

Remove margin & use border

figure.gallery-reel-item {
    border-left: 5px solid white;
    border-right: 5px solid white;
}

 

So, unfortunately this still crops and moves the images to one side, after testing the code with large 70px borders instead of 5px. This is similar, if not the same, to moving the margin left as I've seen in other posts. 

It seems this is perhaps impossible or would require a lot of scripting to be able to do. ?

Thank you for the help though @tuanphan . Adding the borders did help with the mobile version. With small margins I can live with this. But Squarespace really needs to add white space between gallery images in the reel !

On 12/14/2021 at 7:03 AM, tuanphan said:

Hi. Still doesn't exist. Can you check it again?

https://llama-scarlet-7jfe.squarespace.com/projects/pitesti-business-center

Yes, here it is

EDIT: I'm currently using this code below. But this is not a solution for me, as it shifts the images to one side as well as crops them, both of which I'm trying to avoid if possible. 

I also tried scaling the images. However because they are different sizes, it caused problems like @Laisa discovered above.

.gallery-reel-item img {
    margin-left: 20px;
}

22 minutes ago, tuanphan said:

The url doesn't exist

My bad @tuanphan, the seo had changed. 

https://llama-scarlet-7jfe.squarespace.com/all/pitesti-business-center

On 9/26/2021 at 4:00 AM, tuanphan said:

Can you share link to page in screenshot? We can take a look

Bringing attention back to this thread. I too am looking for a solution. So far all the similar posts I've found regarding adding white spaces between gallery reel images ends up cropping them. @LUDA seemed like they got the closest but it doesn't seem to be fully working. 

The site I am looking to do this on is:
https://llama-scarlet-7jfe.squarespace.com/all/new-portfolio-item-tzlnh

On 12/6/2021 at 1:55 PM, creedon said:

That's were things start getting tricky. What you see in my testing is a pure CSS effect. It might be possible to change the expand/collapse but would require Javascript and the business plan or above, if the effect could be achieved.

There is no thread as the code only exists on my computer at the moment. This will be the thread! 🙂

Let's consider this an experiment and not a full solution. As I mentioned I didn't test all the ins and outs of how this code would work with every aspect of how SS's accordions work.

What plan are you on? I ask because depending on which one you have may effect how I deliver the code as it stands now.

@creedon I really appreciate the help. Sorry for the delayed response though. 

That's too bad the "..." expand option requires extensive CSS. My end-goal was to have the text expand option only on mobile, but it seems to be getting very complicated and perhaps is not worth all the effort. Global CSS edits to the site I prefer, while individual blocks of code become difficult to handle. I want the website to maintain it's ease of use, as it's why I am using SS in the first place. 

I would like to try the tweaked accordion option, I'm all for experimenting. 

The website I provided was a copy of the site I actually need to edit. Here is the actual site: https://puma-orb-9lss.squarespace.com/
It is a business plan. 

13 hours ago, creedon said:

Would something like the following work for you?

 

 This is an SS accordion block altered with some CSS. I didn't test all the permutations of how an accordion block can be configured. But this shows that with the standard accordion block it is possible to get something close to what you described.

Yes, this is good, thanks!
Though I would prefer the text to expand from clicking the "..." I could live with this. 

Would you be able to provide me with the link to this thread?

Site URL: https://purple-carillon-rxja.squarespace.com/projects/little-peek-wkny5-k2yyn

I'm trying to find a way to have expandable text to prevent descriptions with too many lines of text. I've looked all over the forum/online but only seeing solutions like the accordion block, which is not what I'm looking for. 

I'm looking to have some of the text visible, and the ability to expand it to see the rest. Not completely hide the text as seen in the accordion block. 

Image example is what I'm looking to accomplish. 

Password to page: ssq2

12 hours ago, bangank36 said:

Please try this

@media screen and (max-width:640px) {
  .portfolio-grid-overlay .grid-item .portfolio-text {
    opacity: 1 !important;
  }
  .portfolio-grid-overlay .grid-item .portfolio-title {
      transition: none !important;
      transform: translateY(0);
  }
}

 

Thanks @bangank36 ! Exactly what I needed

Site URL: https://puma-orb-9lss.squarespace.com/projects

I'd like to have the portfolio overlay off when my website is viewed on mobile. Or in other words, I want all the text to show and not be hidden on mobile on the portfolio page. 

I should note that I have custom animations that override the overlay a bit. I added code such as the one below to prevent it on mobile. Maybe irrelevant but adding just in case. 

@media screen and (max-width:640px) {
  .portfolio-grid-overlay .grid-item .portfolio-title {
    transition: none !important
  }
}

I got it!

.header-title-logo a:hover img {
  visibility: hidden;
}
.header-title-logo a:hover {
  background-image: url('https://static1.squarespace.com/static/5f7cd49fb45e5409f742bf77/t/5f80cea6ff1ed526c3a58c85/1602277031045/Thin%2BAM%2BLogoRED.png');
  background-size: contain;
}

So add this to Design > Custom CSS

But, you'll need to replace the link.

1. Make another logo with the color you want
2. Design > Custom CSS
   • scroll to bottom and find Manage Custom Files
3. Upload your colored logo
4. Delete the link in the code that I put (and not the apostrophes). Click so the text cursor is between the apostrophes. 
5. Click the file that shows up in Manage Custom Files and it should insert the link where you put the text cursor. 
6. Done

Hopefully that works. It worked on mine

4 minutes ago, Marzon said:

a#site-title:hover {
  color: red;
}

Add this to Design > Custom CSS

You can replace "red" with "rgb(153,153,153)" for more specific colors. 

Wait, sorry that's for text not logo.

a#site-title:hover {
  color: red;
}

Add this to Design > Custom CSS

You can replace "red" with "rgb(153,153,153)" for more specific colors.