Jump to content

Wolfsilon

Circle Member
 View Profile  See their activity

  • Posts

    410

  • Joined

  • Last visited

  • Days Won

    1

 Content Type 

Everything posted by Wolfsilon

  1. Wolfsilon
    Hello, If you could share a link to your website with this navigation in question it would be easier for us to help you. With out seeing the code or issue in context, it will be too difficult to eye-ball it. Thanks, Dan
  2. Wolfsilon
    section[data-section-id="61706cb56765230a8ca03d86"] { .page-section > .content-wrapper { max-width: 100%; padding-right: 0 !important; } } Without doing any other optimizations the quickest solution to get your image on the right of the screen is to just override the section default padding and max-width. You'll then need to use spacers or custom CSS to adjust the layout and sizing's if you want. If I remember correctly, you should be able to apply a spacer to the left of the section and between the text to bring it in a bit more like the original layout. IMO - this is the easiest way of doing something like this, otherwise you'll likely be doing all of the positioning yourself.
  3. Wolfsilon
    If you're using absolute units like "px" to set your font size and overriding the Squarespace default sizing's, your font will likely always be the exact pixel amount that you set. H1 { font-family: "CUSTOM_FONT_FACE"; font-size: 54px; } Will always be 54px regardless of the size of the rest of your content or screen size. You'll likely want to set the maximum size of each of your custom text elements using an absolute unit and use relative units to scale appropriately. Ideally, you'd end up with unit that calculates the size dynamically. Otherwise, you'll need to use media queries to adjust the size for each possible screen size. Example setting a font size with an absolute unit and using relative units for responsive design could look like this: h1,h2,h3 { font-family: "MY_FONT"; font-size: 54px; } .myBlock h1 { font-size: 3rem; } .myBlock h2 { font-size: 1.5rem; } You can also use other methods to calculate the sizing/scale of elements using units or formulas like "calc()" or "vmin" or "vmax" and "vw" and "vh".
  4. Wolfsilon
    I would try just overriding the entire section with a new min-height. You currently have a min-height of "33vh" for your section. Try the following code: section[data-section-id="6112b7573ddad372bbc103a1"] { min-height: 100% !important; } You can then also adjust your padding/margins if needed.
  5. Wolfsilon
    Right. The mobile view through the browser inspector and the one that Squarespace provides from within the dashboard can be misleading. It will only display the actual screen dimensions and doesn't include the UI of the browser on mobile devices. If scrolling down to see the text is the only issue you're having, I would find the appropriate margins/padding for both Android and Apple devices and apply those measurements to your margin or padding bottom text block via CSS.
  6. Wolfsilon
    In the code you shared, you're also targeting the gallery and setting the margin for "52px 135px..." That's probably why your masonry gallery is crammed together.
  7. Wolfsilon
    Just a thought, perhaps changing it to "@media screen and (min-width: 747px) {....}" might help.
  8. Wolfsilon
    Try this code: section[data-section-id="615dc3a559f87607cdbd5ede"], section[data-section-id="615dbc213cf61c03804eff48"] { @media only screen and (max-width: 640px) { .sqs-row { display: flex !important; flex-direction: column-reverse !important; } } }
  9. Wolfsilon
    Please share the link or URL to the page with the images you'd like to add a border. Without a link, there are just too many possible issues or solutions. Thank you!
  10. Wolfsilon
    Do you have any custom css or javascript applied to this page, or this section?
  11. Wolfsilon
    Try the following code: [data-section-id="61530ca980d3d35231f2dc77"] { @media screen and (min-width: 640px) { .sqs-row { display: flex; align-items: center; justify-content: center; } } }
  12. Wolfsilon
    A couple of things, please set your website visibility to password-protected and/or send us the password to view your website so that we help you make the appropriate changes. Second, if the MindBody widget isn't working it could be because you do not have a Squarespace Business plan. You'll want to make sure that you have a Javascript enabled website plan to use widgets and other custom code. Additionally, if this plugin is the only thing that you need and you can't seem to get it to work, you can always setup and use the default contact form or button that comes with your Squarespace website.
  13. Wolfsilon
    You need to build your sections on the actual portfolio page with you project selections. You can't bring a portfolio page into a standard page. If that makes sense. So, you'll add all of the sections you want to the portfolio page and then set that portfolio page as your "Home" page.
  14. Wolfsilon
    You could try: .portfolio-hover[data-horizontal-align="center"][data-mode="hover-cover"] .portfolio-hover-item-content { margin-left: 0 !important; margin-right: 0 !important; }
  15. Wolfsilon
    That whole page is decked out to the max with customization's. I get it, it needs to not look like their base templates and I see a lot of features on those pages first and then drip-feed down to base templates/stock features. But yeah, that "sticky-parallax" effect is not a stock feature -- At least I don't think it is, which is too bad because if I could create websites that look halfway like their own pages, I'd have way more work 🙂
  16. Wolfsilon
    Well, I think most of us on here won't have a membership or anything to login and see what's happening on your website to view the dashboard, but if the problem is with the width of the block. I'd try identifying the block with your third-party app and using Custom CSS to manually change the width of the code block.
  17. Wolfsilon
    The code block will receive it's own unique ID regardless if you've specified one yourself inside the HTML code. Unless you need to set an ID for your code to work, you should be able to use the one Squarespace sets for you to customize it.
  18. Wolfsilon
    This partly has to do with the way Squarespace defaults to using relative units for dimensions. The code block defaults to a size that fits the content in a row or column. The first image you've shared displays "Our Results" and a properly sized iframe because It's filling the other half of the section. It's looking like a 50/50 split in the first section. Following that section you have a new section with "Our Charts." That first line of the section fills the entire width of the section, give or take the padding left and right, and signals that "Hey, this text block is full-width, everything else should be this wide too!". So when you put your three iframes in the following row, it'll calculate 100/3 = 33.33333%. Since your iframes are set at a 100% width, it means that it will fill 100% of the 33.3% width of the block, which is relative to the entire width of the page set by your "Our Charts" block. Without the block, it'll just assume that each row should be 100% and then order your items automatically.
  19. Wolfsilon
    I'm assuming that both links you shared are the examples, I don't have context of your website to help you. However, it's safe to assume that you'll need a Javascript enabled site. You can possibly code this yourself if you're adept at Javascript and CSS or you can purchase a plugin to do this for you. If you're using 7.1, I think that sqsmods has recently rolled out a pretty robust horizontal scroll plugin for a reasonable price. If you're using 7.0, it could be a bit more tricky but if I remember correctly there are some templates that have a horizontal-like features that might be able to be tweaked to meet your liking. Either way, you'll need Javascript to do this and it would be best if you could provide the link to your site.
  20. Wolfsilon
    Glad the first code worked, You could try the following code for your variant buttons: .product-variants .fakeSelector { margin-bottom: 0px !important; }
  21. Wolfsilon
    I would recommend that you download and install Block Identifier extension for Squarespace if you haven't already. You can download the extension for Google Chrome or Mozilla Firefox. In most cases, text elements will fall into several categories. Headers: h1, h2, h3, h4 Paragraphs: p You can use the extension to target other blocks on your website and apply new properties to them. For example: The following code will change the text color on the first slide to black: #block-yui_3_17_2_1_1622558832913_3377 p { color: #000; }
  22. Wolfsilon
    Hi, Could you please provide the private password to access the page that you're sharing? At the moment, your website is prompting me to go to your BigCartel store. Thanks
  23. Wolfsilon
    Hello, I'm not seeing any additional or excessive white-space on my end, but I think that if you're wanting to remove everything from top of the page you could try the following code: #header { padding: 0 !important; } If that adjustment isn't what you're talking about, could you please provide more details or a screenshot indicating your desired outcome? Best of luck!
  24. Wolfsilon
    Hello, I think I'm understanding you. You would like the buttons, just not the titles, correct? Try the following code: .ProductItem-details .product-variants p { display: none !important; }
  25. Wolfsilon
    Hello, Try the following code: section[data-section-id="5e83e10e2cd8ab22d8789618"] { @media only screen and (max-width: 747px) { .sqs-row:nth-child(2) { display: flex; flex-direction: row; align-items: center; justify-content: center; } } }
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources