Jump to content

AlexSan

Member
 View Profile  See their activity

  • Posts

    48

  • Joined

  • Last visited

 Content Type 

Everything posted by AlexSan

  1. AlexSan
    @Huib, Your footer may be a bit big: Seems like you figured it out, though!
  2. AlexSan
    @maya_m, Hmm that's weird. They shouldn't be visible until you hover. Could try adding !important to opacity? .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:not(.positioned) { position: relative !important; transform: unset !important; } .summary-content { text-align: center; color: white !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0 !important; transition: all 0.2s; } .summary-thumbnail-outer-container:hover + .summary-content{ opacity: 1 !important; transition: all 0.2s; } Let's see if that works.
  3. AlexSan
    @maya_m, Did you want the titles to appear on the image, or appear beneath them on hover? If it's on the image, use the following code: .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:not(.positioned) { position: relative !important; transform: unset !important; } .summary-content { text-align: center; color: white !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0; transition: all 0.2s; } .summary-thumbnail-outer-container:hover + .summary-content{ opacity: 1; transition: all 0.2s; } If you want it to fade in on hover underneath the image: .summary-content { opacity: 0; transition: all 0.2s; } .summary-thumbnail-outer-container:hover + .summary-content { opacity: 1; transition: all 0.2s; } Let me know if the fade in on hover works as expected!
  4. AlexSan
    @mark.bate, Give this css a try: .header .header-announcement-bar-wrapper { padding-top: 0 !important; }
  5. AlexSan
    @maya_m, I see. The site is private again, but I can take a look tomorrow morning and update the css. In the meantime, give this a try: .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:not(.positioned) { position: relative !important; transform: unset !important; } .summary-title { text-align: center; color: white !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0; } .sqs-block-summary-v2:hover .summary-title:after { opacity: 1; transition: all 0.1s; }
  6. AlexSan
    @maya_m, Think your original code may need some tweaking as well. Text isn't fading in when you hover, and there's some repeated css. Here is the code for the summary carousel, let me know if the following works: .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:not(.positioned) { position: relative !important; transform: unset !important; } .summary-title { text-align: center; color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0; } .sqs-block-summary-v2:hover .summary-title { opacity: 1; transition: all 0.1s; } I haven't included the blurry/darken effect. Should move the text to the center of the image and show it on hover.
  7. AlexSan
    @kaydotjpg, The code you're using is working as intended. However, I get what you're trying to do. The way people use to do it (setting scroll bar to overlay) is deprecated, and no longer works. It's a little more complicated to do now. I would suggest using simplebar, however, this doesn't work on <body>, only on <div>. Take a look at this example: jsfiddle Could also take a look at OverlayScrollbars. Not familiar with this one.
  8. AlexSan
    It'd be the same/similar code you have for the blog items, but the class names would be different. You can use developer tools (CTLR + SHIFT + C) or right click and inspect element to figure out what that should be. If you're not familiar with code, it may be difficult to tell what class to use. Let me know if you need help!
  9. AlexSan
    @VIDDIY, I don't believe you are allowed to insert code into the checkout at all for security reasons. If the check out needs the black and red logo, I would make it the main theme logo and then use code on the pages that need the white and red logo.
  10. AlexSan
    @charlineca, I believe the right solution would be to not use a grid. I don't think this is something that can be fixed with css.
  11. AlexSan
    @Thurmod, Gonna give my two cents: I'd like to see a lil more spacing on the navigation links, they feel a little cluttered, but got use to it pretty quick. Carousel looks good! I think the "View Portfolio" Button may be better placed somewhere on the Carousel. Most common is centered, but could look good elsewhere! The currently booking section text color doesn't contrast enough with the grey background it's on in my opinion. Rest of the pages look good! I think it's very black and white, which isn't inherently a bad thing, but I think some color would be good, specially for photography. Think this might inspire you: https://www.petermckinnon.com/ I'm sure you've heard of him.
  12. AlexSan
    Did you make them with custom code/css? Can you share a link to your site?
  13. AlexSan
    @Conor03, Sounds like you're looking for snap scrolling on mobile? Something like this: https://bodacious.be/#what_we_do If so, this forum post may be helpful: Snap Scroll CSS on Index Page Hope that helps!
  14. AlexSan
    Hello ! @charlineca I see what you mean. There could be a variety of reasons for this. The image dimensions could be too small, and the grid box could be too big (either in height or width), so it is stretching the image and giving it that blurry look. Squarespace recommends the width of your images to be between 1500 and 2500 pixels. Also make sure you're processing your images from hi res to web quality correctly.
  15. AlexSan
    @jeanneemariee, the code is incorrect! That's my bad. I do recommend going with the JavaScript solution, as then you're able to style the <span> to be positioned to the right of your menu, as well as changing the font and font size, closer to the way you had it in your original design. I'd be happy to help with that aswell. For your current css, the issue is that each <a> is not together (like i thought), they are each in different divs. Try this: .header-menu-nav-item:nth-child(1) .header-menu-nav-item-content:after { content: ".......... 01"; } .header-menu-nav-item:nth-child(2) .header-menu-nav-item-content:after { content: ".......... 02"; } .header-menu-nav-item:nth-child(3) .header-menu-nav-item-content:after { content: ".......... 03"; } .header-menu-nav-item:nth-child(4) .header-menu-nav-item-content:after { content: ".......... 04"; } If you want to try adding !important, it'd be like this: .header-menu-nav-item:nth-child(4) .header-menu-nav-item-content:after { content: ".......... 04" !important; }
  16. AlexSan
    There is a way to do this. In a media query so that it only happens on mobile, you could edit the content of the <a> tag. Something like this: .header-menu-nav-item a:after { content: ".....1"; } However, this would append the 1 to every a tag in the nav menu. To give each their respective number, you could use nth-child selector, which would look like this: .header-menu-nav-item a:after { content: "....."; } .header-menu-nav-item a:nth-child(1):after { content: ".....1"; } .header-menu-nav-item a:nth-child(2):after { content: ".....2"; } /* Add more rules for additional elements if needed */ This works, but you're hard coding the css of each individual link. If you were to add more, you'd have to also add more css. Therefore, a cleaner solution would be to use JavaScript, like so: <script> document.addEventListener('DOMContentLoaded', function () { // Check if the viewport width is below 768 pixels, set to whenever the hamburger menu appears if (window.innerWidth < 768) { var aNav = document.querySelectorAll('.header-menu-nav-item a'); aNav.forEach(function (element, index) { // Create a new span element var span = document.createElement('span'); // Set the content of the span element span.textContent = '.....' + (index + 1); // Insert the span element after the anchor element element.insertAdjacentElement('afterend', span); }); } }); <script> The script first checks the viewport width, and then grabs the <a> navigation items. For each item, it will add a <span> element after the <a> element. We're also able to style the <span> element if you'd like. This could possibly be even easier if SquareSpace allows jQuery, but loading up a whole library just for this may not be the best decision. Took you through my thought process there hahah but hope that helps!
  17. AlexSan
    @saubuchon24, don't have permission to access your site.
  18. AlexSan
    @LeauxFi, chances are, squarespace had an update and they changed stuff that messed up your existing code. Could be changing class names, ids, etc.
  19. AlexSan
    Hello @Imager, try this: .product-price { display: none; } The product will still have the associated price, it just won't be visible.
  20. AlexSan
    @XTC, Just to speed up the process between Tuanphan and yourself, include a link to your page.
  21. AlexSan
    @Kayma, Hmm, I'm not sure I completely understand what you're trying to do, but I give this code a try and let me know if that's it: .Index-page-content { padding: 88px 88px !important; }
  22. AlexSan
    @Kieron1102, So the top of the header, that is padding in the content wrapper, try adding this: .products.collection-content-wrapper { padding-top: 2vw; } For the bottom of the header, try editing .nested-category-title to the following: .nested-category-title { font-size: 35px !important; padding-bottom: 2vw; } You can play around with the actual values.
  23. AlexSan
    @Kieron1102, Right now, it looks like this is what it is set to. It is in a media query: @media screen and (min-width: 768px), screen and (max-width: calc(1716.2px)) and (orientation: landscape) h2 { font-size: calc((var(--heading-2-size-value) - 1) * 1.2vw + 1rem); } Did you want it to be bigger or smaller? It may be a smart idea to keep the media query to keep the site responsive. However, if you want to edit the font-size yourself, you could try this: .nested-category-title { font-size: 24px !important; } However, I suggest doing something like this, if you want it smaller: @media screen and (min-width: 768px), screen and (max-width: calc(1716.2px)) and (orientation: landscape) h2 { font-size: calc((var(--heading-3-size-value) - 1) * 1.2vw + 1rem) !important; } I am just using the size value of heading 3, which is smaller than heading 2. Or if you want it bigger: @media screen and (min-width: 768px), screen and (max-width: calc(1716.2px)) and (orientation: landscape) h2 { font-size: calc((var(--heading-1-size-value) - 1) * 1.2vw + 1rem) !important; } I am using the size value of heading 1, which is bigger than heading 2.
  24. AlexSan
    I'm unable to see the site, @Chungheykan.
  25. AlexSan
    @momo2000, Not sure if you ever got this fixed, but would this work? <script> document.addEventListener("DOMContentLoaded", function () { // Set default value for the state input based on aria-label var stateInput = document.querySelector('input[aria-label="State"]'); if (stateInput) { stateInput.value = "GA"; } // Set default value for the country select based on aria-label var countrySelect = document.querySelector('select[aria-label="Country"]'); if (countrySelect) { countrySelect.value = "USA"; } }); </script> <style> .field.country { display: none; } </style> @SeptemberDesign, this might not work for you as your site could be set up differently.
×
×
  • 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