-
Posts
63,866 -
Joined
-
Last visited
-
Days Won
511
Community Answers
-
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>
-
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; } }
-
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; }
-
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>
-
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; } }
-
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>
-
tuanphan's post in Hide/Mask Anchor Link URL in Address Bar was marked as the answer
I think this is not possible
-
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>
-
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
-
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; }
-
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>
-
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; }
-
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; }
-
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
-
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>
-
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);} }
-
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
-
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; } }
-
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; }
-
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?
-
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
-
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; }
-
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; }
-
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; } }
-
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>