tuanphan
-
Posts
65,544 -
Joined
-
Last visited
-
Days Won
521
Community Answers
-
tuanphan's post in Custom CSS for Lock Screen was marked as the answer
Add this code to Home > Settings > Advanced > Code Injection > Lock Page
<style> input::placeholder { color: yellow !important; } </style>
-
tuanphan's post in Add space to vertically stacked content on mobile was marked as the answer
Add to Home > Design > Custom CSS
@media screen and (max-width:640px) { div#page-5deeba7799d5d037ef46f2d4>.row:nth-child(2) .span-4:nth-child(2) { margin-top: 30px; margin-bottom: 30px; } }
-
tuanphan's post in Portfolio Hover Image Opacity was marked as the answer
Add to Home > Design > Custom CSS
.portfolio-hover-bg-overlay { background: transparent !important; }
-
tuanphan's post in Remove logo on mobile homepage was marked as the answer
Add to Home > Design > Custom CSS
@media screen and (max-width:767px) { .homepage .header-title-logo img { display: none; } }
-
tuanphan's post in Carousel Gallery is appearing off center was marked as the answer
Add to Home > Design > Custom CSS
div#block-yui_3_17_2_1_1594008945407_17850 .sqs-gallery .sqs-wrapper { left: 0 !important; width: 100% !important; text-align: center; display: flex; justify-content: center; }
-
tuanphan's post in Move slideshow gallery meta caption below image was marked as the answer
Add to Home > Design > custom CSS
@media screen and (max-width:767px) { .sqs-gallery-block-slideshow .meta { display: block !important; } }
-
tuanphan's post in How to center Logo and navigation menu on Flatiron template? was marked as the answer
Add to Home > Design > Custom CSS
@media screen and (min-width:641px) { header#topBar { display: flex; justify-content: center; flex-direction: column; text-align: center; } .siteTitle { float: none !important; width: 100% !important; max-width: 100% !important; text-align: center !important; padding-bottom: 0 !important; padding-top: 5px !important; } ul#nav { max-width: 100% !important; width: 100%; padding-top: 0 !important; padding-bottom: 0 !important; } section#container { margin-top: 150px !important; } }
-
tuanphan's post in How can I hide an entire section from mobile and tablet view? was marked as the answer
/* this code for tablet - mobile */ @media screen and (max-width:991px) { [data-section-id="5ef4c07482b8e941cd5ebc10"] { display: none; } }
-
tuanphan's post in Remove hamburger menu from desktop - Adirondack was marked as the answer
Add to Home > design > Custom CSS
@media screen and (min-width:641px) { a#desktopMenu { visibility: hidden !important; } }
-
tuanphan's post in Aligning form fields and check boxes side-by-side was marked as the answer
Add to Home > Design > Custom CSS
@media screen and (min-width:768px) { div#block-yui_3_17_2_1_1590817488800_15909 .checkbox .option { float: left !important; width: 30% !important; } }
-
tuanphan's post in Make a Web Element appear on mobile view only was marked as the answer
@media screen and (max-width:767px) { [data-section-id="abcxyztuan"] { display: none; } } Find ID with this tool https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
-
tuanphan's post in Remove Footer from One Page was marked as the answer
Add to Page Settings > Advanced > header
<style> footer#footer-sections { display: none; } header#header { display: none; } </style>
-
tuanphan's post in Change Color of each Navigation link on Hover and when active was marked as the answer
Repeat, replace page url for other links
/* about hover */ .header-nav-item a[href="/about"]:hover { color: red !important; } /* about active */ .header-nav-item--active [href="/about"] { color: red !important; }
-
tuanphan's post in Change background image size on mobile was marked as the answer
Add to Home > design > Custom CSS
@media screen and (max-width:767px) { .homepage section:first-child { height: 30vh !important; min-height: unset !important; } }
-
tuanphan's post in Style 7.1 Gallery Captions was marked as the answer
if the font exist, this code should work
p.gallery-caption-content { font-family: LTC-Bodoni-175 !important; }
-
tuanphan's post in Left Align Text in Image Block Card was marked as the answer
Add to Home >D esign > Custom CSS
.collection-type-page .design-layout-card * { text-align: left; }
-
tuanphan's post in .sqs-announcement-bar-text, can't increase my announcement bar's font size on mobile was marked as the answer
@media screen and (max-width:640px) { .sqs-announcement-bar-dropzone p { font-size: 8px; } }
-
tuanphan's post in Change Header Color On Scroll was marked as the answer
Each template needs different code. Can you share link to your site?
-
tuanphan's post in Increasing the size of gallery arrows was marked as the answer
Add to Home > Design > Custom CSS
.gallery-fullscreen-slideshow-control-btn-icon svg { width: 20px !important; height: 20px !important; }
-
tuanphan's post in Make Lock Screen Logo Bigger on 7.1 was marked as the answer
<style> .sqs-slice-image img { max-height: 150px !important; } .sqs-slice-body { margin-top: 100px !important; } </style>
-
tuanphan's post in Changing Shopping Cart Page was marked as the answer
.cart-title { visibility: hidden; } .cart-title:before { visibility: visible; content: "Shopping Cart"; color: red; font-size: 50px; font-family: monospace; letter-spacing: 1px; } .cart-item-list-labels span { font-size: 20px !important; color: red; }
-
tuanphan's post in Change Page Banner height in Mobile View - smaller was marked as the answer
Try adding to Home > Design > Custom CSS
@media screen and (max-width:640px) { body#collection-5e8ac321776c472b726bea8f { figure.Intro-image.loaded img { width: 100% !important; left: 0 !important; top: 0 !important; height: auto !important; } section.Intro.Intro--has-image .spacer-block { display: none; } } }
-
tuanphan's post in Hiding a product from the store page, but still accessible via URL was marked as the answer
Add to Home > Design > Custom CSS
.grid-item.tag-hide-product { display: none; }
-
tuanphan's post in Hiding Index Navigation was marked as the answer
Add to Home > Design > Custom CSS
.Index-nav-item[href="#ingredients"] { display: none; } .Index-nav-item[href="#the-founders"] { display: none; } .Index-nav-item[href="#new-page-5"] { display: none; }
-
tuanphan's post in Mobile Stacking Order (7.1) was marked as the answer
Add to Home > design > custom CSS
@media screen and (max-width:640px) { /* 2 */ div#block-yui_3_17_2_1_1578277238401_75781+.row { display: flex; flex-direction: column-reverse; } /* 4 */ div#block-yui_3_17_2_1_1578780160732_20104+.row { display: flex; flex-direction: column-reverse; } }
