tuanphan
-
Posts
66,378 -
Joined
-
Last visited
-
Days Won
532
Community Answers
-
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>
-
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; }
