How to create a custom layout for mobile in Squarespace // change squarespace on mobile only

[@InsideTheSquare]

⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: kzbin.info/www/bejne/m6atonuOqMR_Z68

[@aboutphotography]

Thanks!

[@InsideTheSquare]

Thank you for your support!

[@SabrinaAnijs]

You must be send from heaven, jeeezzzzz! How are you not famous with million subcribers?! The way you explain things so simple and clear, mindblowing! Thank you so much! I am on line 107 with coding my website and it's all codes from your youtube channel. LOVE LOVE LOVE!!!!!!

[@InsideTheSquare]

Wow, thank you so much!! I'm glad you like my style 🥰 And congrats on coding over 100 lines of CSS; that's awesome!! 🥳

[@zeelycreative]

I normally design in WordPress but my new client wants a website in Squarespace, a first time for me. Thank you so much for this tutorial! It worked like a charm. You have FOREVER changed my design life!!!

[@InsideTheSquare]

You are so welcome! I'm happy to hear that my work is helping you with yours 🥰

[@victoriamontemayor]

This video needs to be made famous! Great job explaining this and providing a REAL solution.

[@InsideTheSquare]

Victoria! Thank you so much! Your comment just made my day.☺️

[@vividiazdeleon8814]

I just gained a piece of my life back that I didn't know I had from all the work you just saved me from lol. Amazing as always! THANK YOU!!! 👏🎊

[@lanahurteau4742]

Phew! I've been distressed for two days and this video saved me. Thank you!!

[@InsideTheSquare]

You are so welcome! 🤩 Your comment just made my day - thank you so much for letting me know!

[@meaganjustus]

LOVE this tutorial!! It's a game changer and so much easier having this as an option when you really want something on desktop that just doesn't work on mobile :)

[@InsideTheSquare]

Thanks Meagan - I totally agree!!! Such a game changer 🥳

[@SpeakingEnglishToday]

This is by far one of the most helpful AND (at the same time) easiest tutorials I have ever found. You've made my life so much easier and have saved me hundreds of hours of stress and frustration. THANK YOU!!!

[@InsideTheSquare]

You are so welcome! 🤩 Your comment just made my day - thank you so much for letting me know!

[@KILLUMINATI_MOVEMENT]

Computer says no

[@HESCLoansInternal]

An absolute game changer. Really excited to see this is possible as we are considering utilizing Squarespace for my organization!

[@InsideTheSquare]

You are so welcome! I’m happy to hear that my work is helping you with yours! ☺️

[@sylviajade]

You are an angel!! I literally have the tech skills of an average 80 yr old, but my website is an art portfolio so I feel like I NEED things arranged in a certain way. Thank you SO much for explaning this in a way that some one who doesn't actually know what CSS is an aronym for can 1) understand and 2) exicute using the copy-paste code and linked tools you provided!

[@InsideTheSquare]

Sylvia! You are so welcome! 🤩 Your comment just made my day - thank you so much for letting me know!

[@Lesavant_7]

Very clear and concise for a website and code newbie, thank you

[@InsideTheSquare]

You're welcome! I'm glad it was helpful 😊

[@ToonReunis]

Thank you, that was great. It was driving me nuts that changes weren't separated. It boggles me there is no way to toggle this inside of squarespace. Oh well, this works wonders!

[@InsideTheSquare]

Yay! So happy I could help😎

[@araalfaro735]

You are awesome Becca!!! ✨🥰 saves so much time to optimize the mobile view

[@InsideTheSquare]

Thank you - glad you like this trick, too! ☺️

[@EmmaRossum]

Thank you so much for sharing all this knowledge. You are the best & so so helpful!

[@InsideTheSquare]

You are so welcome! 🥰

[@bskellz1134]

This was the first code I have ever done. Thank you

[@guarawow4221]

You are amazing! Thank you so much! I've been looking for months for this! You are the Queen of Web design!

[@InsideTheSquare]

