Jump to content

tuanphan

Circle Member
  • Posts

    63,866
  • Joined

  • Last visited

  • Days Won

    511

Everything posted by tuanphan

  1. You can add Hubspot Code Block in Additional Info, then we can give code to move it to current position
  2. Try add this CSS under .sqs-gallery-design-carousel .sqs-gallery-container { position: relative; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous { position: absolute; top: 0; left: -50px; transform: rotate(90deg); } .sqs-gallery-design-carousel .sqs-gallery-controls .next { position: absolute; top: 0; left: -50px; transform: rotate(90deg); }
  3. Change to this <script> $(document).ready(function(){ // Danielle Noakes Photography $('.fe-block.fe-block-ef35e5cfca728e4a7896 h4').click(function(){ $(this).addClass('hover-active'); $('.fe-block-yui_3_17_2_1_1700218883919_84895 h4').removeClass('hover-active'); $('.fe-block-yui_3_17_2_1_1700218883919_79119').show(); $('.fe-block-664c85065e3dd8beae5f').hide(); $('.fe-block-yui_3_17_2_1_1700218883919_89095').show(); $('.fe-block-e946d00316d1668d7a5c').hide(); }); // iel beauty $('.fe-block-yui_3_17_2_1_1700218883919_84895 h4').click(function(){ $(this).addClass('hover-active'); $('.fe-block.fe-block-ef35e5cfca728e4a7896 h4').removeClass('hover-active'); $('.fe-block-664c85065e3dd8beae5f').show(); $('.fe-block-yui_3_17_2_1_1700218883919_79119').hide(); $('.fe-block-yui_3_17_2_1_1700218883919_89095').hide(); $('.fe-block-e946d00316d1668d7a5c').show(); }); }); </script> <style> @media screen and (min-width:768px) { .fe-block.fe-block-664c85065e3dd8beae5f { display: none; } .fe-block-e946d00316d1668d7a5c { display: none; } }} .fe-65576dfbfe21dd44b1c2d058 h4 { cursor: pointer; } .hover-active { color: #81919f; transition: all .1s ease-in-out; } </style>
  4. With Footer, use this CSS code body{ position: relative; } footer#footer-sections { position: absolute; bottom: 0; left: 0; z-index: 999; width: 100%; } footer.sections section, footer.sections .section-background, footer.sections .section-border { background: transparent; } article section:last-child { padding-bottom: 250px; } @media screen and (max-width:767px) { article section:last-child { padding-bottom: 450px; } }
  5. Add this code to Website Tools (under Not Linked) > Custom CSS to add hover image div#block-yui_3_17_2_1_1701422267607_2792:hover img { content: url(https://content.invisioncic.com/p289038/monthly_2023_12/BUTTON-hov.png.391c1b7588c1a9fd61cd83034b4b94e6.png); }
  6. I remember I sent the code @media screen and (max-width: 991px) { .gallery-fullscreen-slideshow { height:30vh !important; } }
  7. Can you share link to your page, we can check & adjust code easier
  8. Add this code to Website Tools (under Not Linked) > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ if (jQuery(window).width() < 767) { $('div#block-yui_3_17_2_1_1702311304059_54181+.row .span-4:nth-child(2) .image-block').appendTo('div#block-yui_3_17_2_1_1702311304059_54181+.row .span-4:nth-child(1)'); $('div#block-yui_3_17_2_1_1702311304059_54181+.row+.row .span-4 .image-block').appendTo('div#block-yui_3_17_2_1_1702311304059_54181+.row .span-4:nth-child(1)'); } }); </script> <style> @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1702311304059_54181+.row .span-4 { display: grid; grid-template-columns: repeat(2,1fr); }div#block-yui_3_17_2_1_1702311304059_54181+.row .span-4 .image-subtitle p { font-size: 16px; } } </style> then check again on your real mobile
  9. Currently I don't see code in Code Injection > Footer. Can you take a screenshot? Or Did you downgrade your plan to Personal Plan? (personal plan doesn't support Code Injection)
  10. We can style it same as your button by adding this to Website Tools (under Not Linked) > Custom CSS button.lightbox-handle:before { content: "\f8ce"; font-family: 'Material Symbols Outlined'; color: red; font-size: 20px; } button.lightbox-handle { display: flex !important; align-items: center; } Or you can use a Popup Plugin (affiliate link) to achieve this, just install plugin then add url plugin provided, it will work
  11. Yes. the code will prevent button wrap..so it will make overlap on some places Which screen sizes do you see problem? I will give another code to fix these buttons
  12. I can't find a reason you try adding Classic Editor Section, then add your content again, I think problem won't appear
  13. I don't see hover effect. Can you explain it a bit clearly? https://www.lebendige-gaerten-hh.de/gartenplanung
  14. Add to Website Tools (under Not Linked) > Custom CSS button[class*="_arrow-button"] svg, .mobile-arrows svg { display: none !important; } button[class*="_arrow-button--left"] div:before, .mobile-arrow-button--left:before { content: "\e006"; font-family: 'squarespace-ui-font'; transform: rotate(270deg); display: block; font-size: 30px; line-height: 60px; } button[class*="_arrow-button--right"] div:before, .mobile-arrow-button--right:before { content: "\e006"; font-family: 'squarespace-ui-font'; transform: rotate(-270deg); display: block; font-size: 30px; line-height: 60px; }
  15. Recently I solved 2 cases, similar your case. My approach is design a svg or png shape file, then we will use CSS code to add it under header
  16. You can also consider adding Classic Section, instead of new editor section
×
×
  • 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.