-
Posts
410 -
Joined
-
Last visited
-
Days Won
1
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by Wolfsilon
-
Change alignment for one item in the main navigation bar
Wolfsilon replied to ChiroUp's topic in Customize with code
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 -
Image block of specific section to align to edge of screen
Wolfsilon replied to Cams's topic in Customize with code
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. -
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".
-
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.
-
Responsive design issue on homepage, need code assistance
Wolfsilon replied to makennaokeeffe's topic in Customize with code
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.- 4 replies
-
- responsive
- responsive-design
-
(and 1 more)
Tagged with:
-
Image and text re-organise (Mobile Breakpoint)
Wolfsilon replied to Maksymrewko's topic in Customize with code
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; } } } -
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!
- 1 reply
-
- images
- avenue-template
-
(and 1 more)
Tagged with:
-
MindBody Widget will not show up on my site!
Wolfsilon replied to NGZ1210's topic in Customize with code
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. -
How to add portfolio section to home page (7.1 template)?
Wolfsilon replied to Suren's topic in Customize with code
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. -
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; }
-
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 🙂
-
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.
-
Specifying element ID's inserted with a code block
Wolfsilon replied to dl_23's topic in Customize with code
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. -
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.
-
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.
-
Need help with removing variant option title
Wolfsilon replied to urbansoulistic's topic in Customize with code
Glad the first code worked, You could try the following code for your variant buttons: .product-variants .fakeSelector { margin-bottom: 0px !important; }- 7 replies
-
- product-page
- variants
-
(and 1 more)
Tagged with:
-
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; }
-
How to remove white space on top of the home page
Wolfsilon replied to Ania-d's topic in Customize with code
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!- 3 replies
-
- adirondack-template
- css
-
(and 1 more)
Tagged with:
-
Need help with removing variant option title
Wolfsilon replied to urbansoulistic's topic in Customize with code
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; }- 7 replies
-
- product-page
- variants
-
(and 1 more)
Tagged with:
-
Button alignment (mobile breakpoint)
Wolfsilon replied to Maksymrewko's topic in Customize with code
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; } } }