Jump to content

tuanphan

Circle Member
  • Posts

    63,866
  • Joined

  • Last visited

  • Days Won

    511

Community Answers

  1. tuanphan's post in Trying to crerate a landing page was marked as the answer   
    Your code is for 7.0 version. Use this new code for 7.1 version
    <style> header#header, footer.sections { display: none !important; } </style>  
  2. tuanphan's post in How to hide an icon on mobile but leave it on desktop? was marked as the answer   
    You can use this CSS code
    @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1709744709073_82335 h1 { visibility: hidden; } }  
  3. tuanphan's post in Expand Dropdown Menu By Default on Mobile (Page View) was marked as the answer   
    You can use this code to Website > Website Tools > Custom CSS to expand it on mobile
    div#folderNav li { display: block !important; }  
  4. tuanphan's post in Dropdown Menu to direct to a static page was marked as the answer   
    You can use this code to Website > 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> $(document).ready(function() { $('div.header-nav-item:nth-child(1)>a').click(function() { var link = $(this).text(), href = "/work"; window.location.href=href; }); }); </script>  
  5. tuanphan's post in Mysterious gap in mobile navigation was marked as the answer   
    You can use this code to Custom CSS box
    @media screen and (max-width:767px) { .header-nav-item.header-nav-item--collection { margin-left: 0px !important; } nav.header-nav-list { justify-content: flex-start !important; } }
  6. tuanphan's post in Custom coding for pages wont work on mobile was marked as the answer   
    With mobile, edit this code to this new code
    <style> /* hide items on mobile */ [data-folder="root"]>div:first-child>div:first-child>div:nth-child(1), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(2), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(3), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(4), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(5) { display: none !important; } </style>  
  7. tuanphan's post in Hide/Mask Anchor Link URL in Address Bar was marked as the answer   
    I think this is not possible
  8. tuanphan's post in Add Event Page Title to Navigation was marked as the answer   
    Add this code to Last Line in Code Injection > Footer
    <script> $(document).ready(function(){ var EventItemTitle = $('.eventitem-title').text(); $('.header-nav').append('<span>'+EventItemTitle+'<span>'); });</script> <style> div.header-nav>span { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #ebdec4; text-transform: uppercase; font-size: 2.2em; } h1.eventitem-title { display: none; } </style>
  9. tuanphan's post in Customized CSS not working for form button was marked as the answer   
    Try this id
    div.form-block button
    If it still doesn't work, you can share link to page in screenshot, we can check its id easier
  10. tuanphan's post in Customizing hover effects on links for headings - 7.1 was marked as the answer   
    Use this code
    #page a:hover { font-style: italic; } #page a:hover span { color: #4ACA54 !important; }  
  11. tuanphan's post in Looking for a way to insert code into blog post excerpts was marked as the answer   
    Add this line to top of Code Injection Footer code
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>  
  12. tuanphan's post in Adding highlight effect to title for portfolio section was marked as the answer   
    Try this code to Website Tools > Custom CSS
    div.list-section-title p { display: inline; background-color: #f1f; border-radius: 30px; padding-left: 10px; padding-right: 10px; }  
  13. tuanphan's post in How to get 2 images side by side on product pages was marked as the answer   
    You can use this code to Website > Website Tools > Custom CSS
    /* All devices */ .ProductItem-gallery-slides { display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 5px 5px; } .ProductItem-gallery-slides:before { display: none; }

  14. tuanphan's post in Font is different on Android was marked as the answer   
    Hi,
    I think you try set font again on Site Styles and check again
  15. tuanphan's post in Cover page newsletter sign up was marked as the answer   
    Use this code to Cover Page Header Code Injection
    <style> div.form-title { display: none; } .form-inner-wrapper { max-width: 400px; } </style>  
  16. tuanphan's post in Need help customizing code for text rotation on mobile was marked as the answer   
    You can change code to this to make it run on desktop only
    @media screen and (min-width:992px) { #block-yui_3_17_2_1_1707432821850_197215 { transform: rotate(-90deg);} }  
  17. tuanphan's post in Summary Block Help was marked as the answer   
    You try using Classic Editor Section instead, the last problem won't appear

  18. tuanphan's post in Stack Image over Text in List Summary Block on Tablet was marked as the answer   
    Add this code to Website > Website Tools > Custom CSS > then save & reload the page
    /* Tablet summary */ @media screen and (min-width:768px) and (max-width:1024px) { div#block-c52af944a800cbb43140 .summary-item { flex-direction: column !important; } }
  19. tuanphan's post in Adding static logo over image gallery on homepage with nav bars and title display - Squarespace Brine 7.0 was marked as the answer   
    Use CSS code like this
    h2.Index-gallery-item-content-heading { font-size: 30px; color: #f1f; }  
  20. tuanphan's post in Linking button on header to a form on the home page was marked as the answer   
    Header button, change this URL
    #contact to
    /#contact With second cta, which button are you referring to?
  21. tuanphan's post in Lightbox-only caption photo gallery with CSS? was marked as the answer   
    You can use a CSS code like this (Website > Website Tools > Custom CSS)
    [data-slide-url]:after { display: block; color: black; z-index: 99999; position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); } [data-slide-url="u912u88ef4rhh05pptrzi3tazv1pr4"]:after { content: "Feral Goats on Slievecarran"; } [data-slide-url="1kv0c7bmb7tf9i671nq7zlvzvor0nf"]:after { content: "Bouleevin-Sunrise"; } [data-slide-url="9fdxxom6mdst2k89vrmsk0tph2qbgg"]:after { content: "Doonties-Gateway-Dingle-Peninsula.jpg"; } Result

    To find data-slide-url, you can open lightbox > right click anywhere on the page > Inspect
    It will show a box on right or under screen > You can search data-slide-url
    it will show all

     
  22. tuanphan's post in Exclude universal line padding code for 1 specific block was marked as the answer   
    To achieve Page Content Only, Exclude Footer, use this CSS code
    /* Apply padding to all Line blocks */ #page article .sqs-block-horizontalrule { padding-top: 10px !important; padding-bottom: 10px !important; }  
  23. tuanphan's post in How can I use code to change the Summary Block type styles? was marked as the answer   
    You can use this to Website > Website Tools > Custom CSS
    /* Summary title */ a.summary-title-link { font-size: 38px !important; }  
  24. tuanphan's post in Preserving A Two Column Desktop Layout on Mobile was marked as the answer   
    Use this new code for Rodeo page
    @media screen and (max-width:767px) { div#page-65d295500d3ab3468b02453f>.row:nth-child(n+2) { column-count: 2; column-gap: 0px; } }  
  25. tuanphan's post in CSS issues since moving to 7.1 was marked as the answer   
    Use this code to bottom of Code Injection > Footer
    <script> $(document).ready(function(){ $("article section:first-child").append('<div id="brush"></div>'); }); </script>
×
×
  • 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.