Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

tuanphan

Circle Member
  • Posts

    31,488
  • Joined

  • Last visited

  • Days Won

    324

Everything posted by tuanphan

  1. I see you used 2 h3 code. You can remove one @media screen and (max-width: 640px) { h1 { font-size:3rem !important } h2 { font-size: 2.5rem !important } h3 { font-size: 2rem !important } .sqsrte-large { font-size: 1.25rem !important } } and @media (max-width: 640px) { h3 { font-size:8px !important } }
  2. Hi, Can you share link to page where you added gallery?
  3. Add to Design > Custom CSS /* Fix distorted product images */ img.ProductList-image.ProductList-image--primary.loaded { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; }
  4. Hi, Can you share link to page where you added photo? We can check easier
  5. Hi, https://www.flashfest.net/printharvest21/when-its-gone-its-gone It looks like black here? Did you solve or want to remove black color?
  6. Try adding to Design > custom CSS /* Lightbox caption position */ @media screen and (max-width:767px) { div.light-caption { position: absolute !important; bottom: 100px !important; } }
  7. Add to Design > Custom CSS > Then save & reload your site /* Calendar banner on mobile */ @media screen and (max-width:767px) { #hero .wrapper { background-color: #4d94c2; margin-top: 0 !important; } div#hero .page-description { display: block !important; } div#hero { min-height: 350px; } }
  8. Hi, The image shows here. Did you filx problem? Can you share a fix?
  9. Try adding to Design > Custom CSS .header-title-logo img { max-height: 200px; } .header-title-nav-wrapper { align-items: flex-start; }
  10. Add to Design > Custom CSS /* Make dropdown folder to transparent */ span.Header-nav-folder { background-color: transparent !important; }
  11. It looks like you removed instagram icon. Do you still need help on this?
  12. Hi, Apply it for page content links or header navigation links?
  13. With Personal Plan, You can add a Code Block at bottom of page >> Paste the code.
  14. Edit above code to this /* Site wide Image Cards*/ body:not(#collection-5a39480f4192023c7edb6666):not(#collection-5a70b6b28165f5a8201192d5) .design-layout-card { .image-title * { font-size: 28px !important; font-weight: 500 !important; } .image-subtitle * { font-size: 18px !important; } figcaption.image-card-wrapper { align-items: flex-start !important; } .image-card.sqs-dynamic-text-container { padding-top: 0px !important; } }
  15. You mean add banner image + search? How about change logo to black? Add this CSS /* Change logo color on blog individual posts */ body.collection-type-blog.view-item { img.Header-branding-logo { filter: invert(1); -webkit-fiter: invert(1); } img.Mobile-bar-branding-logo { filter: invert(1); -webkit-filter: invert(1); }}
  16. You mean Make 2 buttons + text side by side on mobile?
  17. Add this to Code Injection > Footer <!-- Change Category to Dropdown on Mobile - by @tuanphan --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { if(window.innerWidth <= 575 && $('.nested-category-children li a').length > 0) { let open = false $('<div id="t-category" name="t-category"><div id="t-control">Category <span id="t-down"></span><span id="t-up"></span></div><div id="t-menu"></div></div>').insertBefore('.nested-category-tree-wrapper'); $('.nested-category-children li a').each(function(id, e) { const href = $(e).attr('href'); const text = $(e).html(); $('#t-menu').append('<a class="t-item" href="'+href+'">'+text+'</a>') }) $('#t-control').click(function() { if (!open) { $('#t-menu').css('display', 'block') $('#t-down').css('display', 'none') $('#t-up').css('display', 'unset') open = true } else { $('#t-menu').css('display', 'none') $('#t-down').css('display', 'unset') $('#t-up').css('display', 'none') open=false } }) } }) </script> <style> #t-category { display: none; } @media only screen and (max-width: 575px) { .nested-category-children { display: none !important; } #t-menu { position: absolute; top: 35px; z-index: 1; background: white; display: none; right: 0; text-align: right; } #t-category { position: relative; display: inline-block; float: right; top: 5px; right: 0; } .nested-category-title { display: inline-block !important; } #t-control { font-family: baskerville-display-pt; font-weight: 700; font-style: normal; letter-spacing: 0em; text-transform: none; z-index: 12; font-size: 20px; position: absolute; top: 0; right: 0; padding-right: 20px; } .t-item { display: block; padding-left: 15px; } #t-down { margin-left: 10px; position: absolute; top: 15px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid; right: 0; } #t-up { margin-left: 10px; position: absolute; bottom: 12px; right:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid; display: none; } } </style>
  18. Add to Design > Custom CSS /* Change logo on services page */ body#collection-60f8600ef406692e8c57e335 { .header-title-logo img { visibility: hidden; } .header-title-logo a { background-image: url(https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg); background-position: center center; }}
  19. Use new code /* Image blocks hover effect */ body#collection-6105ed9ad33ada673d341a5b { figure { position: relative; } figcaption.image-caption-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9999; padding: 0; width: 100%; text-align: center; opacity: 0; transition: all 0.3s; color: white; } .sqs-block-image-link:after { position: absolute; content: ""; background-color: rgba(0,0,0,0.5); display: block; top: 0; left: 0; width: 100%; height: 100%; transition: all 0.3s; opacity: 0; } .image-block>div:hover .sqs-block-image-link:after, .image-block>div:hover figcaption.image-caption-wrapper { opacity: 1; } figcaption.image-caption-wrapper * { font-size: 20px !important; text-transform: uppercase; } }
×
×
  • Create New...