inside_the_square

@AppealedApple totally! I hopped into your CSS and updated some of the code you had in there to make this magic happen. Feel free to adjust the top:-2rem to the size that suits you best! 

How this works: we had to move the announcement bar down to z-index:0, then apply a position absolute to the image so we could give it a z-index and move it up the x-axis with a negative top value.
Hope this info helps and best of luck with your project!
header#header { box-shadow: 3px 4px 8px rgba(54,49,94,.5) } footer#footer { box-shadow: 3px 4px 8px rgba(54,49,94,.5) } #announcement-bar-text-inner-id p { font-size: 16px !important; text-align: right !important } .sqs-announcement-bar-close { display: none !important } .sqs-announcement-bar-dropzone{ z-index:0!important } .header-title-logo,.header-title-logo a { overflow: visible !important; margin-bottom: -50px; } .header-title-logo img { max-height: 90px !important; position:absolute; top:-2rem; z-index:999!important } .header-title-logo img,.header-title-logo a { max-height: 150px !important }  

@AppealedApple totally! I hopped into your CSS and updated some of the code you had in there to make this magic happen. Feel free to adjust the top:-2rem to the size that suits you best! 

How this works: we had to move the announcement bar down to z-index:0, then apply a position absolute to the image so we could give it a z-index and move it up the x-axis with a negative top value.
Hope this info helps and best of luck with your project!
header#header { box-shadow: 3px 4px 8px rgba(54,49,94,.5) } footer#footer { box-shadow: 3px 4px 8px rgba(54,49,94,.5) } #announcement-bar-text-inner-id p { font-size: 16px !important; text-align: right !important } .sqs-announcement-bar-close { display: none !important } .sqs-announcement-bar-dropzone{ z-index:0!important } .header-title-logo,.header-title-logo a { overflow: visible !important; margin-bottom: -50px; } .header-title-logo img { max-height: 90px !important; position:absolute; top:-2rem; z-index:999!important } .header-title-logo img,.header-title-logo a { max-height: 150px !important }  

Hi there, 
I am aware now that autoplay videos might not be displayed on mobiles due to settings. 
I would like my desktop version to display an autoplay video, but mobile to display an image instead. 
Could you please help me with the code and instructions for this? 
Thank you. 

Hey @rsmith3074 - I realize you posted this weeks ago but I just now got back onto the forum and wanted to share the answer in case you still needed it! I use CSS to do this; this code does the trick for me. Hope it helps! 
 
.header-burger { display:flex!important} .header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;} .header-nav, .header-actions {visibility:hidden!important}  
 

This help article has some good information on it.
https://support.squarespace.com/hc/en-us/articles/360002090267-SEO-checklist?platform=v6&websiteId=63cbb50a382a9f16d0617b89
@inside_the_square has a new video out too that's awesome. 
 

Hey @deirdrep - sorry this answer is a bit late but I am just now hopping back into the forums! Anywho, if you still need the code, this button will keep it active on all breakpoints and hide that hamburger for ya. Hope it helps! And let me know how those margins/paddings look after you try it; depending upon the size of the text in your button we might need to finesse this fit a little... keep me posted! 🙂
 
.header-burger {display: none!important} .header-actions .btn, .header-actions .header-actions-action--cta {display:flex!important; visibility:visible; margin:auto!important; order: 2!important;}  

I couldn't wait and I redesign my website 😬
Fluid engine is so easy and so cool 

I totally agree with @Tiny_Coast - focusing on your target market's language style is important.

For my audience, I try to remember that most of them are new to terminology that I use, so I  keep an eye on forums, Facebook groups, and the comment section on my YouTube videos to see what language styles I should focus my strategy on.
Instead of optimizing a blog post for "single page header code injection installation" I would use more casual language like "add code to one page"

I also want to add Pinterest suggested search to the list! They have a lot of data that prompts those suggestions, and while it might not be as fancy as SEMRush or Raven Tools it's great for brainstorming. 😊

Site URL: https://insidethesquare.co/fluid
Fluid Engine was officially announced today and I am over the moon excited about it! It has been SO HARD to not talk about this - so happy it's the 21st!! 😅

