tuanphan
-
Posts
64,655 -
Joined
-
Last visited
-
Days Won
516
Community Answers
-
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; }
-
tuanphan's post in Have only the header image without page padding/ image fullscreen was marked as the answer
You can use this code to Website > Website Tools > Custom CSS
div#block-5d2c25ad6f83cd7e6881 { width: 100vw; left: 50%; transform: translateX(-50%); padding: 0px !important; } body { overflow-x: hidden; }
-
tuanphan's post in Instagram carousel & Product display was marked as the answer
First, with title size, you can edit it here
Next, with space between items, use this CSS code
div.ProductItem-details-excerpt br { display: none; } .ProductItem-product-price, .ProductItem-product-price div { margin-bottom: 0px !important; } div.ProductItem-details-excerpt p { margin-top: 0px !important; } h1.ProductItem-details-title { margin-bottom: 0px !important; } .ProductItem-details-excerpt { margin-bottom: 0px !important; } div.variant-select-wrapper, .product-quantity-input input { padding-top: 10px !important; padding-bottom: 10px !important; }
-
tuanphan's post in Custom CSS Font For Next Blog In Sequence was marked as the answer
Use this CSS code
section#itemPagination * { font-family: 'InterVariable' !important; }
-
tuanphan's post in Buttons - font color when hovering was marked as the answer
Your site is expired, you can access this link to extend it, then we can check problem easier
-
tuanphan's post in drop down nav changes background color was marked as the answer
Use this CSS code to remove black
header#header { background-color: transparent !important; }
-
tuanphan's post in Video size on mobile devices was marked as the answer
Use this code to Code Block
<style> /* Video size on mobile */ @media screen and (max-width:767px) { .native-video-player.video-player { padding-top: 120% !important; } } </style>
-
tuanphan's post in Add text shadow to Page Title & Page Description text on banner image? was marked as the answer
You can use this CSS code to Website > Website Tools > Custom CSS
h1.page-title, .page-desc p { text-shadow: 3px 3px 5px blue; }
-
tuanphan's post in How do I adjust spacing on mobile? Looks good on desktop, but horribly large empty space on mobile was marked as the answer
You try using Classic Editor Section for green section
-
tuanphan's post in Changing the Promotional Pop-Up Header Font to Custom Font was marked as the answer
You can use this CSS code
h1#sqs-slash-page-header { font-family: 'Hackney-Vector' !important; }
-
tuanphan's post in Changing the colour of a Single Portfolio's Title and Summary Block Question was marked as the answer
You can use this code to Website > Website Tools > Custom CSS
h3.portfolio-title { color: #FF590C !important; }
-
tuanphan's post in Move certain links in header to other side was marked as the answer
You can use this code to Website > Website Tools > Custom CSS
.header-nav-item.header-nav-item--collection:first-child { position: absolute; right: 100px; z-index: 9999; }
-
tuanphan's post in Video Library Template Plugin was marked as the answer
With some plugins, you can add via Markdown Block
-
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>
