Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

Community Answers

  1. JayVanDyke's post in weird gap bottom of page was marked as the answer   
    can you share a link?
  2. JayVanDyke's post in Video Collection Page Customization (full width video preview) was marked as the answer   
    @Chlobot after the padding stuff but right before the .grid-item add this
    max-width: none !important;  
  3. JayVanDyke's post in Mobile View of one page is different in Apple and Android Phones was marked as the answer   
    @kkf_magi Try this, when editing switch to your mobile view and make sure your containers are not overlapping each other. First screenshot is with the container over the other box and the next shows where the boxes should be ending. If you make the box bigger than the content then it will allow the text to wrap into that empty space. If you end the box before the next text box it will just bump it down on the page. Sometimes you still need to overlap to achieve a specific design but typically unless you're really careful and know how to make it work it makes sense to have them not be on top of each other.

  4. JayVanDyke's post in white space with html code was marked as the answer   
    @Ramon-east try this article. It's the javascript thats adding that weird little extra box that breaks the editor.

  5. JayVanDyke's post in Online catalog using store page - removing info was marked as the answer   
    @ashgirl2000 try this 
    .product-details .ProductItem-product-price { display: none !important; }  
  6. JayVanDyke's post in Negative space / White space near plugin (Universal Filter) was marked as the answer   
    @WebShark I would honestly rebuild this in a classic engine section instead of the fluid engine. When you go to add sections on the left side scroll to the bottom and and a blank classic one. That will not end up with all that extra space and will shrink and grow in height based on the visible content. The grid layout system might be whats causing this.

  7. JayVanDyke's post in Categorising page content by Tags was marked as the answer   
    No that’s a css thing. There may be some code for that in the installation page though at the bottom, there’s a section for styling. It just depends on what buttons and whether he’s provided that code there. 
  8. JayVanDyke's post in Adjust iFrame in Lightbox was marked as the answer   
    First, even with this library I don't think you can target things inside the iframe with JS directly like you're trying to do but secondly, this line here 
    document.querySelector("#content") {padding: 0px !important;} is javascript and won't do anything inside of style tags. I wonder if it's loading the library and trying to attach to your iframe before it's even on the page since it's loading in a lightbox after you click. On the plugin settings page you could try their code injection or maybe try preloading the popups, that one is just a checkbox in the setup page. If none of that works I'm not sure what else to do without really getting into the site. Feel free to dm me if youd like to chat about it!
  9. JayVanDyke's post in Is Slideshow: Reel Automation possible? was marked as the answer   
    @TomJuice try this one from @WillMyers https://www.will-myers.com/articles/auto-scroll-for-carousel-banner-slideshows-for-auto-layout-sections-in-squarespace-71
  10. JayVanDyke's post in Custom code needed to adjust section height was marked as the answer   
    @El1z4b3th i would try 3 things possibly to get the spacing right. 
    1. change the content alignment on the top section to the last one to align to the bottom and then the our core values section aligned to the top.
    2. try changing the section height of one or the other section to be smaller than the "small" option by clicking the three dots and using that scroller.
    3. Try with some css
    //trusted by thousands section section[data-section-id="6596bba3c7ad441ead1e0008"] { .content-wrapper { padding-bottom: 0 !important; //original value was 3.3vmax, adjust as needed } } //our core values section section[data-section-id="6580bc4e649f4453b77f4e3f"] { .content-wrapper { padding-top: 0 !important; //original value was 3.3vmax, adjust as needed } }  

  11. JayVanDyke's post in Trying to find code to fix issue with mobile was marked as the answer   
    @GregR ah i think i missed one selector and i added a few other things to try to make sure it works. Try this.
    @media only screen and (max-width: 640px) { .collection-images .image-container img { left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain; object-position: center; } }  
  12. JayVanDyke's post in misalignment/wrong ordering of additional info box on mobile was marked as the answer   
    @helpmepls This looks like it has to do with how you have the blocks arranged. I think they are set up so that this one highlighted is the whole screen and then the other one is "floating" on top. This is mainly for letting text wrap around an element but in your case I think you want them side by side. Grab the block on the right and pull it all the way over to the right side until you get the vertical blue line. if theres a blue box then it will do exactly what you have here again. See if that helps!

  13. JayVanDyke's post in Adjusting background colours in a Simple List section was marked as the answer   
    @hello_studiofrey This should do it
    section[data-section-id="655e25547b021336a79e6019"] .user-items-list-simple .list-item[data-is-card-enabled="true"]:first-child .list-item-content__title { color: #cf2f26; }  
  14. JayVanDyke's post in Remove playbar from audio player was marked as the answer   
    @MiguelFerrao I think this wraps everything up together. See if it still works after you replace all that with this. Are you putting this into the header code injection instead of the custom css panel? 
    <style> body { background-color: #E6E6E6; } #canvas { background-color: #E6E6E6; } #header { display: none; } div#page-section-65798fa962771a6b7f4a6a5a * { background-color: transparent !important; } .sqs-block-audio { text-align: center; .sqs-audio-embed { display: inline-block; } .sqs-widgets-audio-player { background: white !important; .action:hover { background-color: transparent !important; } .action { position: fixed !important; top: 50% !important; left: 49% !important; transform: translate(-50%, -50%) !important; border-right: none !important; .play-button { box-sizing: border-box; height: 40px; border-style: solid; border-width: 25px 0 25px 40px; border-color: transparent transparent transparent white; } .pause { box-sizing: border-box; height: 50px; border-style: double; border-width: 0px 0px 0px 40px; border-color: transparent transparent transparent white; } .play, .pause { left: 50% !important; transform: translateX(-50%) !important; } } .progress, .time, .progress-bar, .track, .labels, .secondary-controls { display: none !important; } .track .icon { background-color: none !important; display: none !important; } } } </style>  
  15. JayVanDyke's post in 2 Columns on Homepage was marked as the answer   
    @niteshifte it looks like you're using regular product blocks so you just need to go into mobile view and drag the elements into the space you want them and create a different layout. 

  16. JayVanDyke's post in Load custom page for mobile was marked as the answer   
    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.
  17. JayVanDyke's post in Problem centering images in grid:strips gallery on mobile was marked as the answer   
    try changing
    padding: 10px !important; to this
    padding: 10px 0 !important; in your .gallery-strips-item code
  18. JayVanDyke's post in Mindbody Enrollments Widget 'Next' and 'Previous' buttons not working was marked as the answer   
    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.
  19. JayVanDyke's post in Custom header button not showing on mobile menu was marked as the answer   
    .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.
  20. JayVanDyke's post in mix-blend-mode and mobile menu was marked as the answer   
    @mrpowerSee this thread, im pretty sure this solves your issue too.
  21. JayVanDyke's post in customising mobile overlay menu desktop was marked as the answer   
    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; } } }  
  22. JayVanDyke's post in Anchor links not going to specific place on page was marked as the answer   
    It's working just fine for me. Maybe try incognito or private browser?
  23. JayVanDyke's post in Sidebar navigation shows up right in stead of left. was marked as the answer   
    change this 
    .header--menu-open .header-menu { opacity: 1; visibility: visible; width: 50%; margin-left: 50%; box-shadow: 5px 5px 15px #000; } to this 
    .header--menu-open .header-menu { opacity: 1; visibility: visible; width: 50%; margin-right: 50%; //this needs to be right for it to sit on the right side. box-shadow: 5px 5px 15px #000; }  

  24. JayVanDyke's post in Can't apply CSS for Drop Shadows to a single page, it's only showing up if added to the full website CSS edits, how do I get it to work on the single page? was marked as the answer   
    You can add it to the page header code injection just for that page but it needs html tags like this
    <style> .image-block {filter: drop-shadow(5px 5px 8px #d3d3d3);} </style> Also you could use the Squarespace ID finder chrome extension and find out the page collection id, usually starts with a "#collection" and add that before your .image-block part in your regular css panel.
  25. JayVanDyke's post in Hoover effect on sponsor logos was marked as the answer   
    If you want it for all the images in that section you could do it like this. This way you don't target individual images.
    section[data-section-id="652cdfe47161a10cf9d95eb2"] .sqs-block-image { img { filter: grayscale(100%); transition: all .3s; } &:hover { img { opacity: .75 !important; } } }  
  • 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.