Jump to content

tuanphan

Circle Member
  • Posts

    64,701
  • Joined

  • Last visited

  • Days Won

    516

Everything posted by tuanphan

  1. The code is for SS 7.1. Can you share link to page where you want to apply the code?
  2. @ThisWayToFabulous Add to Design > Custom CSS > Then save & reload the site /* Homepage Mobile Carousel */ @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="61a3f20b4d0dd626ec6305de"] ul { grid-template-columns: repeat(3,1fr) !important; } .user-items-list-item-container[data-section-id="61a3f20b4d0dd626ec6305de"] h2 { font-size: 17px !important; } }
  3. Can you share link to your site? We can check easier
  4. Try this new CSS * { direction: rtl !important; }
  5. Add to Design > Custom CSS /* Mobile add to cart */ @media screen and (max-width:767px) { .sqs-add-to-cart-button-wrapper { width: 70% !important; } }
  6. You can add this code to Design > Custom CSS to change Contact Page Logo to white /* contact page logo */ body#collection-61798dd19c554034ea290e2b .header-title-logo img { filter: brightness(0) invert(1); }
  7. Add to Design > Custom CSS @media screen and (max-width:767px) { body.homepage .design-layout-collage .intrinsic { width: 100% !important; left: 0 !important; } body.homepage .design-layout-collage figcaption { width: 100% !important; } }
  8. Sorry. Too many message so I don't remember your question. Can you remove all code in COde Injection, then I will test & give new code
  9. How about center icon on mobile? To center icon on mobile, add this CSS a.user-accounts-text-link.header-nav-item { margin-left: auto; margin-right: auto; }
  10. Try this new code header#header [href="/about"], header#header [href="/contact"] { display: none; }
  11. I see you used this code, you can increase 47 & 38 @media screen and (max-width: 767px) { .header-menu-nav-item [href="https://www.flygirlblog.com"] { font-size: 47px !important; } } @media screen and (max-width: 767px) { .header-menu-nav-item [href="https://www.penguinrandomhouse.com/books/600680/who-will-you-be-by-andrea-pippins/"] { font-size: 38px; } } Also, you should change 767px to 991px, because on tablet, same problem appears
  12. Add to Design > Custom CSS @media screen and (max-width:767px) { [data-section-id="6191f511caf7c170226fef67"] { min-height: unset !important; } [data-section-id="6191f511caf7c170226fef67"] .content-wrapper { padding-top: 10px !important; padding-bottom: 10px !important; } }
  13. Your code missing a "r" character, the code should be @media screen and (max-width:900px) { [class*=sqs-col] { width: 100% !important; } .spacer-block { display: none !important; } }
  14. Just recognize header will overlap some text in banner. How about resize banner & move it under header & set a background color for header? eg.
  15. You mean keep desktop - mobile same layout? With image on left - info on right? https://rewildoutfit.com/en/hybrid/p/borealis-admiral
  16. First, add buttons, then Use this code (Design > Custom CSS) /* Make list images clickable */ li.list-item { position: relative !important; } .list-item-content__button-container { position: absolute !important; top: 0; bottom: 0; left: 0; right: 0; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; }
  17. (Backup code before replacing new code) Try replace above code with this code .design-layout-poster img{ -webkit-transition: 1s; -o-transition: 1s; transition: 1s} .design-layout-poster:hover img{-webkit-transform: rotateY(180deg);transform: rotateY(180deg); -webkit-transition: 1s; -o-transition: 1s; transition: 1s} .image-card-wrapper{-webkit-transform:rotateY(180deg)!important;transform:rotateY(180deg)!important; opacity:0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;} .design-layout-poster:hover .image-card-wrapper {opacity:1!important; -webkit-transform:rotateY(0deg)!important; transform:rotateY(0deg)!important; background: #ebe6e6; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;} @media only screen and (max-width:640px){ .design-layout-poster img{ -webkit-transition: 1s; -o-transition: 1s; transition: 1s} .design-layout-poster:active img{-webkit-transform: rotateY(180deg);transform: rotateY(180deg); -webkit-transition: 1s; -o-transition: 1s; transition: 1s} .image-card-wrapper{-webkit-transform:rotateY(180deg)!important;transform:rotateY(180deg)!important; opacity:0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;} .design-layout-poster:active .image-card-wrapper {opacity:1!important; -webkit-transform:rotateY(0deg)!important; transform:rotateY(0deg)!important; background: #ebe6e6; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;}}
  18. Add to Design > Custom CSS section#welcome-home>div { padding-top: 60px; }
  19. In your code, I see margin-left: -40px; you can change -40px to 0px
×
×
  • 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.