jorohaco

@Web_Solutions thanks so much that's precisely what I needed!

If you don't mind, could you explain what from this code is exposing that menu item? I'm assuming it's more so the snippet below, but I'm curious how adjusting the display to flex is exposing the menu item.

.header-display-desktop, .header-actions, .header-actions-action

Hi all

I built a landing page that has a single persistent CTA in the desktop header that is an anchor link to the bottom-most section of the page.

Site: https://buttercup-sparrow-a7h3.squarespace.com

I need to replace the mobile burger menu with the exact same anchor link/button that is on the desktop breakpoint, or put another way—take that CTA button that also lives in the mobile menu and have it replace the mobile burger icon. I've already hidden the burger menu with the CSS below, but that's as far as I've gotten. Any help on this would be appreciated.

// No burger
@media screen and (max-width:1024px) {
  .header-nav {
    display: flex !important;
    justify-content: flex-end !important;
  }
  .header-burger {
    display: none !important;
  }
  .header-title {
    max-width: 48% !important;
  }
  a#site-title {
    white-space: nowrap;
  }
}

Nevermind. I fiddled with the code above and got it working! Thanks much!

6 hours ago, tuanphan said:

Which page are you referring to? I don't see it on homepage or any portfolio pages on header

Different use case—not a portfolio page, just a Services section that needs an additional text block below the Title as a <p2>. It's a single landing page so it should be there below the "20x faster" section.

Hi @tuanphan or anyone available to help. I'd like to do something similar here and insert a subhead text block into this Services section. I attached screens to illustrate

vanilla-megalodon-ejlw.squarespace.com

password: sqs331

Thank you, and all that makes sense and is helpful. We're set here.

Neither of those seemed to work 😕. Still getting the same behavior (visible in Custom CSS view, not anywhere else including in an incognito window).

// CUSTOM ICONOGRAPHY
// cart
.header .header-actions-action--cart svg {
  stroke: transparent !important;
}
.header-actions-action--cart .icon-cart-quantity {
  display: none !important;
}
/* .header .header-actions-action--cart {
  background-image: url('/s/shopping-cart.svg') !important;
  background-size: contain !important;
  height: 32px !important;
}*/
.icon--cart {   
  svg {     
    display: block !important;
  }   
  background-image: url('https://broccoli-parakeet-js8k.squarespace.com/s/shopping-cart.svg') !important;   
  background-size: 32px 32px !important;   
  background-repeat: no-repeat !important; 
}

That didn't work. Is there a way to instead use the raw SVG code rather than rely on an SVG file to load, perhaps?

Hmm.. the icon seems to not be reliably showing up after implementing the code below. It seems to only be visible when I'm in the Custom CSS view. Thoughts anyone?

Custom CSS view

Standard view

// cart
.header .header-actions-action--cart svg {
  stroke: transparent !important;
} .header-actions-action--cart .icon-cart-quantity {
  display: none;
} .header .header-actions-action--cart {
  background-image: url('/s/shopping-cart.svg');
  background-size: contain;
}

Perfect. That works, thank you!

Tried searching the forum but seems no one's asked on how to use an SVG as a replacement for the cart icon. I don't want to use a PNG, because I wouldn't be able to control the color at that point.

I started using the following code to replace the default cart icon but the SQS interface wouldn't let me upload an SVG (odd, right?), so I couldn't define a background-image url. Since I can't upload an SVG file (unless I'm missing something), how can I leverage the raw SVG code to replace the default cart icon?

https://broccoli-parakeet-js8k.squarespace.com/

Site Password: duckdogelk

// cart icon
.header .header-actions-action--cart svg {
  stroke:transparent!important
} .header-actions-action--cart .icon-cart-quantity {
  display:none
} .header .header-actions-action--cart {
  background-image: url(image-url-here); background-size: contain
}

Just checked and looks like this has finally been resolved, or at least one part of the problem.

Ah—div id then class then html tag. That worked of course, and as always thank you one thousand @tuanphan

Site URL: https://heptagon-bugle-5sad.squarespace.com/

Here's yet another basic CSS question over how to target and change the font of one div block on a particular page. Sorry for redundancy. Site is on 7.1 and at https://heptagon-bugle-5sad.squarespace.com/ and password is 4c5sad

Under section[data-section-id="62d1ca1f7242da41460f5e9f"] of the homepage, I need to change the title "Subheadline to Who We Are" there to a header style, or rather to just this:

font-family: 'barlow_semi_condensedblack', sans-serif !important;
letter-spacing: -1px !important;

Help.

The simplicity of this solution makes me kick myself that I hadn't thought of it. This worked perfectly. Thank you @creedon

@creedon Here's the public URL: joroha.co/wellevate-dosage-ux

All the copy that I would like to highlight is already italicized. Bold seems to be an obvious answer to my problem, however I use that style for some headings. A color highlight would serve my purposes better—helping recruiters & hiring decision-makers to scan content for the most pertinent stuff.

Thanks in advance.

I need to do the same, but I have Galleries and page descriptions (in 7.0) that don't allow markdown blocks. So, I wonder if/how we're able to globally replace all Italic text with something like:

font-style:normal; background-color:green;

Basically, how would I target the italic font style globally? I hardly ever use italic text in my copy, so I figured that could be a solution.

Or is there a better approach to this perhaps?

Problem solved 🎉

I just checked Collapse Landscape Spacing in the Design options, which happens to 'magically' make the images that I need to be continuous and others not—images with a larger height dimensions have their padding intact, while images with a larger width are stacked to be seamless.

I've attached a screenshot @bangank36

Site URL: https://john-coleman-voum.squarespace.com/landing-pages-emerson

It's been years since I've updated my portfolio so I'm a bit rusty—and I'm unfortunately I'm still running on 7.0 and can't afford to rebuild under 7.1 right now.

Anyhow, I need to remove the padding between some images within a Project gallery. The site I'm linking to is just an example. I need to reduce the vertical padding between the second and third images to 0px, but keep the padding between the first and second images as is. And I'll need to repeat this process for several other images that I will later upload.

Any help is appreciated. Thank you.

Thank you sooo much @tuanphan. That worked like magic, and just in time for my client meeting in 2 minutes! #lifesaver 🤗🤗🤗

Bueller? 🥶

Site URL: https://carillon-flower-3xhs.squarespace.com/

Hello. I need to modify the mobile stacking order of content in a 3-column image/text/spacer layout.

Site password: XRdesign

Jump or scroll to the "Process" section. For larger displays, the order of the content blocks is:

ROW A: Image — spacer — Text

ROW B: Text — spacer — Image

... rinse and repeat.

On mobile they all need to follow one pattern:

COLUMN: Image — spacer — Text

I've done a search on this and there were a number of threads covering but they all kind of dead-end(ed). I honestly feel like a fix to this should have been baked into 7.0 since it's such a common UI pattern. Any help would be appreciated. And thank you! 🙏