Jump to content

tuanphan

Circle Member
 View Profile  See their activity

  • Posts

    65,269

  • Joined

  • Last visited

  • Days Won

    521

 Content Type 

Everything posted by tuanphan

  1. tuanphan
    I see you fixed it with this CSS code? @media screen and (max-width: 640px) { .comment-count span { font-size:15px !important } span.comment-btn.sqs-system-button.sqs-editable-button-font.sqs-editable-button-shape { visibility: hidden } span.comment-btn.sqs-system-button.sqs-editable-button-font.sqs-editable-button-shape:after { content: "LOG YOUR SCORE"; visibility: visible; background: #e38b6c; color: #fff; font-family: halyard-display; font-weight: 500; font-style: normal; text-transform: none; line-height: .75em; letter-spacing: .05em; -webkit-font-smoothing: antialiased; font-size: 10px; line-height: normal; padding: 10px 10px } }
  2. tuanphan
    What is your problem? Can you describe in more detail + site url, we can check easier
  3. tuanphan
    Hi, Can you share link to Work Page?
  4. tuanphan
    This code looks correct. What is problem with code?
  5. tuanphan
    I think his site is Well template. If you share link to gallery on your site, we can take a look
  6. tuanphan
    Summary Block/Gallery Block has a Slideshow layout option with left/right arrow. You can use these blocks to achieve carousel scrolling. Then we can use code to move it into Announcement Bar.
  7. tuanphan
    Change your first code, from this .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(32,28,105,0.9); /* overlay color */ height: 100%; padding: 0; opacity: 0; } to this .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(32,28,105,0.9); /* overlay color */ height: 100%; padding: 0; opacity: 0; pointer-events: none; } (I added pointer-events: none;)
  8. tuanphan
    I think you can add a section to top, then use a background image with half of image is orange color, half is white color, then we can move code to move it behind header. SO you can achieve solid color block logo With nav underline, add this to Design > Custom CSS nav.header-nav-list { border-bottom: 1px solid black; }
  9. tuanphan
    Can you share link to these author pages? We can give code to make text clickable to those url Carrie Vaughn Marie Vibbert J. T. Greathouse Matt Dovey Sarah Pinsker Delilah S. Dawson C. L. Clark
  10. tuanphan
    I don't see Last Name in Footer. Can you check it again?
  11. tuanphan
    Try adding to Design > Custom CSS /* Space under Register here */ .fe-64418a303b164fcb4ce2e309 { grid-template-rows: repeat(30,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important; }
  12. tuanphan
    If you share site url, we can give code to adjust its height
  13. tuanphan
    If you share link to page where you have problem, we can check easier
  14. tuanphan
    Hi, I don't see cta button on desktop header. Can you check it again?
  15. tuanphan
    If the site is Business Plan or higher, you can using this code (Settings > Developer Tools > Code Injection > Footer). <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <style> article>section:first-child a.next-section { padding-top: 70px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-block; color: #fff; font : normal 400 20px/1 'Josefin Sans', sans-serif; letter-spacing: .1em; text-decoration: none; transition: opacity .3s; animation: fade_move_down 4s ease-in-out infinite; } article>section:first-child a.next-section:before { content: "\e009"; font-family: 'squarespace-ui-font'; font-size: 50px; } /*animated scroll arrow animation*/ @-webkit-keyframes fade_move_down { 0% { -webkit-transform:translate(0,-10px); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform:translate(0,10px); opacity: 0; } } @-moz-keyframes fade_move_down { 0% { -moz-transform:translate(0,-10px); opacity: 0; } 50% { opacity: 1; } 100% { -moz-transform:translate(0,10px); opacity: 0; } } @keyframes fade_move_down { 0% { transform:translate(0,-10px); opacity: 0; } 50% { opacity: 1; } 100% { transform:translate(0,10px); opacity: 0; } } </style> <script> $(function() { $("body.homepage #page>article>section:first-child").append('<a href="#" class="next-section"></a>'); $('a.next-section').on('click', function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $("body.homepage #page>article>section:first-child").next().offset().top}, 500, 'linear'); }); }); </script> To change arrow color, change the line color: #fff;
  16. tuanphan
    try change position: FIXED; to position: absolute;
  17. tuanphan
    You can also use some CSS (Design > Custom CSS) like this to achieve request .portfolio-grid-basic .grid-item h3 { color: transparent; background-size: cover; background-position: center center; display: inline-block; } .portfolio-grid-basic .grid-item:nth-child(1) h3 { background-image: url(https://cdn.pixabay.com/photo/2023/05/23/18/12/hummingbird-8013214_1280.jpg); } .portfolio-grid-basic .grid-item:nth-child(2) h3 { background-image: url(https://cdn.pixabay.com/photo/2023/06/10/05/11/himalyas-8053173_1280.jpg); } .portfolio-grid-basic .grid-item:nth-child(3) h3 { background-image: url(https://cdn.pixabay.com/photo/2023/06/12/05/12/bird-8057638_1280.jpg); } Replace Pixabay with your png url
  18. tuanphan
    Add this code under to resize image on mobile @media screen and (max-width:767px) { .sqs-announcement-bar:before { width: 5vw !important; height: 5vw !important; } }
  19. tuanphan
    You can remove the code, I will check it again easier
  20. tuanphan
    Which template do you use? I will try test it on my site
  21. tuanphan
    Use this code div.header-nav-item:nth-child(4)>a { border: 1px solid blue; padding-left: 10px !important; padding-right: 10px !important; }
  22. tuanphan
    Hi, Can you share link to page where you added it? We can check easier
  23. tuanphan
    You mean change logo to new version on homepage, and other pages will use current logo?
  24. tuanphan
    This will require a lot of code, I intend to write a guide on this
  25. tuanphan
    Hi, Can you share link to page where you use image? We can try custom code to do this
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources