melody495

Hi @harlowbogie actually, you can change the vertical alignment of the top text box to "bottom align". Then you don't have to manipulate it with code. You can likewise change the bottom text box to top align.
Try and let me know if that does what you want. 

From what I can see, with your current settings, the behaviour you are seeing is by design, this is just how the FE works. As your text block is vertically aligned centred, it will add padding top and bottom when the page stretches to fill in the extra space on bigger screen sizes. 
Can you share a screenshot of the effect of changing the vertical alignment? Big text block -> change vertical alignment to top, save, click on preview (arrow at top right), change browser to greater than 100% or until you see the big gap issue. Share it and we can see what it does?
I'm limited by what I can see and suggest by just inspecting your website. If you want me to take it thorough look for you, drop me an email. 

Apologies, not sure why I thought that worked!
What screen sizes are they having issues with? Has to be very small, I'm only seeing the menu turn into scroll at less than 520px tall.
Try this in Custom CSS. The menu items are not display: flex, that's why spacing-between etc didn't work for you. Each text has margin around it, so the simplest way is you can adjust those numbers to make them closer together.
.header-menu-nav .header-menu-nav-item a { margin-top: 0; //change number to what you want margin-bottom: 0; // change number to what you want }  

Try adding this to Website -> Website Tools (under Not Linked) -> Custom CSS
.sqs-block-button .sqs-block-button-element--medium { display: flex; justify-content: center; align-items: center; } This will apply the changes to all buttons that is .sqs-block-button-element--medium.
Let me know how it goes.

Hi, it looks like you are using a template that doesn't allow you to select h4. But that is not the issue. With custom font, you won't be able to use the native SquareSpace select in a Text Block.
To use your custom font in the editor, please add a Code Block, then copy and paste the below code
<h4 style="font-family: caveat">Write what you want here</h4>  

Hi, try adding this line?
max-width: unset; Replace your first block of code with below
.gallery-grid .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); // overlay color height: 100%; padding: 0; opacity: 1; pointer-events: none; max-width: unset; } Let me know how it goes.

Hi, is this what you are looking for? Try adding this to Custom CSS.
.ProductItem-summary .product-details { width: 100% /*change value to what you want */ } Let me know how it goes.

Hi, looks like you've changed the navigation layout, from right to centre 🙃
Try this instead?
//Home page no menu// #collection-654e393a3cb0792dfdc5c996 { .header-layout-nav-center .header-nav-list { display: none; } }  

You are missing the closing a and img tag, add this at the end of your code
</img> </a>  

Hi, this code is not making anything changes for your videos because the data-section-id does not exist on your webpage. That is unique, so you need to change it to the id for your section.
change the first line to this and see?
section[data-section-id="65432b8278396716f29e57a8"] .sqs-block-video { Beware the code will crop your video. Because your video is already at full width.
 
Back to your original question though. I don't see any images next to that video, can you please clarify?

Hi, sounds like you have put the code in Site Wide code injection, so it is in every page. If you only want this on a specific page, please put the code in the code injection of that page only.
In terms of your issue, I went back to look at your post again, your console already tells you what the issue is. That 'textcontent' is null. So at the point of the code being run, there is nothing in 'textcontent'. The footer is being run at website load, so it's likely not when you want to run your code.
I suggest you wrap your code in document ready or domcontentloaded.
$(document).ready(function () { }  

Hi, try replacing with this code instead? Let me know how it goes.
.sqs-block-video .sqs-native-video { border: solid 4px #000369 !important; }  

Hi, please share a link to your website so we can help easier

Hi, have you tried going to Site Styles (the brush at to right corner) -> Colors, find line block and change the colour?
On the page you are having issues, click on Site Styles -> Colors. Hovering on your page will tell you the theme that page is using. Locate the theme and click edit (the pencil icon), and change the line block colour for that theme.
Let me know how it goes.

Hi, replace this block of code
@font-face { font-family: pixChicago'; src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65428be1564e95715793c4f8/1698860001828/pixChicago.ttf'); } @font-face { font-family: NeueBit-Regular'; src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65427b3493577f32c73cdefb/1698855733001/NeueBit-Regular.ttf'); } with this new code (missing a single quote at the beginning of the font-family name)
 
@font-face { font-family: 'pixChicago'; src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65428be1564e95715793c4f8/1698860001828/pixChicago.ttf'); } @font-face { font-family: 'NeueBit-Regular'; src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65427b3493577f32c73cdefb/1698855733001/NeueBit-Regular.ttf'); }  
Try and let me know.
 

