Jump to content

JayVanDyke

Circle Member
  • Posts

    361
  • Joined

  • Last visited

Community Answers

  1. 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. 
  2. 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!
  3. 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
  4. 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 } }  

  5. 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; } }  
  6. 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!

  7. 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; }  
  8. 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>  
  9. 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. 


  10. 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.
  11. 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
  12. 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.
  13. 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.
  14. 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.
     
     
  15. 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; } } }  
  16. 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?
  17. 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; }  

  18. 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.
    https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
  19. 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; } } }  
  20. JayVanDyke's post in SVG for background image using CSS was marked as the answer   
    I think it's how you have it encoded. You have things like < and > and the example in that other post uses %3C and %3E. 
    Someone left a link in that post about proper encoding. You might save it as an svg file and upload it here. https://base64.guru/converter/encode/image/svg
  21. JayVanDyke's post in Banner Slideshow - Can I make the CARD color transparent? was marked as the answer   
    @X5pilot You can adjust the colors for all these things in your site styles under the color palette. Figure out which color scheme you're using for this section, looks like maybe "lightest 1". Then find the List Section: Banner Slideshow. Under "Card" you can change the opacity to 0 with that slider on the bottom.


  22. JayVanDyke's post in Colorizing Code Snippets with Prism was marked as the answer   
    I think I see it! It may be blocked by being http and not https. Try changing it to that?


  23. JayVanDyke's post in Can I change the link associated with my header button in my navigation just on a certain page? was marked as the answer   
    @AlyssaIvonne this should get you started

     
     
  24. JayVanDyke's post in Embed block font color with CSS was marked as the answer   
    you can try this
    #kajabi-form { .kajabi-form__title { color: #5d5d5d !important; //change me if you need } .kajabi-form__subtitle p { color: #5d5d5d !important; //change me if you need } }  
  25. JayVanDyke's post in Collection ID's & Custom CSS When Transferring a Template was marked as the answer   
    @CharlotteWilderness you probably need to make your CSS more generic if its at all possible. For things like this I usually use classes from the color schemes, sometimes attribute selectors looking for specific section heights or widths or even nth-child type selectors. It might be worth purchasing someone else's template just to see how that all works!
×
×
  • 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.