-
Posts
63,425 -
Joined
-
Last visited
-
Days Won
508
Community Answers
-
tuanphan's post in Image appear on hover and follow cursor was marked as the answer
I wrote a guide here
-
tuanphan's post in Header CSS is preventing mobile menu from opening on Android was marked as the answer
You can consider exclude code on mobile only by changing the code to this
@media screen and (min-width:992px) { header#header { margin: 1vw; background: inherit!important; background-color: rgba(255, 255, 255, .3)!important; backdrop-filter: blur(8px)!important; border-radius: 45px } } I also change header to header#header, because "header" appear on both Site Header and Summary Block Header
-
tuanphan's post in Is it possible to have your main site navigation on a cover page? was marked as the answer
Add this code to Advanced tab
<li class="new-nav1"><a href="/projects">Projects</a></li> <li class="new-nav2"><a href="/about">Information</a></li> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('.new-nav1, .new-nav2').appendTo('ul'); }) </script> <style> li.new-nav2 a, li.new-nav1 a { color: #2d2d2d !important; } </style>
-
tuanphan's post in Styling of Page Description in Chinese gets messed up on mobile was marked as the answer
You can use this code to Website > Website Tools > Custom CSS to fix problem
@media screen and (max-width:767px) { .page-description p { white-space: initial !important; word-wrap: break-word; } }
-
tuanphan's post in Rogue thumbnail image showing before a video plays was marked as the answer
#1. Try this to Website > Website Tools > Custom CSS
div#block-yui_3_17_2_1_1710318531479_89426 .plyr__poster { background-image: none !important; } #2. I think we can use Code Block to add video. If you provide video file, I will try something
-
tuanphan's post in The font in Safari some thiner than chrome some bolder than chrome was marked as the answer
You can also duplicate the site, remove important info, then share duplicated site url, we can check problem easier
-
tuanphan's post in adding a drop shadow to blog grid images was marked as the answer
You can use this code to Website > Website Tools > Custom CSS
section.blog-image-wrapper { box-shadow: 3px 4px 5px black; }
-
tuanphan's post in Help customizing Product Variant BUtton was marked as the answer
Use this new code
<style> label.sqs-button-element--secondary { background: white!important; /* change the button background color */ border: 1px solid black!important; /* change the button border */ border-radius:0!important;/* change the button shape */ font-size: .5rem!important;/* change the button font size */ text-transform: uppercase;/* change the button character style */ color: black!important; } label.sqs-button-element--secondary:hover { background:gray!important; /* change the button background color */ color: white!important; /* change the font color */ } input[type="radio"]:checked+label { background: gray!important;/* change the button background color */ color: #fff !important;/* change the button font color */ border: 1px solid white!important; /* change the button border */ /* change the button shape */ } </style>
-
tuanphan's post in Header elements only showing on homepage - present but invisible on all other pages was marked as the answer
Use this code for mobile
div.header-menu .preFade { opacity: 1 !important; }
-
tuanphan's post in Mobile Nav Menu Custom Font Issue was marked as the answer
Remove this ID from your code
-
tuanphan's post in Adjust the position of the site header layout using CSS code. was marked as the answer
You can use this code to Website > Website Tools > Custom CSS
@media screen and (min-width:992px) { .header-nav { position: absolute; right: 0; text-align: right; } .header-actions.header-actions--right { position: absolute; left: 0; justify-content: flex-start !important; } header#header a.icon { margin-left: 0px !important; margin-right: 2.5vw !important; } }
-
tuanphan's post in Mobile burger navigation - Too much white space was marked as the answer
You can use this CSS code under
.header-menu-nav-folder-content { display: block !important; flex: unset !important; }
-
tuanphan's post in Product navigation arrows not accessible - add white background behind arrows was marked as the answer
Use this new CSS code
/* Product arrows background */ button.product-item-gallery-carousel-control { background-color: white !important; justify-content: center !important; } .ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control.ProductItem-gallery-next:after { margin-left: 0 !important; } .ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control.ProductItem-gallery-prev:after { margin-right: 0 !important; }
-
tuanphan's post in Unable to change site background in Styles was marked as the answer
Use this code to Website > Website Tools > Custom CSS
body { background-color: #1d1d1d; }
-
tuanphan's post in Change the header style for ONE PAGE ONLY! was marked as the answer
Use this code to Website > Website Tools > Custom CSS
body#collection-65ea33355bf9ff79a2f703bd header#header { display: none !important; }
-
tuanphan's post in Adding text to mobile header was marked as the answer
Use this new code
div.header-display-mobile .header-title:after { content: "South Mountain Advanced \A Therapies Consultants, LLC"; display: block; font-family:cormorant infant; font-size: 11px; white-space:pre; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
-
tuanphan's post in Change Banner Slideshow Arrows Using Custom PNG Arrows was marked as the answer
With Banner Slideshow, use this CSS code (Website > Website Tools > Custom CSS) to change custom arrows
button[class*="arrow-button"] svg { display: none !important; } [class*="arrow-icon-background"] { background-size: contain; background-repeat:no-repeat; background-position: center center; background-color: transparent !important; } button[class*="arrow-button--left"] [class*="arrow-icon-background"] { background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1773097810_Group12@2x.png.fd2d6dc749f79343ae687e29649cea4f.png); } button[class*="arrow-button--right"] [class*="arrow-icon-background"] { background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1753379866_Group13@2x.png.54c2b0e59adbe1a1f31f46b8b628398d.png); }
-
tuanphan's post in Testimonial Section Title is Tiny on Mobile. CSS solution to increase size? was marked as the answer
You can use this CSS code
@media screen and (max-width:767px) { body.homepage div.list-section-title * { font-size: 30px !important; } }
-
tuanphan's post in Create hold and drag scroll on summary blocks was marked as the answer
I used List Section Carousel, so you will have drag scroll feature
Then use List Sync plugin (referral link), to pull Blog Posts to List Section (similar Summary Block)
-
tuanphan's post in Social link icons drop lower than vertical center in the header if their size is decreased. was marked as the answer
You can use this to Website > Website Tools > Custom CSS to move icons up a bit
div.header-actions-action.header-actions-action--social { position: relative; top: -3px; }
-
tuanphan's post in custum styling categories shop/blog was marked as the answer
To make it center, use this CSS code
ul.nested-category-children { justify-content: center !important; }
-
tuanphan's post in Adjust padding between shop title and breadcrumbs on product page was marked as the answer
You can use this code to Website > Website Tools > Custom CSS
ul.nested-category-children { padding-top: 0px !important; padding-bottom: 0px !important; }
-
tuanphan's post in How do I change the font size used in the caption of image blocks? was marked as the answer
You can access Site Styles > Disable Ajax Loading
-
tuanphan's post in Adding related products in the store was marked as the answer
Try this code to Website > Website Tools > Custom CSS
div.sqs-add-to-cart-button:hover, div.sqs-add-to-cart-button:before { border-radius: 50% !important; }
-
tuanphan's post in Overlay thumb title, but underneath the project image as a hover action. was marked as the answer
Use this new code
/* Test something */ .hide-thumbnail-titles #projectThumbs .project .project-title { display: block !important; position: static !important; transform: unset !important; color: #000 !important; font-size: 20px !important; opacity: 1 !important; top: unset !important; bottom: unset !important; margin-top: 5px; } .thumbnail-layout-autocolumns #projectThumbs .project .project-image .content-fill, .thumbnail-layout-autocolumns #projectThumbs .project .project-image .intrinsic { overflow: visible !important; } a.project { overflow: visible !important; }