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

colin.irwin

Circle Member
  • Content Count

    3,466
  • Joined

  • Last visited

  • Days Won

    90

colin.irwin last won the day on January 22

colin.irwin had the most liked content!

About colin.irwin

  • Rank
    Circle Leader

Personal Information

Recent Profile Visitors

3,211 profile views
  1. Hello Colin,

    May i reach out to you about a Linkedin authentication failure? On different post in SQSPC forums this problem is mentiond. Is there any workaround or solution for?

    I have a few cliënts for witch this is really important...

     

    With kind regards,

     

    Lammert van der Wal

  2. Which template are you using? Can you post a link to your site?
  3. I would advise against justifying web text. It's a big usability problem. It makes copy very difficult to read particularly, but not only, for dyslexic readers.
  4. Do you mean you want it to be a different size on mobile? If so, adding the following to your custom css should help @media only screen and (max-width: 640px) { h4 { font-size: 88px; } } That should work - all you need to do is tweak the 88px to whatever value you want.
  5. You'll need to set a breakpoint at whatever stage the layout breaks (looks like roughly 1400px wide) At that breakpoint you should target the collection id to restrict the rule to one page and then for the columns that are 4 wide to span 100% of the available width. @media only screen and (max-width:1400px) { #collection-5cda8559cb2c42000142030b section#le-conseil-1 .sqs-col-4 { width: 100% !important; } }
  6. In the editor, scroll to the bottom of any page and edit Info Footer Content to remove the text.
  7. Try this input.field-element::placeholder { color: red !important; }
  8. Try turning off parallax scrolling in Site Styles if it is enabled.
  9. A link to your site would make it easier to provide a solution.
  10. Personally, I wouldn't use inline styles in a code block for precisely the reason that you have highlighted - it's difficult to make them responsive. However, you may be able to get things looking better with your inline styles if you use vw units rather than em. vw is relative to the viewport width. A better approach is to learn how to target a specific block for styling. This Chrome extension shows you block names that you can use in custom css. https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde Enabling the extension in your Chrome address bar will overlay the collection ID and block ids on a page. To style a text block containing the example you gave earlier you would create a normal text block and insert 4 centered lines of text. #the-block-id { p { font-size: 2vw; // the first para } p + p { font-size: 2.5vw; // para followed by a para, so 2nd para } p + p + p { font-size: 3vw; // para followed by a para followed by a para, so 3nd para } p + p + p + p { font-size: 3.5vw; // para followed by a para followed by a para followed by a para, so 4th para } } Note that the vw values I have used may not be ideal but you can tweak them. Also, the way I have targeted the paras isn't the most elegant, but it should work and give you an idea. I would use the above to get the sizing correct for wide screens and then create breakpoints to tweak the size at smaller screen widths. #the-block-id { p { font-size: 2vw; // the first para @media only screen and (max-width: 640px) { font-size: 3vw; //increase text size for screens up to 640px } } p + p { font-size: 2.5vw; // para followed by a para, so 2nd para } p + p + p { font-size: 3vw; // para followed by a para followed by a para, so 3nd para } p + p + p + p { font-size: 3.5vw; // para followed by a para followed by a para followed by a para, so 4th para } } The above shows an additional breakpoint for the first para on screens under 640px in width.
  11. Try adding the following to your custom css area (Design > Custom CSS) .html-block a:not(.sqs-block-button-element) { color: red !important; // standard link color &:hover { color: blue !important; // hover color } &:active { color: green !important; // color link goes when clicked } } Then insert the colors you need.
×
×
  • Create New...