melody495

Ok, after some searching... I effectively want a table, but didn't realise it is already a hot topic! e.g. no built-in solution for table in SquareSpace. More here 

But my design is very simple, so I did a simple code work-around

// left align all text blocks on mobile view
@media screen and (max-width:640px) {
  section[data-section-id="652020b622bd57024793ce92"] .sqs-html-content p{
    text-align: left !important;
  }
}

I can keep the editing native and works on mobile too, problem solved!

Hi, they are your blogs. So go to the blog post you want to change and do it there. blog post -> settings

Hi, I've created an events page using text blocks and line blocks, got it to how I want it to look on Desktop, but on mobile the layout is messy. What's the best thing to do so I can have on

• desktop, Name = left aligned, Location = centre, Date = right aligned,
• mobile, all left aligned and stacked

Looking for a non-code solution if possible. Any suggestions much appreciated, thanks!

https://tuatara-cello-3kr6.squarespace.com/fairs

password: wpGNeG9jZ5diGiM

On 10/28/2023 at 4:43 AM, ShortAngryViking said:

also keen on this look

blog one:
https://turkey-decagon-5rfj.squarespace.com/articles

blog two
https://turkey-decagon-5rfj.squarespace.com/in-depth-articles

but I do not know how to frame them

 

For some reason I can't right click within your website so can't check.... Try this in your custom code?

.blog-basic-grid--container {
	border: 1px solid red; // change to colour you want
	padding: 2rem; // change to how much spacing you want all around
	padding-bottom: 2.5rem; // change to how much spacing you want at the bottom
}

Hi please share a link to your website so can check. Which template are you using, if any

Hi, try this in your custom code?

// blog published date
.article-list .meta .published {
	font-style: normal;
}

// center excerpt and read more
.article-list .entry-content {
	text-align: center;
}

// removes all meta from footer (category, tag, share, likes)
.article-list .clear .meta {
	display: none;
}

Let me know how it goes.

You're welcome

Hi please share a link to your website so I can check. And tell me which text you are expecting to change to italics but is not. 

Hi you need to name them different names. like below

