Jump to content

MAC1

Member
 View Profile  See their activity

  • Posts

    100

  • Joined

  • Last visited

 Content Type 

Everything posted by MAC1

  1. MAC1
    Hi, I want to make the captions under the gallery items to be a lighter grey color. Tried a few css but this is as far as i got and its not working. /* Change the color of portfolio caption text */ .sqs-block-portfolio .portfolio-text { color: #393939 !important; /* Change this hex code to the color you desire */ } Any ideas how to get this code working? Cheers, Mac web: https://ellipse-teal-dl5w.squarespace.com/design pass: 3
  2. MAC1
    /* Apply padding to all Line blocks */ .sqs-block-horizontalrule { padding-top: 20px !important; /* Adjust as needed */ padding-bottom: 20px !important; /* Adjust as needed */ } I found something that works its ".sqs-block-horizontalrule" targets all lines with proper alignment text top (bottom alignment), line (middle align), bottom text (top align) , the line spacing stays the same with the padding code attached. thanks @Ziggy
  3. MAC1
    Hi, I've been playing around with padding/spacing a line under text. Issue is the line padding changes depending on size of screen. I was wondering if there was some universal css code for the line block so its always has the same padding top and bottom. keeping everything well spaced to the desired design. not sure if something like this would work, just need to target the line block if i knew the right targeting. /* Apply padding to Line blocks */ .sqs-block-line { padding-top: 50px; /* Adjust as needed */ padding-bottom: 50px; /* Adjust as needed */ } web: https://ellipse-teal-dl5w.squarespace.com/design/glitch-mx pass: 2 thanks some extra information just in case below-- full width line padding between text is fine: half width page line padding reduces more on top than bottom reduce more and line goes too close to top title:
  4. MAC1
    ahh thank you again, looks much better :) have a good one cheers
  5. MAC1
    Hi, the default padding on the grid gallery is too much. how can I reduce top/bottom for all gallery: grid simple on the whole website? cheers web: https://ellipse-teal-dl5w.squarespace.com/design/glitch-mx pass: 2 Thanks
  6. MAC1
    Thanks i learnt alot looking at this code also
  7. MAC1
    MAGIC. thank you so much for that. looks perfect!
  8. MAC1
    Everything is fixed thank you for that, except its created one more new issue now with the middle information on pages: information gets cut off now, where it didn't before: the information at certain widths doesn't align with the header/footer. which didn't happen before: sorry for this last part, everything is so close to working though
  9. MAC1
    Yes the header is fixed thankyou i was just making this video as you fixed it. only issue is the porfolio grid now. the header looks great. any idea how to fix the portfolio grid popping out? thanks again for your time
  10. MAC1
    the header and portfolio grid are still not aligning. did you change some css?
  11. MAC1
    thanks appreciate the help, sent a invite
  12. MAC1
    @DPruitt It might have something to do with this code, hope this helps: @media only screen and (min-width: 1656px) { .tweak-portfolio-grid-basic-width-inset .portfolio-grid-basic { padding-left: 0 !important; padding-right: 0 !important; width: 1600px !important; } .header-width-inset .header-inner { width: 1600px !important; } .header .header-announcement-bar-wrapper { padding-left: 0 !important; padding-right: 0 !important; } } this code was to help the gallery block align to the header in inset mode because it looked like this before the code:
  13. MAC1
    Magic. much appreciated thanks again for all your help
  14. MAC1
    No worries thanks for the advice and help
  15. MAC1
    Yup already set to inset in the site header, there lies the issue I'm having I cant work out why it only does inset sometimes. Was hoping there was some code to keep it in check. thanks
  16. MAC1
    Hi, The website is nice and responsive to width scaling except 2 elements, the header and portfolio grid simple. *its a inset layout not full. 1. at full width everything is aligned how it should 2. Start reducing width and the header starts taking off out of the alignment, but footer and body remain perfect 3. start pushing the width even further and the header looks horrible and is flush to each side of the window, but the footer and body look perfect 4. This happens also on the porfolio grid, it goes out of alignment with the header. the footer is perfect always. My question is how can i make the header and portfolio grid behave the same as the footer and stay in the required alignment it starts as full width? web: https://ellipse-teal-dl5w.squarespace.com/ pass: 2 Thanks
  17. MAC1
    Works perfect thank you again @Web_Solutions :)
  18. MAC1
    Hi, web: https://ellipse-teal-dl5w.squarespace.com/ pass: 2 i found this code provided by @tuanphan to achieve a custom color on the underline header menu selection, which works great: Here's the code i'm using: /* Change the underline color of the top menu links */ .header-nav-item a { position: relative; text-decoration: none !important; color: #43c6ff; /* Set the color of the link */ } .header-nav-item a::after { content: ""; position: absolute; left: 0; bottom: -2px; /* Adjust the positioning of the underline */ width: 100%; height: 2px; /* Adjust the height of the underline */ background-color: #43c6ff; /* Set the color of the underline */ visibility: hidden; opacity: 0; transition: opacity 0.4s; } .header-nav-item a:hover::after, .header-nav-item a:focus::after, .header-nav-item--active a::after { visibility: visible; opacity: 1; } /* Optional: Change the underline color when the link is active or focused */ .header-nav-item--active a::after { background-color: #43c6ff; /* Set the color of the underline when the link is active */ } div.header-nav-item a { display: inline-block; } div.header-menu-nav-item a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background-color: #43c6ff; visibility: hidden; opacity: 0; transition: opacity .4s; } div.header-menu-nav-item a:hover::after { visibility: visible; opacity: 1; } .header-menu-nav-item-content { position: relative; display: inline-block; pointer-events: none; } works great for desktop header, but when its mobile this happens: black line is back for current page: blue line only appears on hover over and its too thin and close to the text, unlike on header which is perfect desired outcome for mobile menu: 1. more padding under text like on header 2. black line gone like on header 3. thicker line that is width of text like on header The code i have there is so close but needs adjustments to make the header desktop and header mobile look the same. Cheers
  19. MAC1
    @Ziggy @tuanphan Ah yes you're correct sorry. Thanks for the code. I isolated just that code and it works thanks. ill find that '}' cheers. *Only issue now is the bear image disappears and the button and name needs more vertical padding current look with new code: desired look : Thanks
  20. MAC1
    Hi, not working the css code says "missing opening '{' tried a few variants and couldn't get rid of the error Cheers
  21. MAC1
    solved! 1. Change footer social icons "hover color": //footer social icon hover .sqs-svg-icon--list { a:hover .sqs-use--icon { fill: #43c6ff !important; } } Hope this helps someone: 2. Change header social icons "hover color": Thanks to @Ziggy //social icons hover header .header-actions .icon--fill svg { transition:ease-in-out 300ms; &:hover { color:#43c6ff; } } 3. Change mobile header social icons "hover color" //social icons hover mobile header .header--menu-open .header-menu .icon svg { transition:ease-in-out 300ms; &:hover { color:#43c6ff; } }
  22. MAC1
    I got the mobile header social hover working with this code: //social icons hover mobile header .header--menu-open .header-menu .icon svg { transition:ease-in-out 300ms; &:hover { color:#43c6ff; } } but the footer social icons are more tricky I'm inspecting the elements but can't work it out to target the footer social icons this is how far i got: #footer-sections .sqs-svg-icon--wrapper { transition:ease-in-out 300ms; &:hover { color:#43c6ff; } } what's wrong with the footer code here? Cheers
  23. MAC1
    The user looking at the website is not going to know to reload that though. It looks broken, almost like there is 2 carousels running on top of each other at different speeds, also sometimes the logos will disappear before it reaches the left side. it might be too much to solve with scripting? I think the plugin might be the safest option? do you have a preference? thanks for your time on this
  24. MAC1
    Sorry its not working adding or replacing the code.
  25. MAC1
    Thanks, love the ease in effect also although its not targeting the footer social links or the mobile header social links. is there a code adjustment to target those also?
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources