Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

Everything posted by JayVanDyke

  1. It's really not a great SEO strategy due to having two sets of identical images or content but this is what I suggested at the end of my post above too. For an image gallery in particular this could really hurt your page and slow it down if its loading double the images. Even if they don't show on desktop or mobile they will still be loaded into the page. Most use custom CSS if the default from the old layout engine or the setup from the new fluid engine doesn't work. Many post questions like this in the forum so you can search or ask for specific edits and often you'll get responses with code like I put up above!
  2. No but you can make edits to the font sizes using CSS. Paste this into your custom CSS area. //keep adding new selectors and delete //what i have here if you need and copy //and paste with different max-width //for different screen sizes. @media only screen and (max-width: 640px) { h1 { font-size: 28px; //change to your size } h2 { font-size: 24px;//change to your size } p { font-size: 16px;//change to your size } } Are there other mobile specific changes you are trying to do besides fonts or is this a completely different page layout basically? One strategy could be to hide and show certain sections on mobile but that's not usually great for SEO because you'll have some identical content on the same page.
  3. In each individual page header code injection you can add this, this might be easiest but is harder to track down issues since you have to go digging into each page. <style> #header { display: none; { </style> If you want to use the Custom CSS you need each page collection ID like this. Easier to manage in one place but does require a plugin and some more care when making changes and adding new pages to remove the header. //replace with your collection IDs and separate each one with a comma like below. #collectionXXXXXXPageOne, #collectionXXXXXXPageTwo { #header { display: none; } } You can get the collection IDs using the Squarespace ID Finder chrome extension. https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
  4. Hi @hello_studiofrey can you sure your url? I dont see it in the post.
  5. Question 1: try this custom CSS, it should just make them invisible to the users. .user-items-list-banner-slideshow { .desktop-arrows, .mobile-arrows { opacity: 0; } } Question 2: this should make all the home page stuff white. if not leave the code and let me know! .homepage { .header-title-logo img { filter: invert(); } .header-nav-wrapper a, .sqs-cart-quantity { color: white; } .header-actions .icon--fill svg { fill: white !important; stroke: white !important; } .burger-inner > div { background-color: white !important; } }
  6. @johnpauljay this should work #collection-657365d03fbc7c16be3fe7a9 { #mainContent { background: #000;//change me to your color } }
  7. @colinttierney So to do this dynamically you will need to leave your original navigation there and adjust it with CSS. It's definitely doable, there's even a few prebuilt paid templates out there that do it like this one https://studiomesa.co/tandem but if you already have your whole site built out that doesn't really work as well. I'd be happy to help but this is a little longer of a project than just a few lines of CSS code. I'll DM you.
  8. try changing padding: 10px !important; to this padding: 10px 0 !important; in your .gallery-strips-item code
  9. It's working fine for me, it just reloads the content within the iframe as I'm assuming you're wanting it to do. The navbar and footer stays the same. Are you trying this inside the SS editor possibly? I wonder if that's why it's not working right, sometimes things get a little weird in the editor so I usually try a live page. You could also have an old version of something cached so maybe trying an incognito or private window will help see what it's really doing. As far as actually doing anything to whats in that widget, the only people who can really affect it will be Mindbody. Their code places this whole thing inside an iframe and that can't really be touched by custom code we would write.
  10. .header-menu .header-menu-cta, .header-actions-action { a.btn { background-color: transparent !important; background-image: url(https://images.squarespace-cdn.com/content/655760ca5ce91354ff938b5a/71a5c7bc-6aac-454f-979c-b857c95f03f1/Discover+CLUB.png) !important; background-size: contain !important; background-position: center; background-repeat: no-repeat !important } } Try and replace with this. Added some more specificity and there was something overriding your background-image part so added !important to that.
  11. @FGFGFG is the code in there still? I don't see it. If it's not can you add it back and ill see whats not working?
  12. @daniellenoakes might have to tweak it a but but this should target it. Change your colors and things to match whatever you need! .header-menu { .header-menu-cta .btn { font-size: .9em !important; font-family: 'montserrat' !important; border: none !important; font-weight: 600 !important; letter-spacing: .2em !important; border-bottom: 1px solid #19191e !important; color:#19191e !important &:hover { background-color: transparent; color: #81919f !important; border-bottom: 1px solid #81919f !important } } }
  13. @mrpowerSee this thread, im pretty sure this solves your issue too.
  14. @FGFGFG try using this selector for the mobile one. replace your code with this to target both at the same time. .header-menu-cta, .header-actions-action { .btn { background-color: transparent !important; background-image: url(https://images.squarespace-cdn.com/content/655760ca5ce91354ff938b5a/71a5c7bc-6aac-454f-979c-b857c95f03f1/Discover+CLUB.png); background-size: contain !important; background-position: center; background-repeat: no-repeat !important } }
  15. It looks to me like it's a margin that is blowing up those links and making them so tall. You can try something like this. I just put some numbers in that I eyeballed using the browser but you might have better numbers that will look better. Also if you need adjustments at other screen sizes for the same things, smaller laptop, tablet, etc just copy and paste it again and change the numbers for the new one. @media only screen and (min-width: 641px) { //change to adjust for a different screen width .header-menu { .header-menu-nav-folder { &:before { left: -9vw; //adjust this for left to right spacing for the star } .header-menu-nav-item a { //adjust these for the vertical spacing. margin-top: 1vw; margin-bottom: 1vw; } } }
  16. @jdb99 you can try it without important and increase the specificity by adding a collection id. section id and then block id. You also need to put all that grid stuff inside the quotes with the "~" in front of it like this. Since it's a LESS preprocessor what you see on the front end is not always the way it works on the back end. ~"8 / 12 / 12 / 22" My assumption for your code would be something like this but without having the back end access I can't really test. grid-area: ~"2/4/4/13"; grid-row-start: ~"2"; grid-column-start: ~"4"; grid-row-end: ~"4"; grid-column-end: ~"13"; I'm not entirely sure you need the escape when you're doing the single numbers long handed but in the short hand version you definitely need it. If you want to share a link we can maybe help get you the right selectors to avoid the !important thing. I honestly find that I need that a lot with Squarespace considering all the crazy selectors they have setup in their own CSS.
  17. @MndP I'm not sure I totally follow what you mean but with the code I gave you it should remove the background in the navigation and put the whole slideshow under it in your current setup (or atleast the one you had the other day when I looked). You mentioned already knowing how to do the automated slideshow part but something like this would probably do the trick with what you had before. It also has code to remove the arrows under the additional tweaks area. https://www.will-myers.com/articles/auto-scroll-for-carousel-banner-slideshows-for-auto-layout-sections-in-squarespace-71
  18. @rangeee can you share the link?
  19. @Celeste_Woodside I find that I need to always have a separate browser open with that site in an incognito window because the editor never looks exactly like the live site.
  20. It's working just fine for me. Maybe try incognito or private browser?
  21. @MndPThere may be more to do but this can get you started for transparency. This will make it only happen on this page. Now you should be able to use whatever extra code you're using to advance the slideshow and hide the buttons. #collection-63caac95bc17ef45e7b44b10 { #page #sections .page-section:first-child { padding-top: 0px !important; } [data-header-style="theme"].header, [data-header-style="dynamic"].header { background-color: transparent !important; } }
  22. I don't believe you can do this in squarespace without maybe a 7.0 website that is in developer mode. I still am not entirely sure this is possible though since we don't quite have the same back end server access that another type of site does. Keep in mind though that dev mode adds a whole slew of new potential issues like not getting template updates anymore, extremely minimal SS support on custom code, the issue of handing it off to another dev who doesn't know how or doesn't want to work in dev mode. It's worth checking in with the SS support team maybe to ask or maybe someone else will chime in...
  23. @rangeee CSS tweaks would be like normal under the custom css area in SS. The trickiest part is finding the right selectors, it has been a while but I dont think they are published, I'm pretty sure I just had to inspect the browser to find them.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.