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

Marzon

Member
  • Content Count

    45
  • Joined

  • Last visited

Everything posted by Marzon

  1. To develop my question more. Is there any CSS code that could prevent the <span> text from showing up in the prev/next buttons?
  2. Site URL: https://puma-orb-9lss.squarespace.com/projects/little-peek I have the titles of my projects named like this: Little Peek<span>Vinalhaven, ME</span> to allow a subheading on the Portfolio page. However the previous/next buttons (item-pagination-prev-next) on the project pages are showing the edited text. Is there anyway to fix this so that it only displays the main title?
  3. Site URL: https://puma-orb-9lss.squarespace.com/news Hi, I am using the plugin Lazy Summaries. It has the options to edit the margin (gutter width). But it doesn't let me edit the vertical and horizontal "gutter width" or margin separately. I found the settings in the code. And the gutter is effecting gallery like this. #block-yui_3_17_2_1_1604436917292_4899 .sqs-gallery-design-autogrid-slide { width: 30.897703549060545%; margin-right: 3.653444676409186%; margin-bottom: 3.653444676409186%; } So I added this.. .sqs-gallery-design-autogrid-slide { margin-bottom:
  4. Site URL: https://puma-orb-9lss.squarespace.com/projects/metal-shop I'm looking to vertically center the location and photography sub-titles with the main title. Is this possible? This is the code I have so far. The most difficult part (for me at least) is to also having the photography show up inline on the right. <div style="line-height:40px; float:left"> <h2 style="display:inline; font-weight:bold">Project Title</h2> <h2 style="display:inline">|</h2> <h3 style="display:inline; color:grey">Location, NY</h3> </div> <div sty
  5. I figured it out! My gradient had rgba(250, 0, 0, 0) which was causing problems on Apple devices. After switching it to rgba(0, 0, 0, 0) the problem is no more. Safari issues... https://ambientimpact.com/web/snippets/safari-bug-with-gradients-that-fade-to-transparent
  6. Site URL: https://puma-orb-9lss.squarespace.com/projects There is a strange grey color showing on my portfolio page gradient on mobile browser but not on computer browser. See images below for reference. Any knowledge on what might be causing the problem would be greatly appreciated!
  7. Site URL: https://puma-orb-9lss.squarespace.com/projects I'd like to force the first image (image block) on each of my portfolio pages to be the same size exactly. Is it possible to do this through code? Some example pages: https://puma-orb-9lss.squarespace.com/projects/maysville https://puma-orb-9lss.squarespace.com/projects/metal-shop
  8. Site URL: https://puma-orb-9lss.squarespace.com/projects I'd like to have the portfolio overlay off when my website is viewed on mobile. Or in other words, I want all the text to show and not be hidden on mobile on the portfolio page. I should note that I have custom animations that override the overlay a bit. I added code such as the one below to prevent it on mobile. Maybe irrelevant but adding just in case. @media screen and (max-width:640px) { .portfolio-grid-overlay .grid-item .portfolio-title { transition: none !important } }
  9. It's still very helpful thanks! I'm having fun figuring these things out as well.
  10. @creedon Thank you it works perfect! I'm really curious though how you figured out the first part of the code. .no-touch .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item .portfolio-text I inspect elements with chrome and through trial and error (and looking at other similar examples on forums) figured out the other parts. So I understand those. But the .no-touch and .tweak... I don't think I saw that when I inspected. Maybe I was looking in the wrong place. Anyways, maybe this is too big of a question. You don't have to answer.
  11. Ok, I made it simpler! I am trying to make the text move down after hover at the same speed as the beginning animation. I sped it up (.2s) because when I make it slower (1s) it doesn't show the animation at all. Because the overlay is preventing it 🙄 .portfolio-grid-overlay .grid-item .portfolio-title { transform: translate3d(0, 30px, 0); transition: .2s ease-in-out !important; } .portfolio-grid-overlay .grid-item:hover .portfolio-title { transform: translate3d(0, 0, 0); transition: 1s ease-in-out !important; }
  12. Site URL: https://lavender-reed-n64j.squarespace.com/ Site Password: 2020 EDIT: Please see updated question below! Hello, I made a keyframe animation for my portfolio grid, however I can only get the animation to work on initial hover. The mz-out animation (which is the mz-in animation reversed) is not working. When the mouse leaves the hover the animation should fade back out. I believe the problem is related to the overlay inherent in the template preventing the animation from playing out. Is there a way to fix this? Thanks! .portfolio-grid-overlay .grid-item:
  13. Site URL: https://grasshopper-dodecahedron-a6ch.squarespace.com/ Hi, Is it possible to use CSS for the setting; Design>Spacing>Site Margin I'd like to enter a Site margin that is beyond the limit. Password: 2020 Thanks
  14. I got it! .header-title-logo a:hover img { visibility: hidden; } .header-title-logo a:hover { background-image: url('https://static1.squarespace.com/static/5f7cd49fb45e5409f742bf77/t/5f80cea6ff1ed526c3a58c85/1602277031045/Thin%2BAM%2BLogoRED.png'); background-size: contain; } So add this to Design > Custom CSS But, you'll need to replace the link. Make another logo with the color you want Design > Custom CSS scroll to bottom and find Manage Custom Files Upload your colored logo Delete the link in the code that I put (and not the apost
  15. a#site-title:hover { color: red; } Add this to Design > Custom CSS You can replace "red" with "rgb(153,153,153)" for more specific colors.
  16. Site URL: https://lavender-reed-n64j.squarespace.com/ Hi, In Squarespace settings there is an option in Design>Spacing to change Site Margin. How may I override this setting in code? I am looking to make the margins on the left and right larger (20vw?), while keeping the top and bottom small (like 3vw). Right now I did this: #page { margin-left: 200px; margin-right: 200px } But when I zoom out in browser (to test on bigger screens) the margins change size with my code. Without code, the margins stay consistent. I want to keep the consistent behavior, just in
  17. This is great thanks! However it only works with (h3). Just curious as to why I can't change it to h2 for example. Trying to understand the code too hah.
  18. Site URL: https://puma-orb-9lss.squarespace.com/projects Is it possible to have a sub-headings on the portfolio page? I searched all over the forum but I couldn't find anything on it. Except for this one.
  19. Site URL: https://puma-orb-9lss.squarespace.com/projects .white .portfolio-grid-overlay:hover .portfolio-title { animation: fadeIn 1s ease !important; } @keyframes fadeIn { 0% { opacity: 0; -webkit-transform: translate3d(0,30px,0); -moz-transform: translate3d(0,30px,0); -ms-transform: translate3d(0,30px,0); -o-transform: translate3d(0,30px,0); transform: translate3d(0,30px,0); } 25% { opacity: 0; -webkit-transform: translate3d(0,30px,0); -moz-transform: translate3d(0,30px,0); -ms-transform: translate3d(0,30px,0); -o-transform: translate3
  20. I'll provide links below <h2 style=" display: inline; font-weight: bold; "> Little Peek </h2> <h2 style=" display: inline; "> | </h2> <h2 style=" display: inline; font-size: 17px; line-height: 31px; vertical-align: bottom; color: grey; ">Washington DC </h2> Here was my solution. I also did a version with the paragraph style but the code block to the right was not lining up?? The weirdest part was that it does line up in th
  21. Thanks for looking into this creedon. I also found an article that was explaining aligning different size fonts next to each other, and yes, I'm realizing it's complicated. This is the article I found, I'll check out yours too. https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align I'm not sure this is a proper solution, but I solved it by adjusting line-height for the grey word. I'll check out your code and see if it helps, thanks! See my code: <h2 style=" display: inline; font-weight: bold; "> Little Peek </h2&
×
×
  • Create New...