Thanks GuaraWoW!! So happy I could help :)

[@astropadre]

This is so clutch! Thank you for creating this!

[@InsideTheSquare]

You’re welcome! Happy to help. 😎

[@ALINAsmusic]

Thank you so much for this quick and awesome video! This is EXACTLY what I needed

[@InsideTheSquare]

Your comment just made my day! Glad I can help!❤️

[@hansventuries]

Still relevant, absolutely love it. Thank you!

[@GilesOji]

You're the best, you really should have 100K+ subs

[@InsideTheSquare]

Thank you so much!! 🥰 Hopefully someday...

[@Sebastian-ff5dj]

Merge! Sa-ti dea Dumnezeu sanatate!

[@lunarisfalconstudio]

Omg this is amazing!!! Definitely going to overuse this one! Thanks

[@zomzom7802]

This is really really helpful! Thank you so much!!! ❤❤

[@InsideTheSquare]

You're so welcome! ☺️

[@marknelson2570]

thank you so much - your videos are immensely helpful!!!

[@InsideTheSquare]

You’re so welcome! I’m happy that my work is helping you with yours ☺️

[@vedantchoudhary6842]

Thank you so much for this video, it made my life so much easier :)

[@InsideTheSquare]

You’re welcome! Happy to help. 😎

[@PurposeinPattern]

Super clear, super helpful! Thank you!!

[@InsideTheSquare]

You're welcome! :)

[@YTillie2000]

SO helpful!! As always, many many thanks!

[@ninomatas8708]

Best tutorial ever

[@stevenMcCaskill]

omg so helpful thank you I never thought of that

[@InsideTheSquare]

Yay! So happy I could help! 🙌🏻

[@yokefellowcreative]

This was incredibly helpful. Thank you so, so much.

[@InsideTheSquare]

Yay! So happy I could help 🥳

[@serenspurgeon]

SO SO HELPFUL, thank you!

[@InsideTheSquare]

Yay! So happy I could help! 🙌🏻

[@oscargomezbha]

Thank you so much, really appreciate it.

[@InsideTheSquare]

You're very welcome!

[@sgnisotel]

This is SO helpful. Thank you!

[@InsideTheSquare]

Yay! So happy I could help! 🙌🏻

[@katelynnrose1792]

You are an ANGEL. Thank you so much!

[@InsideTheSquare]

Your comment just made my day - thank you so much! 🥰

[@schmidt1338]

You are a genius!

[@InsideTheSquare]

Thank you - glad you like my ideas! :)

[@lesvillasin1276]

Thank you so much! You're da best 🥺

[@InsideTheSquare]

You’re welcome! Happy to help. 😎

[@sashaleal5505]

OMG, you are the best!

[@InsideTheSquare]

Thank you - so glad you like my work! 🥰

[@dalefraser9771]

This is fantastic!

[@InsideTheSquare]

Thanks Dale - I thought the same thing when I tried it; I just had to share!! 🥳

[@bballmasterpsp]

Great tips. thank you!

[@InsideTheSquare]

Glad it was helpful! 🙌🏻

[@subhendupattanaik9411]

You are the best

[@InsideTheSquare]

You are so welcome! 🤩 Your comment just made my day! I will add your request to my tutorial idea list, so stick around!

[@jessiecoghlan7010]

This is a game changer, thank you! Is it possible to take it one step further and have a mid range for tablets?

[@GrgoPetrov]

I am not sure if my comment disappeared but thanks a lot for the tutorials! I managed to get it work however struggle with implementing the code for the custom mobile layout from your other YT video with this one. I would love to use different min width on my desktop version and cannot get the code to work (either nothing happens or the overall scrolling effect disappears)...

[@InsideTheSquare]

To adjust the min width in your desktop you should use the site style setting for spacing. You can adjust the site max width and the site gutter there. Hope that helps!

[@eliahlopez]

thank you so much for this!!

[@InsideTheSquare]

Yay! So happy I could help! 🙌🏻

[@andrewpardue4395]

Oh my gosh you are such a life saver I swear. This is great. Thank you! Random but do you know a way to slow down fade in and out transitions in a simple slideshow?

[@InsideTheSquare]

That kind of feature isn’t something we can change with CSS, but the official support articles at Squarespace might be of help: support.squarespace.com/

[@baterias5073]

bro i love you thanks

[@InsideTheSquare]

Yay - so happy my tutorials are helping you rock your Squarespace site 🥳

[@_brayanenriquez]

THANK YOU SO MUCH OMG

[@InsideTheSquare]

You are so welcome! I love this workaround 🙌

[@mixedmindz]

thank you, thank you, thank you!

[@InsideTheSquare]

You are so welcome! This is one of my favorite time saving tricks 😎

[@hunterfox6230]

Great tutorial! Question, when I hide a section, there seems to be a blank space in my vertical layout where the hidden section is stored. This blank space is creating a strange spacer in between my content. How do I correct this? Thank you!

[@InsideTheSquare]

That's really odd 🫤 Display:none removes the section completely so something else is getting in the way. I'd recommend checking to see if you have a border enabled on either one. You can also dig into the source code via inspect tools to find the culprit; best of luck!

[@hunterfox6230]

Okay! I figured it out by accident! I placed a space between Section and [Section ID]. This caused the issue. @@InsideTheSquare

[@alexquantock2665]

Can this be done for multiple blocks? Can you put multiple block IDs in the same code? Thanks!

[@InsideTheSquare]

Great question! You can create a swap like this for content blocks as long as you separate the blocks with a comma. A word of caution: when you hide a block, the layout will change, so sometimes a full section swap is easier than modifying every content block inside. 😉

[@CarlosBarronJr]

Awesome!!

[@InsideTheSquare]

Right?! This code trick was too cool not to share! 😎

[@gentlestormwyatt]

I don't know about coding but would looooove how to do it on my website. Thank you 🥰

[@InsideTheSquare]

You're welcome! :)

[@forkanelebdi8933]

Hey, thank you for the benificial content. But I wanna know how Can I add an online ordering systeme for a restaurant website ?

[@InsideTheSquare]

Hey Forkane Lebdi! You'll need to find some kind of third party program or app to do that, or see if you can make the services feature of Squarespace work for ya 🤷 When you're ready to change the style or look of your Squarespace site (not the way it works) definitely come back to my channel to learn about CSS!

[@MattRockett]

Squarespace actually purchased a company that handles this. It’s called “Tock”. If you do a trial of squarespace, you may be able to test run.

[@forkanelebdi8933]

@@InsideTheSquare Alright, thank you

[@aboutphotography]

Somehow can't make this work on 7.0 Should it be working?

[@InsideTheSquare]

Nope - 7.0 websites don’t have page sections. Brine index pages and other 7.0 standard pages use different selectors, so this code work. You can learn more about the differences at insidethesquare.co/themes

[@blaketorres4310]

Thank you for posting this - and all your videos, you're awesome! Is there a reason I wouldn't be able to see the data section ID? I'm not seeing it with the plug in or when inspecting elements. Potentially useful info: I'm using 7.0. I'm trying to do this on the home page in order to have mobile friendly banner images

[@InsideTheSquare]

This tutorial is specific for version 7.1 but it sounds like you are using an older version of Squarespace that responds to different codes. Check out this article for more info: insidethesquare.co/themes

[@larrymclarry5511]

Great video, will this code work on a block on a homepage?

[@InsideTheSquare]

I am not quite sure what you are trying to create but I would love to help! Feel free to submit a tutorial request with more info at insidethesquare.co/suggest-tutorial

[@TiberiousGreene]

So I’m theory that code is for one set of mobile/desktop sections on one page with the id.. but what if there’s a few sections like that on a page and on a few different pages? Do you just basically copy and paste and have like 10 of these paste codes in that one css section? I know it’s your demo site but it’s one thing I noticed in your videos if you did all these tutorials mixing them on one site you can have all these codes in the same main css panel?

[@InsideTheSquare]

You can have thousands of lines of code in the CSS panel, but you probably don't need to (I only have 300 on insidethesquare.co 😉 ) If you have multiple pages that need this magic, you can separate the selectors with a comma like this: [mobile-data-section-id:1], [mobile-data-section-id:2], [mobile-data-section-id:3]{display... Check out this article on my site for more info on combining codes and the symbols used in CSS: insidethesquare.co/resources/css-symbols

[@realisticholistics]

@@InsideTheSquare Similar question! (ps - your free tutorials have been so valuable thank you!) Q: is it possible to apply this to an original blog post "template" that we make a copy of & add new content into (for efficiency/aesthetic purposes)... will the query code auto-apply to every new blog post? Or is it good ol' copy & paste the query code to the unique page ID every dang time? Totally understandable if need be... just checking to see if there is a universal way to apply this to blog posts.

[@philhsc]

Brilliant

[@InsideTheSquare]

Thanks - glad you liked this workaround! :)

[@mickalvarezflores9054]

This was so helpful! Would the px width size be different if I wanted to also have specific sections for tablets? I'm not sure if mobile sizing would still look good on tablets.

[@InsideTheSquare]

You can target tablet seperately, but definitely consider using a relative value like % or vh/vw. YOu can learn more about the different length values in this article: insidethesquare.co/resources/length-values

[@RubeVidz]

Hi! I'm a little unsure how to best apply this code. My desktop looks great but mobile is still showing weird 3-blocks of video for my portfolio. Happy to chat more if you are! Thanks

[@InsideTheSquare]

That doesn’t sound right! I would love to help - send me more info at insidethesquare.co/code-help and I’ll hop into your source code and take a look.

[@GevorkBislamyan-u2v]

thank you so so much

[@InsideTheSquare]

You're welcome! 💕

[@sehwagali]

Hey, any tip to have 2 different sections for Desktop and iPad?

[@InsideTheSquare]

Check out this tutorial that will teach you how to create an alternate layout for mobile: kzbin.info/www/bejne/d4LRqJufqaqkpKs

[@sickedude4life]

Hey this is so helpful, but I was wondering if there is a similar workflow to achieve this on 7.0? (Brine > Marta) :)

[@InsideTheSquare]

Unfortunately this technique is specific for 7.1, but I'll brainstorm some workarounds for Brine index pages... stay tuned! :)

[@danielcanizales1036]

What happen with Tablet view??

[@InsideTheSquare]

You can set up as many breakpoints as you want! I have more info at insidethesquare.co/mobile

[@kitlarson]

Does anyone know how to adjust the width for each section? When I apply the code none of my sections disappear like it does in the tutorial. Thanks in advance

[@InsideTheSquare]

Check out this tutorial that will teach you how to create an alternate layout for mobile: kzbin.info/www/bejne/d4LRqJufqaqkpKs

[@empulse8957]

This is super awesome thank you! Quick question though, I have a rotating banner on my home page, I would love to do this on that as it comes up wrong on the mobile version, can I do this or will the codes get confused with each other?!x

[@InsideTheSquare]

Great question! I'll have to brainstorm on this one; probably possible with some clever CSS. if I am able to create a code for it, I'm sure it will make a great tutorial so stay tuned!

[@ed8311]

Is this bulletproof to apply to all mobile devices and vise verca? Will there be any devices that jumps into an akward middle of the 640pixels?

[@InsideTheSquare]

That's a great question Ed but I don't think anyone will be able to give you a definitive answer - devices are changing all the time, and no one can confirm how long older models and older browsers will be compatible with modern sites! 😬 Squarespace uses specific breakpoints, but they don't publically release that info because they do vary in size for different grid layouts, auto sections and specific content blocks. These are the recommended ones that I use in my work: learn.microsoft.com/en-us/windows/apps/design/layout/screen-sizes-and-breakpoints-for-responsive-design