Hi, remove FontURL at the beginning of your font file. From this, 
@font-face { font-family: 'Northwell'; src: url('FontURLhttps://static1.squarespace.com/static/629e828d31490d01d0f319ef/t/65497cac74a74b3d8224203c/1699314861015/Northwell.ttf'); } to this. Try and let me know
@font-face { font-family: 'Northwell'; src: url('https://static1.squarespace.com/static/629e828d31490d01d0f319ef/t/65497cac74a74b3d8224203c/1699314861015/Northwell.ttf'); }  

Hi, there is enough room for your text not to wrap. You can adjust the text box so it's wider, then it won't wrap when the screen size is smaller. Your text is centered, so just make sure you are expanding the text box equally on left and right.
Let me know how it goes.

Hi, there are 2 issues.
When you declared your new font, you are missing single quotes around the name, e.g. replace your first one with the below. Do the same for all your other custom fonts.
// My own regular font @font-face { font-family: 'Crimson Text'; // font family name, this can be named as anything you want. Once here, this is the name you will use. src: url(https://static1.squarespace.com/static/64bbec1009a61f1b8dfb39e9/t/6509d0807e6fd40c6b635a1d/1695142016438/CrimsonText-Regular.ttf); } When you then want to use your font for something, you need to refer to the same name as per above. e.g. change your code below from this
// ALL text everywhere html * {font-family: 'CrimsonText' !important;} to this. (the name you used is missing a space)
// ALL text everywhere html * {font-family: 'Crimson Text' !important;}  
Now just check and make sure they all match up and should all be working.
 
Let me know how it goes.

Hi have you tried editing the layout on mobile edit mode? If further help required please share a link to your website so can check easier. 

Hi, Edit -> Edit Site Header -> see options in screenshot below.
Edit: option available in 7.0 as well as 7.1
 
 

Is this all the code? Here you have only loaded the font file for "Bold". You need to do the same for "Regular". Then the rest of your code should work. 

I don't think that is your issue, as you can see from the below screenshot. The bottom example hover works, but that "reveal" text block is also #block-yui_xxxxxx

 
I would double check the behaviour of the css selector ~ , as I am not familiar with that. But for the pairing that works, the reveal text block comes AFTER the black box. Whereas the reveal text block that is not working, it sits as the very first element in the list, after the hover block.

Hi, I tried to load up a Pacific template to test, but not sure I found the right one..
Is this in a summary block? You can give each blog post a tag. e.g. "latest", "rest". The in summary block settings, you can filter by tag = "rest".

@Nimay I tested this on your website, so these are the  elements on your website. Can you add !important after each of the css styling and see?
Below new code
// makes the slideshow part smaller .user-items-list-carousel__gutter { padding-left: 10vw !important; padding-right: 10vw !important; } // Gives more padding between the arrows and the edge of the container .user-items-list-carousel__arrow-wrapper--left { padding-left: 2% !important; } user-items-list-carousel__arrow-wrapper--right { padding-right: 2% !important; }  
Let me know how it goes.
 
Edit: to answer your question on how to find your element name, you right click on the component and click inspect, you'll see the html. If you're not familiar with it then you'll need to read up on it, and be mindful of the parent/child relationships and how they behave, and some best practice. 

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.