For anyone not familiar with FE yet, I made a quick overview video about what's new & different, what is still the same, and even recorded a quick screenshare to show off some exciting editing basics. It's all live on my YouTube channel ( https://youtube.com/insidethesquare ) and my site ( https://insidethesquare.co/fluid )

I am totally going to redesign my site with FE next month! Anyone else jumping on the band wagon with me??

Site URL: https://insidethesquare.co/fluid
Fluid Engine was officially announced today and I am over the moon excited about it! It has been SO HARD to not talk about this - so happy it's the 21st!! 😅

For anyone not familiar with FE yet, I made a quick overview video about what's new & different, what is still the same, and even recorded a quick screenshare to show off some exciting editing basics. It's all live on my YouTube channel ( https://youtube.com/insidethesquare ) and my site ( https://insidethesquare.co/fluid )

I am totally going to redesign my site with FE next month! Anyone else jumping on the band wagon with me??

That's rough. Now that I'm used to it, I vastly prefer fluid engine to classic. It's worth taking the time to re-adjust/fix the pages that were adjusted, instead of reverting imo. A fair few of the pages I had worked my hind end off to get working just right are not only now back to the way I like them, but also looking better. The stacking and layer editing is a dream, especially given the mobile/desktop separation now. 

I was totally unaware this change was coming. Clicked on a popup today and, as curiosity got the best of me, I saved the change to Fluid Engine on my pre-existing site. At first I panicked and was quite furious due to how it seemingly destroyed all of my hard work...but then I took a breather, and started messing around with the new engine and IT IS BEAUTIFUL. So many things I used to have to use CSS for are now just built in or otherwise circumvented by how the Fluid Engine operates. Most notably being able to (most things I've tried have worked) FINALLY edit desktop and mobile independently from each other. I'm in love with it. 

Site URL: https://insidethesquare.co/fluid
Fluid Engine was officially announced today and I am over the moon excited about it! It has been SO HARD to not talk about this - so happy it's the 21st!! 😅

For anyone not familiar with FE yet, I made a quick overview video about what's new & different, what is still the same, and even recorded a quick screenshare to show off some exciting editing basics. It's all live on my YouTube channel ( https://youtube.com/insidethesquare ) and my site ( https://insidethesquare.co/fluid )

I am totally going to redesign my site with FE next month! Anyone else jumping on the band wagon with me??

Hey @Laurelb01 ! Unfortunately, page sections won't respond to a selector like that, but you can totally add an anchor link using some HTML in a code block instead. This will pull that anchor to the top of your browser, so add it to the bottom of the page section just above the services section. Here is a step-by-step tutorial on how to create it: 
 

Hey @deirdrep - sorry this answer is a bit late but I am just now hopping back into the forums! Anywho, if you still need the code, this button will keep it active on all breakpoints and hide that hamburger for ya. Hope it helps! And let me know how those margins/paddings look after you try it; depending upon the size of the text in your button we might need to finesse this fit a little... keep me posted! 🙂
 
.header-burger {display: none!important} .header-actions .btn, .header-actions .header-actions-action--cta {display:flex!important; visibility:visible; margin:auto!important; order: 2!important;}  

Hey @deirdrep - sorry this answer is a bit late but I am just now hopping back into the forums! Anywho, if you still need the code, this button will keep it active on all breakpoints and hide that hamburger for ya. Hope it helps! And let me know how those margins/paddings look after you try it; depending upon the size of the text in your button we might need to finesse this fit a little... keep me posted! 🙂
 
.header-burger {display: none!important} .header-actions .btn, .header-actions .header-actions-action--cta {display:flex!important; visibility:visible; margin:auto!important; order: 2!important;}  

Hey Folks!  In 7.1 galleries are set up differently than they used to be in 7.
Long story short, it is no longer a width % or px issue, it's actually a setting that says how many are being displayed in a row.

The snippet below will specify the # of columns displayed - 2 in this example. And to apply this only to a gallery in one specific page section, you can use that section id first.

So... this code to target all grids galleries:
@media only screen and (max-width: 640px) { .gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;}]
Or this version for just the one section:
@media only screen and (max-width: 640px) { [data-section-id="123456789"] .gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;}} One SUPER important thing I want to mention - i am sure you all noticed that we get a mobile preview and a desktop preview... and thats it! It turns out that 7.1 was designed with one main break point at 991; so double check when your galleries are moving down to one and adjust that 640 accordingly ♥ #protip

Anywho, hope that helps! Let me know how it goes 🙂

I totally agree with @Tiny_Coast - focusing on your target market's language style is important.

For my audience, I try to remember that most of them are new to terminology that I use, so I  keep an eye on forums, Facebook groups, and the comment section on my YouTube videos to see what language styles I should focus my strategy on.
Instead of optimizing a blog post for "single page header code injection installation" I would use more casual language like "add code to one page"

I also want to add Pinterest suggested search to the list! They have a lot of data that prompts those suggestions, and while it might not be as fancy as SEMRush or Raven Tools it's great for brainstorming. 😊

Thanks for tagging me @paul2009 🙂 @brightbarboston there are some troubleshooting tips in the PDF (page 58 I think?) about copy and pasting out that PDF but you can always email me too! Send a link to support@insidethesquare.co so we can see what is going on. You might be targeting a different button type or have an extra formatting character in there. Please email me so I can help! ❤️

As a first step, I recommend you contact the author @inside_the_square.
 

I totally agree with @Tiny_Coast - focusing on your target market's language style is important.

For my audience, I try to remember that most of them are new to terminology that I use, so I  keep an eye on forums, Facebook groups, and the comment section on my YouTube videos to see what language styles I should focus my strategy on.
Instead of optimizing a blog post for "single page header code injection installation" I would use more casual language like "add code to one page"

I also want to add Pinterest suggested search to the list! They have a lot of data that prompts those suggestions, and while it might not be as fancy as SEMRush or Raven Tools it's great for brainstorming. 😊

I totally agree with @Tiny_Coast - focusing on your target market's language style is important.

For my audience, I try to remember that most of them are new to terminology that I use, so I  keep an eye on forums, Facebook groups, and the comment section on my YouTube videos to see what language styles I should focus my strategy on.
Instead of optimizing a blog post for "single page header code injection installation" I would use more casual language like "add code to one page"

I also want to add Pinterest suggested search to the list! They have a lot of data that prompts those suggestions, and while it might not be as fancy as SEMRush or Raven Tools it's great for brainstorming. 😊

I totally agree with @Tiny_Coast - focusing on your target market's language style is important.

For my audience, I try to remember that most of them are new to terminology that I use, so I  keep an eye on forums, Facebook groups, and the comment section on my YouTube videos to see what language styles I should focus my strategy on.
Instead of optimizing a blog post for "single page header code injection installation" I would use more casual language like "add code to one page"

I also want to add Pinterest suggested search to the list! They have a lot of data that prompts those suggestions, and while it might not be as fancy as SEMRush or Raven Tools it's great for brainstorming. 😊

Keywords are essential for generating traffic from search engines. But which keywords should you use? And how do you brainstorm your ideas? Let’s go through some ways to generate ideas and different types of keywords you can use.
To get started, there are tons of organizational note apps that lend themself to a personal brainstorm, so play around and see what works for you! I personally use Google’s JamBoard as my virtual sticky note go-to. This way I can visualize the contents of my site and see what keywords make sense for which pages. For my example photography business, I decided to break it up into the different types of photography I’m involved in and some potential keywords that would relate: 

Some questions to ask yourself when brainstorming:
 
Who is your target audience?  What sets you apart from your competitors?  What synonyms can you utilize?  For example: New York photographer and NYC photography are two different keywords. And what other words does Google autofill?  Type the words you've come up with in Google and see what else pops up! When determining types of keywords, there’s “Head” and “Long-tail”, and there are benefits to using both types. Head keywords are short, usually one-word keywords that catch a wide audience like ceramics, tapestry, and shoes. Long-tail keywords are Multi-word phrases that are more specific, such as engagement photography, NYC shoe designer, and LA dog cafe. Head keywords can catch a more general audience who might not be specifically looking for you, whereas long-tail keywords cater to those who search with the intent of finding a specific product or service.
 
How did you brainstorm your keywords? Any tools or tricks that aided you in the process? Share your thoughts and tips in the comments below!
 

Hey Folks!  In 7.1 galleries are set up differently than they used to be in 7.
Long story short, it is no longer a width % or px issue, it's actually a setting that says how many are being displayed in a row.

The snippet below will specify the # of columns displayed - 2 in this example. And to apply this only to a gallery in one specific page section, you can use that section id first.

So... this code to target all grids galleries:
@media only screen and (max-width: 640px) { .gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;}]
Or this version for just the one section:
@media only screen and (max-width: 640px) { [data-section-id="123456789"] .gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;}} One SUPER important thing I want to mention - i am sure you all noticed that we get a mobile preview and a desktop preview... and thats it! It turns out that 7.1 was designed with one main break point at 991; so double check when your galleries are moving down to one and adjust that 640 accordingly ♥ #protip

Anywho, hope that helps! Let me know how it goes 🙂