No video :(

How to create a custom layout for mobile in Squarespace // Custom Mobile Squarespace Site Layout

Подписаться 25 тыс.

Просмотров 19 тыс.

50% 1

As much as I love Squarespace, sometimes the settings available for mobile are… well, lacking. I used to spend HOURS creating custom code to do mobile specific things, like swapping out backgrounds, specific images, resizing fonts and more just to make it look a little bit better. But thanks to page sections in 7.1, that process has gotten a whole lot easier!
---
📱 Squarespace Mobile + Tablet Workshop → insidethesquare.co/mobiledesign
---
This is one of the simplest ways to create a mobile layout in Squarespace! In this tutorial, you’ll see how two lines of code can create a super customized look specifically for mobile.
Here is a link to the Chrome extension I used in the video to grab the data section id. I am not affiliated with them in any way, just a fan: chrome.google.com/webstore/de...
- - -
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}}
Do you want to do this with more than one section? You can add multiple data section id;s before the “display none” part of the code, separating them with a comma. Learn more about the symbols used in CSS at insidethesquare.co/resources/...
- - -
🔗 RELATED VIDEOS 🔗
How To Customize Your Squarespace Product Page on Mobile: • How To Customize Your ...
How to resize images for mobile in Squarespace: • How to resize images f...
How to Create Equal Width Buttons in Squarespace: • How to Create Equal Wi...
How to use a custom font for the mobile menu in Squarespace 7.1: insidethesquare.co/squarespac...
Show The Squarespace Mobile Menu on Desktop: insidethesquare.co/squarespac...
- - -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → insidethesquare.co/partner10
- - -
🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 insidethesquare.co/css
---
🙋 Need some help? Visit insidethesquare.co/code-help to see my current support options.
---
🥰 SUPPORT MY CHANNEL → paypal.me/insidethesquare
💻 WEBSITE → insidethesquare.co
📧 NEWSLETTER → insidethesquare.co/email
🤳 INSTAGRAM → / thinkinsidethesquare
👍 FACEBOOK → / insidethesquare
📌 PINTEREST → / insidethesquare
---
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥

Опубликовано:

8 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 176

@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-euJqHXs_L1M.html

@ksenijajovisevic4826 10 месяцев назад

HI! Sorry but somehow none of your codes seems to be working for me, it always shows the error in the first row. Do you know what might be the problem? I tried various codes of yours. And these that worked from others- always had some introduction sentence that announces the change //Change...//. Grateful in advance

@vividiazdeleon8814 2 года назад

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!!! 👏🎊

@meaganjustus 2 года назад

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 2 года назад

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

@victoriamontemayor 2 года назад

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

@InsideTheSquare 2 года назад

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

@HESCLoans Год назад

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! ☺️

@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 🥰

@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!

@Andrew_Tate_Personal Год назад

Computer says no

@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!

@guarawow4221 2 года назад

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

@InsideTheSquare 2 года назад

Thanks GuaraWoW!! So happy I could help :)

@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!! 🥳

@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!

@bskellz1134 Год назад

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

@ALINAsmusic 2 года назад

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

@InsideTheSquare 2 года назад

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

@hansventuries Год назад

Still relevant, absolutely love it. Thank you!

@lunarisfalconstudio 2 года назад

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

@PurposeinPattern Месяц назад

Super clear, super helpful! Thank you!!

@InsideTheSquare 24 дня назад

You're welcome! :)

@zomzom7802 4 месяца назад

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

@InsideTheSquare 4 месяца назад

You're so welcome! ☺️

@ilse5293 2 года назад

SO helpful!! As always, many many thanks!

@astropadre Год назад

This is so clutch! Thank you for creating this!

@InsideTheSquare Год назад

You’re welcome! Happy to help. 😎

@ToonReunis 2 года назад

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 2 года назад

Yay! So happy I could help😎

@yokefellowcreative 2 года назад

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

@InsideTheSquare 2 года назад

Yay! So happy I could help 🥳

@vedantchoudhary6842 Год назад

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

@InsideTheSquare Год назад

You’re welcome! Happy to help. 😎

@GilesOji 6 месяцев назад

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

@InsideTheSquare 6 месяцев назад

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

@ninomatas8708 2 года назад

Best tutorial ever

@oscargomezbha 3 месяца назад

Thank you so much, really appreciate it.

@InsideTheSquare 3 месяца назад

You're very welcome!

@sgnisotel Год назад

This is SO helpful. Thank you!

@InsideTheSquare Год назад

Yay! So happy I could help! 🙌🏻

@sashaleal5505 2 месяца назад

OMG, you are the best!

@InsideTheSquare 2 месяца назад

Thank you - so glad you like my work! 🥰

@serenspurgeon Год назад

