Jump to content

jeanneemariee

Circle Member
 View Profile  See their activity

  • Posts

    20

  • Joined

  • Last visited

 Content Type 

Everything posted by jeanneemariee

  1. jeanneemariee
    Thank you for the suggestion! Though it did not have any effect on the section 😞 Since I was having too many issues getting the look I wanted with that carousel section, I decided to use a gallery carousel block instead! It works well except for the fact that on automatic scroll, it does not have an indefinite scroll function, so when the photo selection ends it's rounds it scrolls the bar all the way back to the beginning and has a very dizzying effect on the eye. Do you happen to know if there's any way I can code in an infinite scroll to this new section? Thanks 🙂
  2. jeanneemariee
    Sorry for my late response, any ideas? @tuanphan
  3. jeanneemariee
    In case that link doesn’t work here’s another! jmstudiocreative.com/home-page
  4. jeanneemariee
    Also, here is a better photo representation of the final effect/look I'm trying to achieve on mobile!
  5. jeanneemariee
    Oh sorry! Here's the site: https://www.jeannemarie.space/home-page I was able to fix the desktop spacing issue between each image by adding a new section and building off of a "people" section template. But I am still having issues with how it appears on mobile. I want it to also be full width on mobile and show the adjacent slides. Here's the code I'm currently using to try to show an adjacent slide on mobile, but it's still not full width and it cuts off my buttons: //HP CAROUSEL CUSTOM MOBILE section[data-section-id="65bd4ef80aa0e7737193f2e6"]{ //Mobile @media (max-width: 767px) { .user-items-list-carousel__slides { margin-left:-15% !important; } } .mobile-arrows{ display:none } }
  6. jeanneemariee
    I'm having a hard time with this carousel section design on both desktop and mobile - what I want is to be able to reduce the space between the image elements and show adjacent slides (I want this effect both on desktop and mobile). (also, I have tried going into the design tab of the carousel menu and reduced the "space between elements" to 0 and still no effect) Attached are some before pictures of what it currently looks like and some after photos of how I'd like it to look once the spacing issue is solved! For mobile to show more than one item as well as the adjacent slide, I am currently using this code from will myers, but it's still not quite the sizing and space I want: //HP CAROUSEL CUSTOM MOBILE section[data-section-id="65aec611a9cae7745b64cf13"]{ //Mobile @media (max-width: 767px) { .user-items-list-carousel__slides { grid-template-columns: ~"repeat(2,1fr)" !important; margin-left:29% !important; } } .mobile-arrows{ display:none } } I couldn't seem to find this answer anywhere else on the forum even though a few have asked similar questions in the past, so hopefully someone can help me find a solution!
  7. jeanneemariee
    That fixed it! I agree JS would probably be the cleaner choice. But I operate my own site on the personal plan, so I'm not able to use script. I will definitely come back to this JS solution when I inevitably use the new menu style for a client though! Thanks so much for your help, your CSS solution works great for my site right now 😄
  8. jeanneemariee
    Oh this is clever! The initial nth-child selector works, but my 4 following don't seem to be taking. I attached a photo of how it's looking and here's my code: //number extensions on mobile nav .header-menu-nav-item a:after { content: ".........."; } .header-menu-nav-item a:nth-child(1):after { content: ".......... 01"; } .header-menu-nav-item a:nth-child(2):after { content: ".......... 02"; } .header-menu-nav-item a:nth-child(3):after { content: ".......... 03"; } .header-menu-nav-item a:nth-child(4):after { content: ".......... 04"; } I did tried adding !important to the three that aren't working, but I may have been putting it in the wrong spot and that's why it didn't work?
  9. jeanneemariee
    Thank you! I hear what you're saying about the image size variation on different mobile devices, I figured I'd try this method out to as a first step toward the ultimate desired outcome. But that bit of code solved my nav item spacing and alignment issue, so thank you! Do you happen to know if there is a way to rename the title of a nav item so that it only appears changed on mobile? I know the general renaming function is inside of a given page's settings tab, but that would change the way it appears on the nav menu both on desktop and mobile. If I'm able to customize the page title on just mobile menu view, I wouldn't have to add the dots and number to the photo and have that resizing problem.
  10. jeanneemariee
    Hi! I'm trying to evenly space out my mobile navigation items (page titles) in the mobile overlay menu and my code that usually works doesn't seem to have any effect. I've successfully set a photo on my mobile nav menu overlay background and customized the size of my mobile navigation items text to 25px, but the height and alignment of my nav items isn't responding to my css. Attached are the photo examples of what I have right now and what I want it to look like once the alignment code works in my favor. And here is the code I am currently using (all of it seems to be responding on my site, except for the first "space-evenly" alignment bit): // mobile menu spacing and size .header-menu-nav-folder-content { justify-content: space-evenly!important; } .container.header-menu-nav-item { padding-left: 1vw; } .header-menu-nav-item a { font-size: 25px; } //mobile menu backgr photo .header-menu .header-menu-bg{ background-image: url(https://static1.squarespace.com/static/60ff71961937ff050b281e36/t/6580beebae1e435ed34f401c/1702936299881/jm_mobile_menu+%281%29.png); background-size: cover; }
  11. jeanneemariee
    Site URL: https://www.jeannemarie.space/ I currently have two pieces of code in place right now to make a sticky effect, but I have some issues I wanted to fix if possible! *current code : @media screen and (min-width:768px) { .fe-block.fe-block-yui_3_17_2_1_1660163627625_1012844 { position: sticky; top: 0; position: -webkit-sticky; z-index: 999; } } @media screen and (min-width:768px) { .fe-block.fe-block-yui_3_17_2_1_1660163627625_717246 { position: sticky; top: 0; position: -webkit-sticky; z-index: 999; } } The element(s) I want to be "sticky" are the yellow circle (which is an image block) and the "my work" text (which is a text block overlapping the circle). First, I want the combined element to start moving with me in the middle of the page as you begin to scroll, not start moving at the top of the page like it is now, because it interferes with my sticky navigation menu and just doesn't have the landing effect I want that way. Second, I also want to know if there's a way I can make the two elements stay together while they scroll and not break apart like they are now when they move. If the simple solution is to make this a single element as a button instead of custom text and image background then that is fine. Last and most important thing I want to try to accomplish is for the sticky effect to end within the same section right after the " I collaborate with small businesses..." paragraph. P.S. I also want this effect on mobile, but my current code doesn't seem to do that...
  12. jeanneemariee
    Besides it bleeding into the header, this is exactly the look I'm going for! However, For some reason, I am still getting a syntax error, even after copying and pasting your direct css that you pasted 😞
  13. jeanneemariee
    Site URL: https://www.jeannemarie.space/about-test Per my About page on my in-progress site - I've been trying to create a split page layout effect (photo on one side of a section and copy content on the other side of the same section) and this code keeps giving me a syntax error every time I plug it in. I even tried saving the code with the syntax error and then adding my section ID to both of the bracket sections that ask for it and the syntax error still stays there and no changes appear to be made on my site. Please help!!! @media only screen and (min-width: 640px){[data section id] .section-background {width: 50%}[data section id] .content-wrapper {width: 50%;margin-left: 50%!important;}}
×
×
  • 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