Jump to content

GMH

Member
  • Posts

    9
  • Joined

  • Last visited

  1. The tester page is: https://www.naturalinjector.com/test-youtube The card blocks URL Slugs are: house-calls-card-tester and youtube-card-tester I have gone into Website > Design > Site Styles > Image Block: Card to set card separation to 0% and font colors. Font families ('Chapaza' and 'Montserrat') were added via code by the original designer. /house-calls-card-tester- On the desktop view, there is white space only below the image. Is there a specific size the image needs to be, or is there CSS to have the image fill in the space regardless of how much text is added? On Mobile and Tablet view, there is white space above and below the Image Block Card section /youtube-card-tester - On Mobile and Tablet view, there is white space above and below the Image Block Card section
  2. Hello 🙂 I am having an issue with white space showing up on Mobile and Tablet views only for Image card blocks. Not sure what CSS to use. For Mobile view, there's a white space above and below the image card block. For Tablet view, there's white space only under the image side on an image card block that has a lot of text Mobile View Tablet view (image card with more text) Current CSS that is being used for the Image Card Blocks are: /* Image card layout- full width */ #yt-section-3 .Index-page-content, #testing-image-card-css .Index-page-content{ padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; max-width: 100%; } /* Image Card layout- title formatting*/ .image-block-card-dynamic-font-sizing .sqs-block-image .design-layout-card .image-title p { font-family: 'Chapaza'; line-height: 1em; } /* Image Card layout- subtitle formatting*/ .image-block-card-dynamic-font-sizing .sqs-block-image .design-layout-card .image-subtitle p { font-family: 'Montserrat'; line-height: 1.5em; } Thank you in advance for your help!
  3. Hello! 🙂 I was wondering if anyone has a solution for editing the different text portions of the Image Block Card layout. At first glance, it looks like there's a title, a subtitle (all-caps style), and the option to add a basic description section (paragraph style). The issue when I inspected the code was that the all-caps section and the body section, although automatically styled differently, are both labeled as paragraphs, so any customization affects both sections. I would like to use CSS to: Add a subtitle section or find a way to make a distinction between the all-caps section and the body section so that each section can have a different font, font size, and text color. Code these changes to be for just this page versus all Image Block Card layouts. I'm not sure what the proper way is to add the URL slug: yt-section-3 or page ID: #block-yui_3_17_2_1_1701311430473_2002 to the code I currently have. Here's the code I used to customize the title and all-cap/body section: /* Image Card layout- title formatting*/ .image-block-card-dynamic-font-sizing .sqs-block-image .design-layout-card .image-title p { font-family: 'Chapaza'; font-weight: 300; font-style: normal; letter-spacing: 0em; text-transform: none; line-height: 1.1em; color: hsl(156, 89%, 11%); } /* Image Card layout- subtitle formatting*/ .image-block-card-dynamic-font-sizing .sqs-block-image .design-layout-card .image-subtitle p { font-family: 'Montserrat'; font-weight: 300; font-style: normal; letter-spacing: 0em; text-transform: none; line-height: 1.5em; color: #90431E; font-size: 13px; } Thank you for your help in advance!
  4. I figured out how to have an image block (card design) be full-width with a custom background color for the text side. // Full Width Image Card // #URL-SLUG .Index-page-content { padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 10px; max-width: 100%; } .image-card-wrapper { background: transparent !important; }
  5. I found a solution at https://www.ghostplugins.com/steps/etgh285n. The code makes image blocks (card design) full-width. I was also able to add a background color. // Full Width Image Card // #URL-SLUG .Index-page-content { padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 10px; max-width: 100%; background: #E2E8E3; } The only issue left is that the text area is white. I would like to make it the same color as the background or transparent. I haven't found CSS that has worked. See the image below Thanks in advance! 🙂
  6. Hello, I need to add more sections of Two Columns with text on a solid background color and an image to the right or left of the text. There should be no space between the sections, and both sides should bleed to the edges of the section. There are already several sections on the website that look like this because of added CSS. However, the new sections I am creating now are not responding even though I have added the new section IDs to the list for the CSS code. The new sections should look like this: Here is the code: /* SPLIT LAYOUTS */ /* image on right */ #home-hero, #about-content-2 { background: #E2E8E3; .Index-page-content { margin: 0; width: 50%; } .Index-page-image { width: 50%; left: 50%; margin: 0; } @media screen and (max-width: 800px) { display: block; .Index-page-content { width: 100%; } .Index-page-image { width: 100%; position: relative; left: auto; height: 650px; } } } /* image on left */ #about-intro, #contact-intro, #services-intro, #house-calls-hero { background: #E2E8E3; .Index-page-image { width: 50%; margin: 0; } .Index-page-content { margin: 0; width: 50%; left: 50%; } @media screen and (max-width: 800px) { display: block; .Index-page-content { width: 100%; left: auto; } .Index-page-image { width: 100%; position: relative; height: 650px; } } }
  7. Thanks! I appreciate the solution. I am going to try it out.
  8. My Newsletter block storage is linked to my Google Drive where subscriber info is stored on a Google sheet. I need to store my subscriber list in my Google Drive because Google has the option to be HIPAA compliant for no extra fees. The issue I am experiencing is that the First and Last name fields within the Newsletter block are merged together into one cell when stored on google sheets. For email marketing purposes, we like to personalize by using our subscribers' first names but need their last names for other correspondence. I've reached out to Squarespace support, and they are aware of this issue with the Google Storage option but have no solutions. I believe my only options are to: 1. Use a form block to create two fields labeled First Name and Last Name. Does anyone know how to put the three fields (First, Last, & Email) in a single row to give the same look as the Newsletter block? 2. Continue to use the Newsletter block but figure out a way to add tags (or something) to help Google recognize the two separate fields. Does anyone know of a solution to correct this issue? Any help, suggestions, or thoughts would be greatly appreciated. 🙂
×
×
  • 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.