Jump to content

inside_the_square

Circle Community Leaders
  • Posts

    243
  • Joined

  • Last visited

  • Days Won

    2

Community Answers

  1. inside_the_square's post in How to change the appearance of a text box without changing the font style was marked as the answer   
    Hey @Scotty_90 - you can totally do this with a little CSS! We can write a code that says "inside this specific content block, make the H1 text this font family, font weight, and font size" so it will look like your P1 but it will actually be an H1.
    You can use a block id & selector class to isolate it. Here is an example code you can start with: 
    #block-123 h1{ font-family: Name!important; font-size: 15px!important; font-weight: normal!important; } To grab the ID, you can dig around the source code or use this extension: https://insidethesquare.co/chromeext
     
    Here is a little video with more info; hope it helps and best of luck with your project! 🙂
     
     
  2. inside_the_square's post in How to enable hover over function on desktop but disable it on mobile? was marked as the answer   
    Hey @Julieta_T - this is a great question! You can use a media query to make any custom code work on a specific screen size. A lot of us Squarespacers consider mobile to be anything smaller than 640px wide, but some consider it to be 950px or smaller because that's when the mobile menu kicks in; that value is up to you! Whatever size you want to isolate, add your grayscale code inside a query like this:
    @media only screen and (min-width: 641px) { img:hover { filter:grayscale(1) } } This code says "any screen that is at least 641px wide, use this code!"
    I have a tutorial video & article with more info here: https://insidethesquare.co/mobile
    I hope that info helps! And in regards to the hover issue in edit mode; I have heard of some hover effects being buggy in the config (when you're actively using the editor) Make sure you test it outside the program, like an incognito browser, and double-check that your hover effect is applied to the top layer of content. Best of luck with your project! 🙂 
  3. inside_the_square's post in Custom Social Icons on mobile was marked as the answer   
    Thanks for sharing the link @mikelakeland - that's super helpful for code questions like this! The social icons in a mobile menu have an extra special selector class added .mobile  
    I updated your existing code to have the two custom icons work on your mobile menu using that extra label. You'll want to add this to the end of your custom CSS, leaving the old code as-is so it keeps working on larger screens 👍👍
    .header-menu-actions-action.header-menu-actions-action--social.mobile:nth-of-type(5) .icon--fill{ background-image:url(https://static1.squarespace.com/static/65df4f2399036b6578e26fb5/t/66170b248b1a5224371bd320/1712786212638/VK.png); background-size: 100%; background-repeat: no-repeat } .header-menu-actions-action.header-menu-actions-action--social.mobile:nth-of-type(7) .icon--fill{ background-image:url(https://static1.squarespace.com/static/65df4f2399036b6578e26fb5/t/6643869445e11541f9f9e9c3/1715701396661/Little-Red-Book.png)!important; background-size: 100%; background-repeat: no-repeat } .header-menu-actions-action.header-menu-actions-action--social.mobile:nth-of-type(7) svg, .header-menu-actions-action.header-menu-actions-action--social.mobile:nth-of-type(5) svg { display: none }  
  4. inside_the_square's post in How to Pagination Background Color was marked as the answer   
    Hey @kieranjwilson this is a great question! We can reset the background color to transparent without effecting the links themselves. Give this code a try and let me know how it goes: 
    .item-pagination[data-collection-type^="portfolio"]{ background-color:transparent!important }  
  5. inside_the_square's post in How do I change the size of my product description font so it is smaller? was marked as the answer   
    That is so strange - it's definitely gigantic, but there is no code issue here, so the team at SQSP must be tinkering with products in the back end of the CSS 😉 I'd recommend updating it with your own CSS. Here is a code you can use to make it smaller; adjust the PX value as you see fit. You'll want to paste this in your custom code under Website > Pages > Website Tools > Custom CSS. Add it as a new line under the code that is already tehre. 
    .ProductItem-details-excerpt-below-price *{ font-size: 15px!important } P.S. BEAUTIFUL WORK!! Your artwork is stunning 😍
  6. inside_the_square's post in CSS Expert AMA: Becca Harpain was marked as the answer   
    Hey There Squarespacers - I'm here to redirect this conversation & spark some supportive creativity! ✨ Please join me on this post with your creative design ideas:
     
  7. inside_the_square's post in Google drive video iframe was marked as the answer   
    It looks like Google removed the embed video option from drive a few years ago (2020) so at this point you'd want to try the programs @Ziggy suggested. You can also upload it to a Squarespace video block. The video block can also help your site stay accessible with it's autoplay audio settings. This article has some interesting info about that.
  8. inside_the_square's post in Mobile Carousel Arrows Alignment was marked as the answer   
    Hey @octolove - it looks like you moved the arrows to the center of the images in your carousel list section, but I wanted to hop in here and provide a left align solution for anyone looking for that! This code will scoot those arrows to the left on mobile devices: 
    @media screen and (max-width: 575px) { .user-items-list-carousel .mobile-arrows { justify-content: flex-start; } }  
  9. inside_the_square's post in Is it possible to screate a slideshow reel with autoscroll? was marked as the answer   
    Following up on this one @RMorrisDesign - to stop the reverse animation, remove this part of your code: 
    animation-direction: alternate; The loop part is tricky; we can't connect a left and right aspect of the element once it's transitioned past the edge of the page. The easy workaround is to literally repeat the images yourself, maybe two or three times! I'll do a little digging into a code solution, but wanted to share that quick fix in case you needed it asap. 
  10. inside_the_square's post in Injecting custom code to create coloured donate button on our website above navigation menu was marked as the answer   
    I recommend adding this CSS to your CSS file, not the footer code. You'll find your CSS by navigating to Website -> Pages -> Website Tools -> Custom CSS.

    The reason it didn't work when you added it to your footer because you can have all kinds of code in there, not solely CSS. When you add CSS via any form code injection, you have to tell the computer "this is a style code"

    There are ways to do it, but it is much easier (and loads faster) when you add it to the spot already reserved for your custom CSS codes. 
  11. inside_the_square's post in A Couple CSS questions for my site was marked as the answer   
    Hey @Bexxx - welcome to Squarespace! 👋 
    A lot of the coding you used in Showit will work for common HTML things, like the a that you'll use to target an active link. But you've already discovered that Squarespace has its own unique selectors for some important things. 😉
    The active link in your website header has a background image you can hide with a version @tuanphan 's code. This code below will hide the underline from pages you are actively on, and leave a border hover effect that will be the same color as your nav color, even if you change it in the site style menu: 
    .header-nav-item--active a{background:transparent!important} .header-nav-item a:hover{border-bottom:1px solid var(--solidHeaderNavigationColor)!important} If there are other things you want to change, you'll find a ton of free codes on my tutorial blog at insidethesquare.co/squarespace-tutorials
     
    I hope all that info helps, and best of luck with your Squarespace project!
  12. inside_the_square's post in CSS Code Needed for Custom Font for Submit Button in Form was marked as the answer   
    Hey @uhohitsheidiho - this is a great question! The block id is for the whole form, so you'll need to add the selector for the button inside that block. This code will change that font for ya: 

    .form-wrapper .sqs-button-element--primary {
    font-family: Cunia!important
    }
    Hope that helps and best of luck with your project! ☺️

    P.S. If you have more than one form on your site, you don't need to use the block id! If you use the code name ".form-wrapper .sqs-button-element--primary" all of your contact forms will get the same font family change. 
  13. inside_the_square's post in Hamburger Menu Nav across all devices (version 7.1) was marked as the answer   
    Hey @rsmith3074 - I realize you posted this weeks ago but I just now got back onto the forum and wanted to share the answer in case you still needed it! I use CSS to do this; this code does the trick for me. Hope it helps! 
     
    .header-burger { display:flex!important} .header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;} .header-nav, .header-actions {visibility:hidden!important}  
     
  14. inside_the_square's post in Using Mobile Nav across all devices was marked as the answer   
    Hey @AJZ I just took a look at your source code and there is some typo/character issue that is blocking your code from rendering after line 35721.

    Your code is just fine for 7.1, so something must have carried over from wherever you store your codes. 😬
    https://vimeo.com/865155812/e356e70256?share=copy
    If  you remove your code & notes, and replace it with this you should be good to go. 

    P.S. be sure to add !important for your burger display value change to make sure it's not ignored by the browser. Hope this helps!
     
    /* burger on desktop */ .header .header-burger{display:flex!important} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible;}  
  15. inside_the_square's post in Logo over announcement bar and header was marked as the answer   
    @AppealedApple totally! I hopped into your CSS and updated some of the code you had in there to make this magic happen. Feel free to adjust the top:-2rem to the size that suits you best! 

    How this works: we had to move the announcement bar down to z-index:0, then apply a position absolute to the image so we could give it a z-index and move it up the x-axis with a negative top value.
    Hope this info helps and best of luck with your project!
    header#header { box-shadow: 3px 4px 8px rgba(54,49,94,.5) } footer#footer { box-shadow: 3px 4px 8px rgba(54,49,94,.5) } #announcement-bar-text-inner-id p { font-size: 16px !important; text-align: right !important } .sqs-announcement-bar-close { display: none !important } .sqs-announcement-bar-dropzone{ z-index:0!important } .header-title-logo,.header-title-logo a { overflow: visible !important; margin-bottom: -50px; } .header-title-logo img { max-height: 90px !important; position:absolute; top:-2rem; z-index:999!important } .header-title-logo img,.header-title-logo a { max-height: 150px !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.