[@JoëlSchwalenstocker-r6u]

I am using an anchor link for a section, so the name of the Squarespace ID is just the anchor link name. How do I adapt the code to work with that name?

[@InsideTheSquare]

you can use either - as long as it starts with #

[@YinYinHenderson]

What if I don't have media? Would that change from @media to @text? or how should the code be?

[@InsideTheSquare]

"@media screen and..." is a css code that specifies a device size - it's for the browser to understand when to use a code and isn't related to the content of the page. Check out this tutorial for more info on targeting mobile screens; hope that info helps! insidethesquare.co/mobile

[@SamuelNeville-m1y]

The second section in the code always seems to interfere with my header is there something I'm missing?

[@InsideTheSquare]

That's super strange - the header isn't a part of this code in anyway! Check out some of my troubleshooting tips here: insidethesquare.co/codehelp

[@Junkk29]

Thanks

[@InsideTheSquare]

You're so welcome - thanks for the support!

[@TheHERO220]

After I use the custom CSS im left with awkward white space. How can i fix this? Any help would be a life saver

[@InsideTheSquare]

I am not quite sure what you are trying to create but I would love to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help

[@TheManumarfu]

Hey amazing tutorials, it always shows an error for me, and doesnt hide the sections. is it because my site isnt published yet? Or what could I have missed?

[@InsideTheSquare]

If you're getting an error, there is an issue with a character in your code. Check out some of my top troubleshooting tips here (insidethesquare.co/codehelp) and be sure to grab my free guide on CSS basics at insidethesquare.co/learn

[@TheManumarfu]

Thanks for the answer! let me check to see if i can fix it that way@@InsideTheSquare

[@arianeblank7775]

Im getting a syntax error even though I have it exactly like you do! is squarespace not supporting this anymore?

[@InsideTheSquare]

This code still works! A syntax error means there is an incorrect symbol in your code, or that you haven't finished typing it yet. You'll see me get a syntax error until the very last curly bracket is closed. You can usually find out what line /character is causing the error by reading the red text that shows up. If you're still having issues, you can check out my other troubleshooting tips at insidethesquare.co/code-help

[@LaurenSmith-p5i]

Do you have any code that would get me a gallery with one column on mobile and 3 columns on desktop?

[@InsideTheSquare]

This is such a great question - totally adding it to my tutorial to do list!! In the meantime, this is the code you need. Just a heads up: this wont be visible in the site preview when you're working in squarespace, but test it on a mobile device and you'll see the single column. @media only screen and (max-width: 768px){ .gallery-grid-wrapper{ grid-template-columns: repeat(1, 1fr)!important; } }

[@jenbaran7120]

I followed the steps it looks right on squarespace editor, but when I go to the mobile site on my phone it shows both the web and mobile version of each section. Is there a way to fix this?

[@InsideTheSquare]

Sometimes phone browsers are lazy and will cache a site you visit often, so it won't bother rechecking the code. Try in an incognito tab or by clearing your browser. if it's still not doing its thing, email me a link: support-at-insidethesquare.co

[@urzilli]

Great tutorial! Quick question I have made a slanted header and footer, but on mobile the header is not visualize as slanted. Is there a way to make it also work on mobile? The footer is working. Thanks! :)

[@InsideTheSquare]

I’m not sure why it would do that instead, but I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help

[@urzilli]

@@InsideTheSquare Will do, thank you!

[@stephenbarrett7028]

Hi, Becca. When I use this code for the hero section of my website, the top of the hero section that I want visible on mobile sits behind the header. Any idea how to fix this?

[@InsideTheSquare]

Great question! it depends on the settings you are using but I’d be happy to help you create the perfect code! Submit a code help request with more info: insidethesquare.co/code-help

[@mellamodanielaloera]

Did she ever help you with this? She's not taking help requests so wondering what to do.

[@InsideTheSquare]

