AJeans

@tuanphan I'm having the same issue with a fonts not showing properly on mobile and safari desktop, but find in preview mode in squarespace and on chrome.

Here's the site: houseofrosie.squarespace.com pw: chrisandlindsay

Any advice? I've tried some of the answers in this thread with no luck.

Thanks @tuanphan  -- in case anyone else follows up on this in the future. Your code worked great, but it altered the spacing for regular products AND add-on products. I adjusted it slightly to target just the add on product, without impacting the regular product.

@tuanphan Here's a link for a test product   https://lockandmortice.squarespace.com/store-tests/p/country-feast-set-3nybt-79cby

@tuanphan 

Is anyone able to help me figure out how to adjust the spacing in the Add-On Product Section? The "Select a Size" width seems too large, and "Add to Estimate" width is obviously too small. I've tried playing with padding but have had no luck. It looks great on mobile, but desktop needs some work!

Thanks!

8 hours ago, tuanphan said:

Add this CSS (Design > Custom CSS0

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1686161833328_367054+.row .span-6 {
    width: 100% !important;
}
}

 

Thank you! Is there a way to do this to all text boxes in all product pages additonal information section so that I don't have to find the block id or each text box?

@tuanphan yes! Thats correct!

@tuanphan  Are you able to help me figure out how to troubleshoot this scenario? I want images and buttons in a span-6 layout to be prevented from stacking on mobile, but I DO NOT want the text blocks impacted.

Context: the text on desktop has a 3-6-3 layout with spacer blocks in the addtional information section of a product page. (I have several pages like this so I'm desperate to find a solution rather than re-designing a bunch of product pages)

See images below, first is what I want, second is NOT what I want but is happening as a result of this code:

/* Mobile images side by side - prevents stacking */
@media screen and (max-width:767px) {
  .ProductItem .ProductItem-additional .span-6 {
    width: 50% !important;
    float: left !important;
  } }

https://decagon-caribou-s63f.squarespace.com/collection/p/carmanah-table pw blackpanther

@tuanphan @creedon your my go-to experts around here. Anyone have advice on how to fix this? It looks fine once I go into my CSS, but as soon as I refresh the "SUBSCRIBE" word drops down...

The "Subscribe" button on this form won't stay centered vertically! I made adjustements in css and when I save, it all looks good until I refresh, then it goes wonky again as shown in the photo until I open up CSS... and so the cycle repeats.

Does anyone out there know why and how to resolve this?

https://decagon-caribou-s63f.squarespace.com/ pw:blackpanther

@Nick_SquareKicker

Has anyone had a hard time with scrolling when setting a video be the full width of a page? I can only scroll when my mouse is outside of the video. Any tips?

https://decagon-caribou-s63f.squarespace.com/collection/p/breadboard

pw;blackpanther

UPDATE: I added in pointer-events: none; as a temporary solution! But would love to know if there's a better one out there.

@tuanphan any idea why my placeholder text isn't appearing? It should say "EMAIL ADDRESS" in the input area.

Thank you!!

@tuanphan Looking for something similar but having a hard time finding the right code. I had them lined up but then one day POOF ... they were misaligned again!

https://decagon-caribou-s63f.squarespace.com/

PW; blackpanther

Does anyone out there know how to use CSS to change the site logo (white version to black version) ONLY when a mega menu is open/active?

Context: I have both black and white versions as separate files on my site. The black version is the primary logo throughout the site, but I have used this code to switch to the white version on the homepage until you scroll.

//// HOME PAGE INITIAL WHITE LOGO ///

/**desktop logo**/
@media screen and (min-width:767px) {
#collection-642dd8240a60c7018cf63f5d .header-title-logo img {
content: url("https://static1.squarespace.com/static/642cf2bb3411145e70873b6a/t/64401e41b9f32a191d16461e/1681923649471/Lock+and+Mortice+Logo+White-1000.png") !important;
max-height:inherit !important;

  }
}

/**mobile logo**/
@media screen and (max-width:767px) {
#collection-642dd8240a60c7018cf63f5d .header-display-mobile .header-title-logo img {
content: url("https://static1.squarespace.com/static/642cf2bb3411145e70873b6a/t/64401e41b9f32a191d16461e/1681923649471/Lock+and+Mortice+Logo+White-1000.png") !important;
max-height:inherit !important;

  }
}

/* SCROLLS TO BLACK HEADER */
header#header.shrink {
    background: #FFFFFF !important;
    transition: 0.5s ease-in;
}

header#header.shrink img {
    filter: brightness(0) invert(0);
}

header#header.shrink .header-nav-list * {
    color: #282829;
      transition: 0.2s ease-in;
}

header#header.shrink .header-actions * {
    fill: #282829;
    stroke: #282829;
}

//// end of HOME PAGE NAV edits ///

-----

This is what I tried, with no luck so far. (It does change the navigation colour successfully!)

.mega-menu-open .header-announcement-bar-wrapper, .mega-menu-open { 
.header-nav *, nav.header-menu-nav-list * {
    color: #282829;
    transition: 0.1s ease-out; } }

.mega-menu-open .header-announcement-bar-wrapper, .mega-menu-open {
.header-title-logo img {
content: url("https://static1.squarespace.com/static/642cf2bb3411145e70873b6a/t/64480560c173a917181c7029/1682441568120/Lock+and+Mortice+Logo+Black-1000.png") !important;
  max-height:inherit !important;
  z-index:999999 !important;
  } }

https://decagon-caribou-s63f.squarespace.com/

PW; blackpanther

Thanks @creedon - I found 2 instances of that code that were supposed to be isolated something else, but weren't. Not sure why it suddenly changed on me, but alas I've found a workaround. Thanks again!

I was editing my site, when all of a suddenly all the section heights changed. Every section has additional spacing added far beyond what I initially designed, and adjusting the section heights/styles doesn't do anything.

Context: I was adding a code injection when it happened, but removed what I added, and it didn't go back to normal - so I am unsure on the cause! Help!

@tuanphan (You're my go to guru around here... any thoughts?)

Site: https://decagon-caribou-s63f.squarespace.com/ Password: blackpanther

Attached is an example of the footer MASSIVE, and what it's supposed to look like.