hilaryb

9 minutes ago, hilaryb said:

Thank you, I will try it for now. But is there a way to fix this WITHOUT using custom code?

It SHOULD already be doing this according to the settings - are you (or is anyone) aware of a setting option that I might be missing? Or is this an error within Squarespace?

Also, code did not work.

13 hours ago, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
#siteWrapper .user-items-list-item-container.user-items-list-simple[data-button-font-unit="rem"] .list-item-content__button {
    left: unset !important;
}
.user-items-list-simple[data-button-alignment="center"] .list-item-content__button-container {
    max-width: unset !important;
}
}

 

Thank you, I will try it for now. But is there a way to fix this WITHOUT using custom code?

It SHOULD already be doing this according to the settings - are you (or is anyone) aware of a setting option that I might be missing? Or is this an error within Squarespace?

When using Simple List block on 7.1, the buttons align to the right, even though every setting indicates it should align centered. 

It's been an issue for some time now, but I'm just now looking into it. Is this a Squarespace issue? Is there a setting I'm missing? I can't figure it out. 

Site in question (although I've seen it happen in other places I also use Simple List blocks) is https://hilarybeckwith.com/services

10 hours ago, tuanphan said:

Which screen size do you see problem? It looks fine to me

It just depends on the window size. If the window size is shrunk down, the words split

2 hours ago, ReformDesign said:

Actually, I think you can combine the code like so:

//***Homepage Font Sizing***//

#block-yui_3_17_2_1_1676657096961_9238, #block-11d51f4bc5da4b443af7, #block-b9ab9ab5f2feed324232 h4 {
    font-size: 3.5rem !important;

	@media screen and (max-width:1140px) {    
	font-size: 2.5rem !important;
	}
}

This did not work to resolve the splitting. I recall this happening to other text within my page (although I can't rememebr where, or find the coding in my CSS), and the solution was not to do with "rem". 

"text wrap" may not be the correct term, but I am having trouble with some text lines breaking up in un-natural places, depending on browser window size. I need help creating code that will stop this from happening, whatever that looks like.

Public site: http://hilarybeckwith.com

1 hour ago, Beyondspace said:

You can try adding to Home > Design > Custom Css

#block-yui_3_17_2_1_1665094218540_4516 iframe {
  border: 20px solid #fff !important;
  box-sizing: border-box;
}

Support me by pressing 👍  or marking as solution if this useful for you

That did the trick, thank you!

Hello - I recently implemented a booking widget code (iframe) for clients to book directly through my client software, but I'm having some trouble with the appearance.

I *think* what I want is for some extra padding on the left (see image), or whatever the fix is to give more white space between the left edge, and the text/calendar dates. 

I've fiddled around with a lot of CSS and iframe, based on articles and forum information, but anything that adds padding to the left, pushes the text to the left edge, still.  So maybe this means it does not need padding, but rather a different alignment?

Please help!

Website is public: http://hilarybeckwith.com/inside-out

That looks like it did the trick, I appreciate the help!

Hello!

I have implemented a typeform questionnaire into my site, and on the desktop it looks great.

However, it does not adapt to mobile, which makes it difficult for people to complete the questionnaire.

How can I adapt it for a mobile browser?  The site link is http://hilarybeckwith.com/cha (public, no password required)

(image 1 is what it currently looks like on mobile, image 2 is what it looks like on desktop)

PLEASE HELP! 

On 11/12/2022 at 5:29 AM, tuanphan said:

Add to Design > Custom CSS

.fe-block-yui_3_17_2_1_1667509689769_14831 .sqs-block {
    justify-content: center !important;
    align-items: center !important;
}

 

That did the trick, although still having issues with image getting cut off. I've reached out to typeform for support there

I appreciate the help

9 hours ago, tuanphan said:

Can you share link to page where you added Typeform? We can check easier

Weird, I thought I typed it in, I apologize.

http://hilarybeckwith.com/cha

Also, apparently the images are also getting cut off at some points throughout the quiz. Not sure what's happening, although I'm making some changes today to the typeform, so it may look different by the time you look at it

Hello - I am trying to embed a Typeform code, but the default alignment is coming out funny, especially on mobile. I've watched Typeform's instruction video for doing this, and as usual, it does not work as simply for me.  Initially when I installed the code, only a small portion of the survey was visible, so I played around with the size, and was able to get more of it to show up, but can't figure out if this is a simple setting in this particular section? Or if I need to use custom code to get it right?

Can someone please help me to align this typeform so that it is centered (no matter how small or big the window), both on DESKTOP and MOBILE?

Nevermind!

I finally found more code in the Code Injection section that was causing the issue. I deleted the code, and all good now!

Site URL: http://hilarybeckwith.com/

Hello!

Initially on building my site, I hired a pro to help me put the nav links on both sides of a centered logo, in the header (I liked the look of it better). Now I've changed my mind, and would like them to not be separated.

Upon removing the CSS that the professional added to make that happen, it seems that the nav links are still being treated like separate left/right sections.

How do I correct that?  