@@mellamodanielaloera hey Daniela! I’m still working on requests from las year but almost caught up 😅 You can add a margin to the top of your mobile section that is the same size of your mobile header; here is an example: margin-top: 50px;

[@1234Wilksey]

This isnt working for me.. I'm using an image slider on Squarespace 7.1 and both sections are showing on both Mobile and Desktop... after installing the code and using their unique ID's

[@InsideTheSquare]

Please share you code here in the comments so I can help.

[@1234Wilksey]

@@InsideTheSquare Oh wow that's a fast reply! Here's the code: @media only screen and(min-width:768px) { section[data-section-id="6666bd2abd67f448120f1893"]]{display:none}} @media only screen and (max-width:768px) { section[data-section-id="6716825c3ab35c5e060839ad"]]{display:none}}

[@InsideTheSquare]

Yup - I'm a real live person here, doing my best to help others make the most of the product they signed up for :) You've added double square brackets in your code: ...93"]]{... should be ...93"]{... Fix that for both data section id's and you'll be set!

[@1234Wilksey]

@@InsideTheSquare Aha! There we go! I didnt even see that little bracket. Thank you for being the fresh pair of eyes on this. All fixed! Still though, this should really be a native feature in SquareSpace.

[@marybowman9058]

hi there!! im building a website in 7.0, is there any way to create a layout specific to mobile using a 7.0 site? thank you!

[@InsideTheSquare]

Hey Mary! I have something awesome coming out for 7.0 users, so keep an eye out and make sure you're signed up for my mailing list! As far as mobile layouts... I have a tutorial on how to change mobile font size: kzbin.info/www/bejne/lZmYoJKAYqymp9k but I would recommend just searching through my channel for the specific things you're looking for, I'm sure there's a tutorial for it!

[@ChicHulaGirl86]

Is there a way to change lb to oz on my item weight? My items are under a lb but i can’t figure out how to write it correctly to be under a lb 🤦🏽‍♀️😂 since i can’t figure out how to change the weight to oz 😩

[@InsideTheSquare]

This sounds like a template thing and not a CSS thing. Check out the official Squarespace support articles for more info: support.squarespace.com/

[@Junkk29]

This is a fantastic tutorial! Exactly what I needed for my new site. Question for you though - is there to "label" the codes so that I could easily make edits to it down the road. For example...this group of code is for my Homepage, this group of code is for my About page, etc...things got a little confusing since I have to apply it to all my pages on the website. Thank you!!

[@InsideTheSquare]

Great question! You can totally add little notes to your CSS so you can remember what does what. I have an article about it on my resouces blog: insidethesquare.co/resources/code-notes

[@Junkk29]

@@InsideTheSquare Perfect!! My mobile view is looking ✨✨ thanks to you! Your next cuppa joe is on me ☕

[@ChristopherAndersonsj2great]

Can this be used with more than two sections?

[@InsideTheSquare]

You should be able!

[@boardjamesgeek]

How do you do this with a block? I tried putting it in the code and getting an error

[@InsideTheSquare]

Hey JE! It's hard to say without seeing your code, but check out my free troubleshooting tips at: insidethesquare.co/code-help

[@midnightmonkey92]

Does anyone know how to solve for anchor links in the nav bar after using this method? I followed this tutorial (thank you!) and made my original 6 section site into 12 (first 6 is desktop, last 6 is for mobile) so I can customize the mobile experience as my desktop site design looks wacky on mobile. However, the nav links I have going to specific sections using anchor code doesn't work because there's two destinations per section (one for mobile, one for desktop). For example, in my I have two "About" section (one for mobile and one for desktop) but my nav bar can only link to one of them. Does anyone know how I can set the nav bar link to go to the mobile section on mobile and the desktop section on desktop? Thanks!

[@InsideTheSquare]

Oooh that is a tricky setup! I would recommend creating two different folders in your navigation - one for mobile and one for desktop - and then use CSS media queries to hide the desktop folder on mobile and vice-versa. Feel free to email me a link for help with the hiding the links part after you move your content into the two folders. You can reach me at support-at-insidethesquare.co

[@Tristianwunder]

not working for me for some reason

[@InsideTheSquare]

You might be using a different version of Squarespace than what this video was created for, which means the codes won't work for your site. Check out this article for more info on that: insidethesquare.co/themes

[@MafyaOfficial]

this isnt working for me...any tips?

[@InsideTheSquare]

I’m not sure why it would do that instead, but I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help

[@jenbaran7120]

DOES THIS WORK FOR WIX TOO?

[@InsideTheSquare]

I have no idea - I don't use wix, but I don't think you can add custom code to a wix site 😬

[@EdwinGoed]

Trying to get it working but using the chrome extension i got two identical page id's..? Donkey here ;)

[@InsideTheSquare]

You'll want to use a page section id - the one that starts with section[data-section-id] and not #collection. Hope that info helps!

[@heathertesch4588]

Thank you for your wonderful tutorials!!! Just to confirm, to create a centered mobile design vs. a left aligned desktop, I'd have to create duplicate sections and then set separate code for each section?

[@InsideTheSquare]

Great question! This technique is great if you need to change the content, but if all you need to do is change the alignment, then you don't need custom code! Check out this tutorial for more info on alignment: kzbin.info/www/bejne/mYDZc4OuibiBi6c

[@otaku___oasis]

once more some basic functionality that is not working in Squarespace, I'm regretting the day I've opted for Squarespace. Anyway only in the footer, the link icon in the text blocks tool bar is disabled so I can't add links. Even if I add a section from the footer templates, with text block containing links in it, I am not able to modify the links because the link icon is nowhere to be seen. Shortcuts doesn't work either. Same in different browser. Link icon for text blocks appears regularly in any other section except footer. And it was working until a few days ago because I've already places a link before. Please this is a basic function. This is really a fucking basic function! Is there a code workaround? Please!

[@InsideTheSquare]

I’m sorry you are so frustrated with Squarespace. I don’t work for Squarespace and I have no control over the program. It sounds like a common function isn’t working for you, and I strongly recommend contacting their support team for help. support.squarespace.com

[@simonblanco6716]

Here is the code from this tutorial; be sure to change the data section id! @media only screen and(min-width:641px) {[mobile-data-section-id]{display:none}} @media only screen and (max-width:640px) {[desktop-data-section-id]{display:none}} be sure to change the data section id! .. to what? i. dont get it t.t

[@InsideTheSquare]

You have two sections - one that is mobile and a second for desktop. Follow the steps in the video and you’ll see how I use the chrome extension to get the data section ID - those are unique for the sections on your site. Replace the filler text in the example with your own unique id’s.

[@mvdison]

This moved my gallery underneath my header for some reason. :/

[@InsideTheSquare]

That doesn’t sound right! I would love to help - send me more info at insidethesquare.co/code-help and I’ll hop into your source code and take a look.

[@anastasiaramirez2853]

whatt if when i load mobile view its still showing the desktop version , do i need to adjust the pixel size????

[@InsideTheSquare]

Interesting! The pixel size is standard so I would leave that part of the code alone. Try checking out the mobile view on an actual phone and not the editor; sometimes the site preview wont display changes.

[@anastasiaramirez2853]

@@InsideTheSquare So i actually ended up switched the pixel size for desktop from 640 to 635 and that worked for me!

[@joewray814]

Syntax error on line 4? I think I copied perfectly but it does say CSS does not apply to cover pages but that is the crucial one I need to be different! Help please

[@InsideTheSquare]

Hi Joe! You will always see a syntax error alert until your code is complete. You can see it in some of my videos! If that doesn't work, feel free to submit a code help request with more info here: insidethesquare.co/code-help

[@joewray814]

@@InsideTheSquare Thanks so much for getting back to me. As your inbox is full I'm unable to send one. I have had a look and can't see where I have gone wrong!