SO SO HELPFUL, thank you!

@InsideTheSquare Год назад

Yay! So happy I could help! 🙌🏻

@katelynnrose1792 2 года назад

You are an ANGEL. Thank you so much!

@InsideTheSquare 2 года назад

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

@stevenMcCaskill Год назад

omg so helpful thank you I never thought of that

@InsideTheSquare Год назад

Yay! So happy I could help! 🙌🏻

@schmidt1338 6 месяцев назад

You are a genius!

@InsideTheSquare 5 месяцев назад

Thank you - glad you like my ideas! :)

@Sebastian-ff5dj 26 дней назад

Merge! Sa-ti dea Dumnezeu sanatate!

@dalefraser9771 2 года назад

This is fantastic!

@InsideTheSquare 2 года назад

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

@lesvillasin1276 Год назад

Thank you so much! You're da best 🥺

@InsideTheSquare Год назад

You’re welcome! Happy to help. 😎

@bballmasterpsp Год назад

Great tips. thank you!

@InsideTheSquare Год назад

Glad it was helpful! 🙌🏻

@jessiecoghlan7010 Год назад

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

@eliahlopez Год назад

thank you so much for this!!

@InsideTheSquare Год назад

Yay! So happy I could help! 🙌🏻

@baterias5073 Год назад

bro i love you thanks

@InsideTheSquare Год назад

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

@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!

@mixedmindz 8 месяцев назад

thank you, thank you, thank you!

@InsideTheSquare 8 месяцев назад

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

@_brayanenriquez 4 месяца назад

THANK YOU SO MUCH OMG

@InsideTheSquare 4 месяца назад

You are so welcome! I love this workaround 🙌

@aboutphotography 5 месяцев назад

Thanks!

@InsideTheSquare 5 месяцев назад

Thank you for your support!

@GrgoPetrov 11 месяцев назад

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 11 месяцев назад

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!

@heathertesch4588 3 месяца назад

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 3 месяца назад

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-cOvBPxTSNUE.html

@philhsc 4 месяца назад

Brilliant

@InsideTheSquare 4 месяца назад

Thanks - glad you liked this workaround! :)

@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/

@CarlosBarronJr 2 года назад

Awesome!!

@InsideTheSquare 2 года назад

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

@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

@mickalvarezflores9054 2 года назад

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 2 года назад

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

@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

@empulse8957 2 года назад

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 2 года назад

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!

@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-AQnwhitEqnI.html

@hunterfox6230 7 месяцев назад

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 6 месяцев назад

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 5 месяцев назад

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

@YinYinHenderson 11 месяцев назад

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

@InsideTheSquare 11 месяцев назад

"@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

@user-rb1db3tw1j 8 месяцев назад

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

@InsideTheSquare 8 месяцев назад

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; } }

@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

@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_h5o_J-Gsqw.html 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!

@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-AQnwhitEqnI.html

@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! :)

@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

@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

@forkanelebdi8933 2 года назад

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

@InsideTheSquare 2 года назад

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 2 года назад

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 2 года назад

@@InsideTheSquare Alright, thank you

@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

@urzilli 2 года назад

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 2 года назад

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 2 года назад

@@InsideTheSquare Will do, thank you!

@user-lm1vs1ny5z 9 месяцев назад

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

@InsideTheSquare 9 месяцев назад

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

@TiberiousGreene 2 года назад

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 2 года назад

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

@honestlyrealco Год назад

@@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.

@TheManumarfu 6 месяцев назад

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 6 месяцев назад

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 6 месяцев назад

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

@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.

@anastasiaramirez2853 10 месяцев назад

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

@InsideTheSquare 10 месяцев назад

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 6 месяцев назад

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

@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

@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!

@ChristopherAndersonsj2great Год назад

Can this be used with more than two sections?

@InsideTheSquare Год назад

You should be able!

@ChicHulaGirl86 2 года назад

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 2 года назад

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

@jenbaran7120 3 дня назад

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 3 дня назад

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

@boardjamesgeek 2 года назад

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

@InsideTheSquare 2 года назад

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

@danielcanizales1036 4 месяца назад

What happen with Tablet view??

@InsideTheSquare 4 месяца назад

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

@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;

@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 4 месяца назад

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

@InsideTheSquare 4 месяца назад

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!

@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

@mvdison 11 месяцев назад

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

@InsideTheSquare 11 месяцев назад

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.

@simonblanco6716 10 месяцев назад

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 10 месяцев назад

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.

@Djangos.Journey 11 месяцев назад

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 11 месяцев назад

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

@Djangos.Journey 11 месяцев назад

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

@Djangos.Journey 11 месяцев назад

Thanks

@InsideTheSquare 11 месяцев назад

You're so welcome - thanks for the support!