Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Wolfsilon

Circle Member
  • Posts

    167
  • Joined

  • Last visited

Posts posted by Wolfsilon

  1. Hello there,

    You're probably right in not making images because scaling will certainly cause problems although, the alternative might cause just as many smaller problems...

    What I would do is write the titles twice, once in the regular font but the second one (the one you want to have the handwritten font) should be in Italics or Bold.

    1) Install your handwritten font to your website.

    2) Identify the block-ID for each block with the two titles.

    3) Target the "em"(italic) or "strong"(bold) and set the font family for it to your custom handwritten font -- adjust the font-size, line-height, weight, and maybe width/height  -- You might have to do this for the regular font too.

    This should help you create two different fonts on one block but you might have word or line wrap problems. You'll have to play around with these but you can also create a pseudo layer to help.

    Hope this helps,

    Dan

  2. Hello,

    Your best option here is to use a media query to change the orientation of the tabs on smaller screens. Since editing code in Codepen won't always work the way it should in Squarespace, a good starting point is this:

    Add this to your Custom CSS for the block and tweak the settings:

    @media only screen and (max-width: 640px) {
      .main-box {
         flex-direction: column;
      flex-wrap: nowrap;
        max-width: 100%;
        height: 100%;
      }
      .box.active
    {
        width: 90% !important;
    }
    }

    Best,

    Dan

  3. This will require some Custom CSS to achieve this layout. To do this, start by defining the point when you want the layout to switch for mobile devices. For the purpose of this, I'll be using the Squarespace default "640px".

    #mederi9 {
    
    @media only screen and (max-width:640px) {
    
    .sqs-col-6 {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: auto;
      padding-right: 0 !important;
    }
    
    .sqs-row {
      display: flex;
      flex-direction: row;
      width: 100% !important;
      flex-wrap: nowrap;
      align-items: unset;
      justify-content: center;
      margin: auto;
      padding: 0 !important;
    }
    
    .sqs-block-image {
      display: block;
      width: 100px !important;
    }
    
    .sqs-block {
      padding-right: 0 !important;
    }
    		}
    	}

    Hope that this helps,

    Dan

  4. You can use Custom CSS to change the color of the header. To do this, navigate from "Home" > Design > Custom CSS. Insert the code and adjust the background property by inserting the hex color or name of your desired color, if applicable.

    .Header {
    background: #000;
    }

    Hope this helps,

    Dan

     

  5. Hello,

    With the layout that you currently have, you could simply add the following:

    .page-section {
    margin: 5px;
    }

    To add some spacing between the sections.

    --

    You might also be able to replicate this layout using the Portfolio page layout and using the settings "hover: overlay", adjusting for one single column, and style within that menu as needed.

  6. Everything seems to be working for me on all:

    iMac 27" - OS - Big Sur; Chrome, Mozilla, Safari

    iPhone - Latest iOS (14); Safari, Google

    Windows 12 - Mozilla, Chrome

    Samsung Galaxy - Chrome

    I may be overlooking something but nothing stood out to me on these devices, so if there's a particular example please share a screenshot. Is it just the image appearing out of position for you or other things causing issues on your website?

     

  7. Hello,

    This pen uses two different "preprocessors" that probably prevent you from getting a working version of it on your website. The two being used here are Haml and CSS Sass. Codepen is great for building pens that work within the online environment but requires a high learning curve for transitioning them to other websites, especially to Squarespace. You can try converting these two formats to standard HTML and CSS using online tools but you may find that the animations no longer work.  Also, embedded within this Pen is a plugin script called "modernizr", be sure to include plugin that after you've converted the pen.

    In the Custom CSS menu for Squarespace, you cannot use "<style>" tags in the manner that you mentioned. You don't need style tags when writing CSS in the Custom CSS tab. Instead, use the Block Identifier extension for Mozilla or Chrome to target the elements you want to apply custom CSS to.

  8. Hello,

    I couldn't see where the button is supposed to be, is it on the home page? I don't see a payment plan section either. Also, this message commonly shows when you have installed it incorrectly or do not have custom javascript enabled on your website. Be sure that you have a Business plan with Squarespace. Custom scripts are only supported in Business or higher plans. If you have a Business plan....

    How are you installing the code? Are you using a code block? Sometimes these scripts require that you add portions of it via Settings > Advanced > Code Injection > Header/Footer injection menus. To me, this looks like it could go in the Header Code Injection field. Let us know!

    Thanks,

    -Dan

  9. We'll need to take more complex steps because I misunderstood your problem. Start by removing the first half of the code I sent. You still need to independently set the header to be transparent. Worry about the buttons and text later. Using the method below for each page you want a header background to be applied to.

    Navigate to pages > settings (gear icon) > advanced > Page Header Code Injection.

    <style>
      .header{background:"YOUR_COLOR_HERE" !important;}
    </style>

    This should update the background color of the header on a specific page. You'll want to tweak the text and button CSS in the Custom CSS menu for each page or add these CSS changes before the closing "</style>" tags.

     

  10. Hello,

    I'm sorry to hear about your issue, If I remember correctly, Constant Contact was effected by the SolarWinds hacking attack that took place earlier this year. Apparently (according to your post), still taking place, which is crazy to me. Your site or CC account was most likely accessed because of a leak stemming from Constant Contact. That seems to be the known common denominator here. If your sites server was accessed and not your actual Squarespace account, there's not much you can do and the damage is done, whatever that may be. I would recommend changing your password and enabling two factor verification for your SS account. You should use a trusted authorization app to generate your passkeys. If you have clients hosted or signed up on your site, or use your website, you should notify them

    A general rule of thumb for the future -- The more lines of code and injections from third party sources, the higher the risk of being attacked. You didn't do anything wrong here though, as this wasn't in your control. Embedding content is usually safe, unless the source of the embedded app is compromised. In this case, you also should've been notified by Constant Contact about the scope of the attack, when it happened, and what you should do. If not directly notified, there are usually briefs that are made available to users.

    Hope this helps, and good luck,

    -Dan

  11. Hello,

    I'm assuming that you've enabled the transparent header option. This is an easy but unreliable way to do this because it will adjust the header/navigation colors to inherit the primary background color of the section immediately following it. This means that it will switch colors depending on the page you are on, which isn't a consistent way to have a transparent header.

    The work around that worked for me is to change the header to a color scheme and switching OFF the transparent header option. You can then apply some Custom CSS to the header to change it. If you have a button to the right of the social links, it will require further styling but I've tried to cover everything in the examples you shared. 

     

    .header-title-text a, .header-nav-item a, .header-actions .icon--fill svg, .header-actions a{
      background: transparent !important;
      fill: #fff !important;
      color: #fff !important;
    }
    .header {
      background: rgba(0,0,0,0.0) !important;
    }

    Hope this helps!

    -Dan

  12. Hello,

    Several issues with your font importing may be causing this problem.

    1) You need to make sure that the @font-face - "font family" names match on the elements you're trying to apply the font to. (I see variations of Agrandir Grand Heavy vs. Agrandir-GRANDHEAVY vs. agrandir).

    2) ".header-nav *" & "p" selectors, use a font family that isn't installed on your website or installed correctly.

    3) On the following lines -- You do not need to use "src:local". In-fact, if that works for you, you may be the only one able to view it because it's calling for a locally stored item on your computer.

    4) Once you've made the changes or uploaded a font to your website you can check if the fonts are installed correctly by "inspecting" the text and viewing the "Fonts Used" tab within the inspection window. For me, you're defaulting to "Poppins" and "Times New Roman" fonts.

    5) A minor issue that might not effect anything at the moment would be having extra comma following "h1,h2,h3,h4..."

    Hope this helps. Let me know if you have any more questions.

    -Dan

  13. Unfortunately, this issue would probably be best resolved through Flodesk support.

    The equivalent of "have you tried turning it off and back on again" would be; you could try removing all of the original newsletter code that you installed and adding it back to your website. It's also possible Flodesk updated their code, so maybe try replacing the old code with newly generated code from their website.

    -Dan 

  14. .sqs-block-image .design-layout-poster .image-card {
    display:flex;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    min-height: 250px;
    }

    Hello,

    Try the following code and let me know if this works and is the right aesthetic. You can adjust the transparency using different values for the background color. You may need to insert the data ID or collection ID if you don't want to target all of the other poster blocks outside of that page.

    Hope this helps!

    -Dan

     

     

  15. There are certainly ways to do this, but not without some customized code/Javascript. You can also use a plugin like this one to create a timer and redirect function. Just install it on the page the viewer is redirected to after they signup for your newsletter and set the timer to redirect back to whatever page you want.

    The issue you'll have with a solution like this, especially if it's a monetary tool for you, is that there isn't really anything stopping a viewer from returning to the page after the timer has expired. You would need to automatically scramble the URLs or create an access token that expires per user/per session. This type of system isn't really possible on Squarespace, if it is. It would need to be done by a professional developer.

    Realistically though, I don't think someone would really take advantage of that workaround but it's just a thought perhaps something to consider in the future.

     

    Hope this help!

    -Dan

     

  16. Hello,

    We can't view your website. If you could you set a site-wide password and share it, we can provide a more accurate code for you.

    The best way to insert this type of graphic is to find a arrow image that resembles your desired look in PNG or SVG format and upload it to your website. You'll use a code block with "absolute" positioning to overlap the transparent image between the two sections.

×
×
  • Create New...