Screenshot 1: shows the preview from my edit page, you can see all the nav links are there, but the ones closer to the right side are aligned funny (and when I fiddle with margins/padding, only the 3 nav links on the left are affected - this is how I know they're being treated as separate entities)

Screenshot 2: live view of my site doesn't even display the "right side" nav links.

Please help!!

On 7/30/2022 at 7:35 PM, tuanphan said:

Try adding to Design > Custom CSS

.header-nav-list {
    flex-wrap: nowrap !important;
}

 

This worked, thank you!

Can you please help with another issue?

This only happens sporadically, and I hired an expert recently to resolve it, but she could not replicate the issue.

Sometimes my site loads with a large area of empty/blank space to the RIGHT of the main content. 

Can you help me figure out where that issue is, and how to resolve it?

Site URL: http://hilarybeckwith.com/

I've used CSS to make the links at the top of my landing page divided, so that some appear to the left of my logo, and some to the right. 

The links on the RIGHT seem to stay in one line, no matter how big or small the window, but the links on the LEFT only stay in line if the window is nearly maximized.

Is there a way to correct this so that the links on the LEFT stay in line when the window is resized?

8 hours ago, biplav said:

Try adding this to Design > Custom CSS

 

section[data-section-id="629fee9786f2465d7d8c6dc0"]
    .row.sqs-row:first-child{
        display: flex;
		justify-content: center;
	}
	
	//Adding some spacing for the gap, increase spacing as needed
	#block-yui_3_17_2_1_1654648421854_15213{
		margin-right: 3em;
}

	//Removing the spacer, you can also just remove from the editor Im not sure if it will break it or not
	#block-yui_3_17_2_1_1654654334640_5483{
		display: none
}

}

Thank you, this helped!

Site URL: http://hilarybeckwith.com/

Hello - I would like to reduce the width of a spacer block placed between two text blocks (in order to bring the two texts closer together).

I used to have them displayed as a list, but I did not like the lack of customizing options for the text, so I switched to text blocks, with backgrounds to look similar to a list. I could not figure out how to add the background color AND give a small gap between the two, so I added a Spacer block, which is now too much space.

How do I reduce the width of this block without compromising the position of it?

Site URL: http://hilarybeckwith.com/

I've been fine-tuning some image sizing and fonts recently (may be unrelated?), and am now starting to see that on desktop, AND mobile, my site scrolls to blank space to the right, as if it is too large for the browsers.

Can anyone please help me pinpoint what is causing this, and tell me how to fix it?

15 hours ago, tuanphan said:

Hi.

#1. You want to keep layout same as desktop? yes

#2. Which element? see screenshot #3 - text at the top of landing page, below the navigating links.

#3. Overlap problem. You should check Line height option in Site Styles - Screenshot #2 - This is the only place I've seen this occur. Changing the line-height in Site styles will change it in other places where this issue is not occurring. How do I change it with CSS? 

Screenshot#4 - this is already a CSS custom sized font (because default sizing in Site Styles did not work for this block of text). How do I change for this Mobile block only, with CSS?

11 hours ago, tuanphan said:

Can you share link to a page where you used heading font adore you slanted?

http://hilarybeckwith.com (scroll down to the "Hey there! I'm Hilary")

Also, the "henderson sans basic" font does not seem to be working on some browsers for the heading text at the very top of this page. Squarespace preview shows it working, but it is not when I try to pull it up live on another browser.

9 hours ago, tuanphan said:

this is corect font name

adore-you-slanted

Note: Squarespace does not load all fonts, it will slow down the website. So when you use font-family for some font you will find it doesn't work.
What you need to do is set that font for a certain element, eg meta info, button...to make Squarespace load that font, then you can use CSS font-family.

I appreciate the info. I have tried "adore-you-slanted" and it doesn't work. 

And yes, I do have the heading font family set to a default, as you say, but I want to only change it on this one component. 

So, it sounds like, according to what you're saying, I am doing it correctly, Squarespace just can't tolerate it.

Is that correct?

Site URL: http://hilarybeckwith.com/

Hello - I have a few questions, all regarding the MOBILE version of my site.

1) The images in my mobile footer did not take on the custom sizing an alignment that I applied for the desktop. Can someone please help with this?  (see screenshot)

2) Custom font family does not apply on the Mobile version when I see it on my phone. Squarespace shows it should be applied in the preview, but in reality, it is not. (see screenshot)

3) Font/line spacing in a couple different places on mobile, are not spacing properly, both in the footer and on the page. (see screenshots)

Can anyone please help?

On 5/10/2022 at 9:58 AM, hilaryb said:

Site URL: http://hilarybeckwith.com/

Hello!

I have been trying endlessly to simply change the font family for h3 and h4 on ONE block of text, and I can't get it to work. I am doing exactly what I have in other scenarios, but it is not working.

I have tried putting in the font with hyphens, and without, tried capitalizing, tried without. CODING IS NOT MY THING. I don't understand why it won;t work. Please help!

Trying to change h3 and h4 in this one block of text to the font Squarespace calls "Adore You Slanted".

The code I have tried is (like I said, I've tried variations, as well):

h3 {font-family: adore-you-slanted !important;}

and h4 {font-family: adore-you-slanted !important;}

Please help!!

I've been playing around with this, and still cannot figure it out. It seems like I'm doing it correctly, but it only works with certain fonts, for some reason. 

Like, if I use that code with just 'arial', it changes the font as expected. But if I try other unconventional fonts from Squarespace's font list, it won't work. What am I missing?