Jump to content

SaranyaDesigns

Circle Member
 View Profile  See their activity

  • Posts

    149

  • Joined

  • Last visited

  • Days Won

    1

 Content Type 

Everything posted by SaranyaDesigns

  1. SaranyaDesigns
    @MunichMarketers so if you put both versions on the page, I would suggest just using "display: none;" in combo with a media query to specify which one you want to hide for desktop/mobile. so if I'm understanding your goal correctly, this should work? Start by removing your above CSS first, then replace with this: @media (min-width:800px) { #yui_3_17_2_1_1699461730249_70 { display: none; } } @media (max-width:799px) { #yui_3_17_2_1_1699461730249_85 { display: none; } }
  2. SaranyaDesigns
    @mportch this should target exactly that SEND button so you can customize the font size and padding to be whatever you like: #yui_3_17_2_1_1699461553367_203 { font-size: 16px; padding: 10px 25px; } Play around with those numbers until you find the size/shape you need!
  3. SaranyaDesigns
    @HeidiK hmmmm when I test in both chrome and firefox, I'm having the same issue, just on the homepage in mobile. Inspecting the element, I can see that on all other pages, when the burger icon is clicked, there are classes being added and removed to the element that is changing the behavior. This is usually handled by javascript. It's unlikely your CSS is interfering. I don't see any obvious errors in your javascript either... but something is definitely interfering with the javascript on the homepage only... this is a little out of my area of expertise, but I'd probably start troubleshooting by eliminating any other blocks on the homepage that are using javascript, for example the typing of "I do life coaching, retreats" etc in the top section, and maybe the scrolling text banner above the BOOK FREE DISCOVER CALL section and see if removing those activates the burger again? Something in their code might be interfering?
  4. SaranyaDesigns
    @CorinnaR whoops, my code had a typo, that's probably why... it should be a colon before :first-of-type instead of .first-of-type - sorry! But good detective skills, glad it worked!
  5. SaranyaDesigns
    @collgrimes I think you should include the version I sent that starts with the media query... the negative top margin is messing with the mobile version... so wrap the whole thing in the media query like the above.
  6. SaranyaDesigns
    @collgrimes can you put back in the code I suggested so I can have a look at it in action? Some properties might be being overridden - it was working when I tested in the inspector window. You may need to add in a media query so it doesn't affect the mobile version: @media (min-width:1025px) { .header-display-desktop { flex-wrap: wrap; } .header-title-nav-wrapper { flex-basis: 100%; } .header-burger { flex-basis: 100%; justify-content: flex-end; margin-top: -46px; /* or whatever the height of your logo is */ } }
  7. SaranyaDesigns
    @NatPark Hmmm if there are no slider blocks available by default in the current template you're using, I would say it's going to involve quite a bit of custom coding to achieve this... One way around it might be to take the images and create an animated gif? Then just upload the gif to the hero area as a regular image? It's a cheat, but it's probably the simplest solution without a bunch of extra work? https://ezgif.com/help/how-to-create-gif-slideshow
  8. SaranyaDesigns
    @HeidiK can you include a link to the page you're having trouble with?
  9. SaranyaDesigns
    @collgrimes there's a bunch of ways you could do this... I would probably suggest absolutely positioning the burger menu, but since you're already using flexbox, you can wrap the flexbox and then use a negative top margin on the burger instead. Here's that version: .header-display-desktop { flex-wrap: wrap; } .header-title-nav-wrapper { flex-basis: 100%; } .header-burger { flex-basis: 100%; justify-content: flex-end; margin-top: -46px; /* or whatever the height of your logo is */ }
  10. SaranyaDesigns
    Hi @Darine can you please include a link to the page you need help with?
  11. SaranyaDesigns
    @rtijori thanks. I assume by "banner" you're referring to the header, where the logo and navigation is? If so, you may be able to adjust some of these settings under DESIGN -> SITE STYLES... if not, then try this in your custom CSS: .Header { background: rgba(0,0,0,0.85); } .Header-nav-item, .Cart.sqs-custom-cart { font-size: 16px; } you can play with the px to find the size you want for the font... same with the 0.85 in the background color, you can adjust that to higher or lower depending if you want it to be more or less transparent.
  12. SaranyaDesigns
    @rtijori Can you include a link to your site so we can have a closer look?
  13. SaranyaDesigns
    @LukeView ok how about this: .header-nav-folder-content .header-nav-folder-item a { padding: 0.5em 0 !important; } if that doesn't work, you may need to adjust the original padding we added to target more specifically... so this one: .header .header-nav-wrapper a, .header .language-item a { padding: 1.25em 0; } change the selectors to something more specific, like .header .header-nav-item>a { padding: 1.25em 0; } Then see if it picks up your other CSS - your thought was correct, but it's being overridden by the new snippet we added, you can see it in the inspector window:
  14. SaranyaDesigns
    @LukeView and then for the "highlight", you could add a pseudo element with some animation: .header-nav-item a:after { content: ''; display: block; border-bottom: 2px solid #000; transform: scaleX(0); transition: transform 250ms ease-in-out; transform-origin: 0% 50%; } .header-nav-item a:hover:after { transform: scaleX(1); } You may need to play with position/spacing because of the padding we just added to push the submenu down, so might need to add a negative top margin... but need to see it in action first.
  15. SaranyaDesigns
    @LukeView try this? .header .header-nav-wrapper a, .header .language-item a { padding: 1.25em 0; } .header .header-announcement-bar-wrapper { padding: 0 3vw; } You may need to include !important if it's not overriding the existing styles, like this: .header .header-nav-wrapper a, .header .language-item a { padding: 1.25em 0 !important; } .header .header-announcement-bar-wrapper { padding: 0 3vw !important; }
  16. SaranyaDesigns
    @LukeView can you include link to your site please? 🙂
  17. SaranyaDesigns
    @rachy1105 There are a number of built-in cursor tools, but no lightning bolts. You would have to create the lightning bolt image yourself (or pull from stock imagery) and upload the graphic to your site, then use CSS to assign it. Here's an article that outlines the built-in ones as well as how to create your own: https://blog.logrocket.com/creating-custom-mouse-cursor-css/
  18. SaranyaDesigns
    @rachy1105 perfect circles are tough and can be funky in some browsers because you have to force an aspect-ratio in order to get it to work, which some browsers don't like, but add these properties to the code with the background color from earlier: .fe-block-yui_3_17_2_1_1694104930278_8932 .summary-thumbnail.img-wrapper { background-color: #7879a0; border-radius: 50%; aspect-ratio: 1/1; } For just simple rounded corners, you can adjust the border radius and remove the aspect ratio... and also add the black border you want: .fe-block-yui_3_17_2_1_1694104930278_8932 .summary-thumbnail.img-wrapper { background-color: #7879a0; border-radius: 25px; /* play around with this number */ border: 10px solid #000; }
  19. SaranyaDesigns
    @floradouville for your other two spacing issues, try this... .sold-out .ProductItem-details .product-mark.sold-out { margin-bottom: 0; } .ProductItem .ProductItem-additional { margin-top: 25px; /*you can play around with this number or just put 0 if you want no margin at all... */ } You may need to include !important in order to override the existing styles...
  20. SaranyaDesigns
    @floradouville Perhaps this could work? .product-layout-side-by-side .tag-nouveau h1.ProductItem-details-title:after { content: 'Bientôt disponible'; display: block; background: #fff; color: #443f41; font-size: 18px; letter-spacing: 1.5px; padding: 0.7rem 1.5rem; width: 200px; /* you may need to play around with this one */ } It would be a pseudo-element, but should achieve the desired outcome?
  21. SaranyaDesigns
    @Pixeltender yeah there doesn't seem to be unique selectors unfortunately, but you could probably use nth-of-type selectors to target each title in order of which they appear, like this... section[data-section-id="654a793b56fdd568d0daa8a4"] .list-item:first-of-type h2 { color: pink; /*whatever color you want here */ } section[data-section-id="654a793b56fdd568d0daa8a4"] .list-item:nth-of-type(2) h2 { color: purple; /*whatever color you want here */ } section[data-section-id="654a793b56fdd568d0daa8a4"] .list-item:nth-of-type(3) h2 { color: blue; /*whatever color you want here */ } section[data-section-id="654a793b56fdd568d0daa8a4"] .list-item:nth-of-type(4) h2 { color: orange; /*whatever color you want here */ } section[data-section-id="654a793b56fdd568d0daa8a4"] .list-item:nth-of-type(5) h2 { color: red; /*whatever color you want here */ } etc...
  22. SaranyaDesigns
    @josiedaisy I'm not 100% clear on what you want? It already looks like the map is full bleed and you've got the #map height set to 100vh in your custom CSS... but you mentioned you want to play around with that to 40 or 50vh? If I change #map to 50vh, it does it, but there is space below, so I add 50vh to the height of the whole section to match, like this: .fe-654818a5136a7869011d4bcd { height: 50vh; } Is that what you mean?
  23. SaranyaDesigns
    @CorinnaR yes try this: #collection-6548e6c4d402863b7021bc5c .page-section:not(.first-of-type) .section-background { background-image: url(https://static1.squarespace.com/static/6543b43f555c594c9d98c11a/t/654a39a8043430171539d33b/1699363240540/BACKGROUND_WHITE_200.png); background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; }
  24. SaranyaDesigns
  25. SaranyaDesigns
    @byandreavaldes ok yeah this template is complicated. It looks like there is some javascript at work here... for one, it's auto-adding some padding to the header based on screensize which is why the menu doesn't appear in desktop, so you need to override that, something like: .header--menu-open .header-menu { padding-top: 80px !important; } ...but then the menu is all rotated... I played around with trying to un-rotate it, but it becomes very complicated and layered very quickly... Regarding making the mobile menu full width, you can add this as well: .site-wrapper .header-menu .header-menu-bg { width: 100vw; } But the expandable services submenu is still displayed at all times, which I assume is not what you want? I looked for some of the CSS you've already added, but some of it looks like it's not being picked up, so you may need to check your selectors? Overall I would probably recommend hunting around for a theme/template that starts with a burger menu in desktop mode, as you may be trying to fit a square peg in a round hole with this particular one given how it's built. I think it will require some heftier custom coding, as it seems a lot to overcome with just CSS... sorry!
×
×
  • 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