// CUSTOM FONT for HEADING 1
@font-face {
	font-family: 'fooMedium'; // This is the name you give for this custom font. Rename as necessary
	src: url(https://static1.squarespace.com/static/63fe423ae838510284cc600a/t/64e931aeb04dfe430c64ba41/1693004206450/FooDisplay-Medium.otf);

}

// CUSTOM FONT for HEADING 2
@font-face {
	font-family: 'fooMediumItalic'; // This is the name you give for this custom font. Rename as necessary
	src: url(https://static1.squarespace.com/static/63fe423ae838510284cc600a/t/653d4ba84a828f0d57e00f5b/1698515880826/FooDisplay-MediumItalic.otf);

}

Then to set your h1 and h2 to use your custom fonts, you call them like this

h1 {
	font-family: 'fooMedium'; // put what font you want to use here
	letter-spacing: normal;
}

h2 {
	font-family: 'fooMediumItalic'; // put what font you want to use here
	letter-spacing: normal;}

If this has helped you out, let me know by marking as solution, or choose a reaction ----> 👇

Edit: I think the main problem is your custom code are using deprecated syntax. e.g. align and font tag are deprecated (html4), so you might need to check all your custom code to make sure they work for html5.

This line, the style syntax is wrong. Change from

<h1 align="center"><font color="#FFFFFF">

to 

<h1 align="center" style="color: #FFFFFF">

Or you can change the font colour in this block, by adding color: #FFFFFF 

.txt-type > .txt {
  border-right: 0.08rem solid #fff;
  padding-right: 2px;
  /* Animating the cursor */
  animation: blink 0.6s infinite;
}

Also, not sure if align="center" is working for you. 

If you can share a link to your website, can check easier.

If this has helped you out, let me know by marking as solution, or choose a reaction ----> 👇

It happens! Change the below to new line

.sqs-block-form .field-list .caption {

to 

.sqs-block-form .field-list .caption-text {

"Required" is part of the "Your Name" title. Best to move the text "Required" to after "First Name" and "Last Name", so you can set the font.

Edit: so type "First Name (required)" and "Last Name (required)". and remove from "Your Name".

Could you just use a regular text block? 

Just now, bengroner said:

@Inspirerd, Also, I was hoping to mark both you and Melody495 as the solution on this questios, but I see it only let me do one, and I clicked Melody495 first. I'm sorry, I wanted you to get credit for coming up with the code!

Ah ops. Yeah the code solution should definitely be the solution, I just gave direction 🤣 glad it worked out!

Display none doesn't remove the element, it's still there, just not showing. In your case, first-letter is styling the quotation mark in the <span>. But, Firefox (sounds like safari also) treats certain characters as letters. In your case the quotation in the span is the first-letter. A bug perhaps? But any characters around the first real letter is being treated as part of the first-letter selection, so it's just lucky that it worked on Firefox (and safari).

Not sure what's the best solution. Let's see... or someone else might be able to help.

Edit: assuming there is no built-in option to use your own quotation mark in the block?

23 hours ago, Dilon said:

Hi @tuanphan , I would like to create an image in my site, and replace it with a custom whatsapp image with text etc and make it clickable. How do I make it so when customer clicks this button, it will pop out a new tab to whatsapp, quite similar to version 1 that you suggest, just that it is for a specific image, therefore would require a link for the image.  Thank you for your guidance!

You can upload your own image and replace the <img> scr link in the code with yours.

https://insidethesquare.co/resources/upload-image

I see the title is white already? Remove that and try adding this below

item-pagination-title {
	color: white;
}

item-pagination-icon svg {
	stroke: white;
}

The looping effect? Try this

Hi, let's tackle everything except the code block for now. Have you tried going to Site Styles (brush icon top right) -> Colors to change the corresponding text color for each of the element you are referring to? No code.

6 minutes ago, bengroner said:

@melody495, Thank you for helping out too. I do have a Business Plan, but still don't see the custom code function. And I've looked all around Site Styles, and I don't have the Colors section you took have a screenshot of. I wish I did, because that would be an easy fix. Do some templates have more options to edit than others? Mine has lots of options for the site, header, main, footer, and mobile, but that's about it. The only two things under Content: Colors is "Body Text" and "Links." Is there another way to pull up those Summary Block options you have?

Hi,  for custom code, try Website -> scroll to the bottom of Pages, click Website Tools under Utilities -> click Custom Code.

What's the first page you see when you click on Site Styles?

Hi, your css uses Cardinal Fruit for the .title, but you don't have a custom font for that. You have Cardinal Fruit Regular and Italic installed.

Can you change that and see?

Link to your website please? Does adding this to the block work?

color: white;

You are very welcome 😊

Hi try this

#block-yui_3_17_2_1_1698446164876_34675 .sqs-svg-icon--list {
	display: flex;
	justify-content: space-between;
}

This will add space between the icons. Resize the block to how wide you want your icons to span

1 hour ago, bengroner said:

@Inspirerd,

Thank you for the quick response! I am open to a code solution, so I appreciate you writing it out for me. However, when I go to the Design tab, it doesn't show Custom CSS like the tutorial says. I only have the options:  Logo & Title, Template, Site Styles, and Squarespace Badge. Once I find the Custom CSS box, I'll give this code a try. Do I just copy and paste it exactly as you've written it, or should I type it in myself? (I feel like I've seen the CSS box before, I just don't know where it could have gone.) 

You need Business Plan or above to use custom code.

Try go to Site Styles -> Colors -> choose the relevant themes for your section, click edit -> Find Summary Block -> Excerpt Color

27 minutes ago, GKG said:

@melody495perfect fix! Thank you!!

 

You're very welcome 🙂 Please mark as the solution if worked