seapixelcreative Posted July 2 Share Posted July 2 I am hoping to get some code to customise "related-item-link-text" which is appearing very large and with no padding at the moment. I am unable to share the direct link as it's in a members area. I am hoping someone can provide me with some basic code to reduce the font size and having some padding at top please. Link to comment
Lesum Posted July 2 Share Posted July 2 @seapixelcreative Hi! Can you share your site URL for context? If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
seapixelcreative Posted July 2 Author Share Posted July 2 it is in a secure/members area... can you see the screen grab? Link to comment
seapixelcreative Posted July 2 Author Share Posted July 2 The styling appears like this within the member/secure area where I am selling online classes/digital products. When I refer to the 'You may also like' suggestions in the shop with physical products the styling is much better. See here >> https://www.gmontgomerie.com/shop/p/limited-edition-print-summer-lovin-jmhrh Link to comment
Lesum Posted July 2 Share Posted July 2 @seapixelcreative It won't be possible to write the exact code to modify the related item link text without seeing the site in a browser. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
seapixelcreative Posted July 2 Author Share Posted July 2 Is there any way I can share this if it is within the Paywall? Link to comment
Lesum Posted July 2 Share Posted July 2 If you can create a duplicate of the online classes/digital products and make it accessible outside for a few minutes while sharing the link with me, I can write the code. I can't think of any other way. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
seapixelcreative Posted July 2 Author Share Posted July 2 My coding knowledge is limited, but I got this from inspecting the section, does this help? <a class="related-item-link-text" href="/escape-to-the-ocean-the-wave/v/09-gradation-of-sky-colour-applying-to-canvas-mixing-glow-colour"> 09. Sky Gradation of colour. Applying to canvas. Mixing glow colour </a> Link to comment
Lesum Posted July 2 Share Posted July 2 Sure. Let me write the code using "related-item-link-text". I'll share the solution shortly. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Lesum Posted July 2 Share Posted July 2 @seapixelcreative Try adding this code in Website > Pages > Website Tools > Custom CSS .related-item-link-text { font-family: var(~'--product-grid-text-below-title-font-font-family') !important; font-style: var(~'--product-grid-text-below-title-font-font-style') !important; font-weight: var(~'--product-grid-text-below-title-font-font-weight') !important; line-height: var(~'--product-grid-text-below-title-font-line-height') !important; letter-spacing: var(~'--product-grid-text-below-title-font-letter-spacing') !important; text-transform: var(~'--product-grid-text-below-title-font-text-transform') !important; color: var(~'--tweak-product-grid-text-below-list-title-color') !important; } @media screen and (min-width: 768px), screen and (max-width: calc(1984.28px)) and (orientation: landscape) { .related-item-link-text { font-size: calc(~'(var(--product-grid-text-below-title-font-font-size-value) - 1) * 1.2vw + 1rem') !important; } } @media screen and (max-width: 767px) and (orientation: portrait) { .related-item-link-text { font-size: calc(~'(var(--product-grid-text-below-title-font-font-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem)') !important; } } Let me know how it goes. If the classname is correct, it should appear the same as the 'You may also like' suggestions in the shop with physical products styling. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment