Jump to content

WCS

Circle Member
  • Posts

    150
  • Joined

  • Last visited

Reputation Activity

  1. Love
    WCS reacted to Tankgurl in Change section background color around inset background image   
    Thank you for the help!
    Finally worked.
    Melanie
     

  2. Like
    WCS got a reaction from Lakey in Custom Fonts not working AND deleted some CSS code for 'Image Block Poster' - can anybody help?   
    @Lakey  This should be easy enough to fix! Once we do, I recommend that you copy / paste your CSS into a document for safe keeping. 
    Initial thoughts:
    The text that says missing opening '{' shows an error in the code and when that happens, the rest of the code may not work. From what I can see, your custom font should display correctly once we fix that issue.  There was definitely something deleted above the code I've highlighted in the box below. This is the source of the error.  Delete the code in the box and replace it with:
    .design-layout-poster .image-card-wrapper {
      visibility: hidden;
      opacity: 0;
      transition-duration: 0.5s;
    }

     
  3. Like
    WCS got a reaction from tuanphan in How to hide an icon on mobile but leave it on desktop?   
    @SelwynGoodman Oh no, I didn't see your response because you didn't tag me! In the future, click @ and then type the username in. When done correctly, it will appear in a black pill shape like yours does here. Glad @tuanphan got you the finally code! 😊
  4. Like
    WCS got a reaction from mary654849 in How to hide an icon on mobile but leave it on desktop?   
    @SelwynGoodman  We can fix that with a little CSS magic!
    Log into the backend of your website Go to Website > Website Tools > Custom CSS Copy / paste the below CSS and click save @media screen and (max-width:480px) { #block-#######{
      display:none
      }}
    Please note:
    This code requires a block # to target the icon. If you share your site, I can update the CSS. As cell phones change, some large phones may show the icon. You can adjust the max with to 770px, which would hide it on some tablet devices as well.
  5. Like
    WCS got a reaction from Johnny87632 in Anchor link to a testimonials section   
    @Magmorphius Glad you figured it out! You can also use code instead of targeting a specific section. If you find that the anchor link scrolls too close to the top of the testimonials, you can add code at the bottom of the section above to give a little buffer. 
    <p id="this-text-is-the-id"></p>
     
  6. Like
    WCS got a reaction from Magmorphius in Anchor link to a testimonials section   
    @Magmorphius Glad you figured it out! You can also use code instead of targeting a specific section. If you find that the anchor link scrolls too close to the top of the testimonials, you can add code at the bottom of the section above to give a little buffer. 
    <p id="this-text-is-the-id"></p>
     
  7. Like
    WCS got a reaction from Pureform in Mobile Preview from Desktop is different than actual Mobile Site plus White Space on the Right Side   
    @Pureform Thank you! I took a look and while I can see your menu icon, I can also scroll to the left and right. This is usually caused by code that adjusts margins. To fix it:
    Log into the back of your website Go to Website > Website Tools > Custom CSS Copy and paste the below code, then click Save html, body {
        overflow-x: hidden}
  8. Like
    WCS got a reaction from Callan in Colour change code for accordion   
    @Callan Of course! Happy designing. 😊
  9. Like
    WCS got a reaction from gcart in What are your best practices for mobile styling?   
    Hi @drunkbeetle, welcome to the forum!
    While you could technically use code to have 2 different sets of design, it's not a good idea for your site's health or for SEO. Sometimes it makes sense to hide 1 section and show another on mobile but that's on a small scale.
    There are things you can change on mobile view that don't impact the desktop design:
    Button size Layout of items (text, images, etc.) Image size Text block size However, you can't change the below without it modifying on desktop:
    Image alignment Text alignment or color Settings to list items Basically, you can move items and change the boundary box without it altering your desktop design -- these changes are more about where items go. However, changing the content or styling of a text box, image, etc. will appear on both desktop and mobile. 
    💡 If you're designing on a monitor, your settings and window size may modify the mobile preview. I'd highly recommend updating a section and then checking on your phone to see if the two versions are close. If they aren't, you may need to adjust your set up. 
    There is CSS that can be applied to modify list carousels, text styling, and more. If there are specific places where you're struggling, post your issue with a screenshot, link, and password (if your site isn't launched yet, you'll need to go to Settings > Site Visibility > Password Protected and set a password). 😊
     
  10. Like
    WCS got a reaction from leedbssk in How to change colours of the buttons on hover   
    @leedbssk  Happy to help!
    Here's code for modifying the header button:
    // This creates a small transition buffer
    .header-actions-action--cta .theme-btn--primary-inverse{
      transition: transform 0.3s !important}
    // Change the specified colors 
    .header-actions-action--cta .theme-btn--primary-inverse:hover {
      opacity: 1 !important;
      background-color: red! important;
      color: #495A58} 
    ^ I don't know what color you want the background to be. If you don't want it to change, then you can remove that part of the CSS.
    For the slideshow button, can you please share a link to your site?
  11. Like
    WCS reacted to Callan in Colour change code for accordion   
    Thank you! My CSS was a little off, I was using: 

    #block-yui_3_17_2_1_1709022622203_38394
    .accordion-item__description {
     text-color: #fffff !important;
  12. Like
    WCS got a reaction from Callan in Colour change code for accordion   
    @Callan The CSS for this should be:
    #block-yui_###### .accordion-item__description{
      color: white !important
    }
    Is that what you were using previously?
    Sometimes CSS doesn't display on the backend unless you save, leave the Custom CSS window, refresh, and then go back in. 
     
  13. Like
    WCS reacted to graphicabyss in Why can't I hide images on Mobile only using the CSS I'm adding?   
    It worked! Thank you so much! I increased to 800 to hide on iPad as well but thats been amazing to solve this!
  14. Like
    WCS got a reaction from nick_sh in Why can't I hide images on Mobile only using the CSS I'm adding?   
    @graphicabyss  Is it removing the image in the mobile preview, but not on your phone? If so, then you may have to adjust the max width to 720. I had to do this for a client recently.
    @media screen and (max-width: 720px) {
    #block-yui_3_17_2_1_1689763110049_14549 {
    display: none !important;
    }
    }
  15. Like
    WCS got a reaction from JDED in Why can't I change the point size of the excerpt in a summary block?   
    @JDED  Try this code and let me know if it works:
    .summary-excerpt p:last-of-type{
      font-size: 12px
    }
     
  16. Thanks
    WCS got a reaction from Margaux in Text block alignment - Mobile version   
    @tci_ca  Absolutely! You can add some CSS to make this change for all fonts or one block of text. 
    To add the below CSS:
    Click on 'Website' Scroll to the bottom and click 'Website Tools' Then 'Custom CSS' // Change alignment for all h2 text on mobile
    @media screen and (max-width:640px) {h2{
      text-align: center}}
    You can swap out h2 for a different font size:
    h1 h3 h4 p.sqsrte-large (p1) p (all paragraph fonts) p:not(.sqsrte-large):not(.sqsrte-small) (p2) p.sqsrte-small (p3) If you want to target only one specific block of text, you will need to find the block id for the text block. To do this:
    Install the Chrome Squarespace ID Finder extension Go to the page you want to modify and select the extension Find the block id for the text box you want to modify and click on it (it will copy it for you) The insert that into the code, as shown below, before the font you want to modify @media screen and (max-width:640px) {#block-123456789 h2{
    text-align: center
    } }
    If this screenshot, you can see that there is a white box with #block-##### above a header. If I was to use that specific number in my code, it would change the h2 font only in that text box. The one over the image would be used to target that element.

    If something doesn't modify, try adding !important
    @media screen and (max-width:640px) {#block-id123456789 h2{
    text-align: center !important
    } }
  17. Like
    WCS got a reaction from arielestulin in Adding Adobe Fonts   
    @arielestulin You still can! 😊
    1. Go to https://fonts.adobe.com and find the font you want. 
    2. Click on </> icon. It will ask you to add it to a project -- create one for your website. 
    3. Adobe will give you 2 pieces of code. The first you need to put in your site's header. You can find this by going to Website > Website Tools > Code Injection
    4. You'll also receive something that looks like the below. You'll use this to specify what text you want on your site to be the Adobe font you selected.

     
     
     
     
    Go to Website > Website Tools > CSS and add:
    @font-face {
    copy / paste all the provided css font here
    }
    Then specific what text you want in that font. For example, if you wanted all h2 headers to be transformed, add:
    h2{
    copy / paste the font-family line here
    }

    If you want it to be all headers, it would look like:
    h1, h2, h3, h4{
    copy / paste the font-family line here
    }

    For all paragraph text, do:
    p{
    copy / paste the font-family line here
    }
  18. Like
    WCS got a reaction from derricksrandomviews in Trying to change arrows on summary carousel. Help?   
    @matt1234 That guide is good but it does have an error in it and the arrows may overlap the text, making the testimonial not fully legible. 
    Here's a revised version to try:
    section[data-section-id="65d8dcbcf210d40479a7b669"] {
    .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {   
      float: none;   
      width: 120%;   
      position: absolute;   
      bottom: 42%;   
      left: 50%;   
      -webkit-transform: translate(-50%,-35%); 
      -ms-transform: translate(-50%,-35%);
      transform: translate(-50%,-35%);   
      -webkit-box-pack: justify;       
      -ms-flex-pack: justify;           
      justify-content: space-between; 
      }
    .sqs-gallery-design-carousel .sqs-gallery-controls .next::before {
    background-color: #f5c06a;   
    color: #000000;   
    padding: 20px; 
    border-radius:50%;
    content: '▶' !important
     } 
    .sqs-gallery-design-carousel .sqs-gallery-controls .previous::before {
    background-color: #f5c06a;   
    color: #000000;   
    padding: 20px;
    border-radius:50%;
    content: '◀' !important
     }
    }
    Customize it for your site:
    You can add #block-yui_3_17_2_1_1693334706601_32976{ to the beginning and } at the end if you want to apply it only to the slider on your homepage. 
    You can modify the arrows by copy/pasting a new unicode character and replacing the symbols (◀ and ▶) in the below code. Here's a link to a list of viable options: https://insidethesquare.co/unicode-for-squarespace
    content: '▶' !important
    content: '◀' !important
     
  19. Like
    WCS reacted to derricksrandomviews in Trying to change arrows on summary carousel. Help?   
    This guide should help you:
    https://www.inscapewebdesign.com/free-squarespace-hacks/styling-squarespace-summary-carousel-arrows-like-list-section-carousels
  20. Like
    WCS got a reaction from tuanphan in Adding Adobe Fonts   
    @arielestulin You still can! 😊
    1. Go to https://fonts.adobe.com and find the font you want. 
    2. Click on </> icon. It will ask you to add it to a project -- create one for your website. 
    3. Adobe will give you 2 pieces of code. The first you need to put in your site's header. You can find this by going to Website > Website Tools > Code Injection
    4. You'll also receive something that looks like the below. You'll use this to specify what text you want on your site to be the Adobe font you selected.

     
     
     
     
    Go to Website > Website Tools > CSS and add:
    @font-face {
    copy / paste all the provided css font here
    }
    Then specific what text you want in that font. For example, if you wanted all h2 headers to be transformed, add:
    h2{
    copy / paste the font-family line here
    }

    If you want it to be all headers, it would look like:
    h1, h2, h3, h4{
    copy / paste the font-family line here
    }

    For all paragraph text, do:
    p{
    copy / paste the font-family line here
    }
  21. Like
    WCS got a reaction from tuanphan in Put lowlight on hyperlinks but only on Paragraph 2   
    @Chanel1990  Try the below code and let me know if it works! 😊
    p:not(.sqsrte-large):not(.sqsrte-small){
      background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #e1c4ff 65%);
      display: inline
    }
    This article shows some more options as well: https://www.beatrizcaraballo.com/blog/low-highlight-heading-links-squarespace
  22. Like
    WCS reacted to tuanphan in Change Gallery Columns for Mobile Only?   
    Change this line
    figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } to this
    figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; margin-bottom: 30px !important; }  
  23. Love
    WCS reacted to Chanel1990 in Put lowlight on hyperlinks but only on Paragraph 2   
    Thank you so much WCS! This worked 😀
  24. Like
    WCS reacted to IsobelleLans in How to code bottom footer   
    Thank you, this was the closest I could get to what I was looking for!
  25. Like
    WCS got a reaction from kaydotjpg in Replace Desktop Hamburger Menu with Text   
    @kaydotjpg Becca from Inside the Square has a great tutorial for this! 
     
×
×
  • 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.