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

Search the Community

Showing results for tags 'css'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Squarespace Forum Club Guidelines's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me



Found 1,070 results

  1. Site URL: https://andrea.co Hi there, I have a question. How do I change the hover color of my search icon? I've tried with this, but it doesn't work .Header-search-form a:hover { fill: #0a97a9 !important; stroke: #0a97a9 !important; color: #0a97a9 !important; } Thanks Andrea
  2. Site URL: https://www.ronaldaartsen.com As many might have noticed, the header incl. navigation layout is a bit more restricted than in 7.0. @tuanphan , would it be possible to use css to make a custom header so I can create more space for navigation (-items). In the current structure it is so narrow that if I add one more page it shows the navigation menu on 2 lines. An example of how I would like it to look is in the screenshot. So basically, the navigation and in this case the button in a different block / on a seperate line from the logo/title and soc media icons. Like we had in 7.0 Top & bottom. Thanks in advance for having a look at this.
  3. Site URL: https://www.dolina.co.uk Hello! Needing some help with a custom css please! My site is typically vanilla... however I do have a 'naughty' section for the more foul language that people request/like... On that note, I don't want someone searching 'bee' to find my nice vanilla cushions and below it 'buzz off you pr*ck' (and worse! sorry!). Can anyone help with a custom css that will allow me to exclude all my 'naughty' products please! Thanks in advance.
  4. Hello, I'm working on my new website and I've got my own little thing that I want as a mobile hamburger menu icon. My problem is it does not center in the bounding box (term?), how do I fix this? Image for reference: Icon image adress: https://i.imgur.com/DcVdG9q.png CODE I'm using right now: .burger-inner:after { content: ""; background-image: url(https://i.imgur.com/DcVdG9q.png); background-size: contain; background-repeat: no-repeat; background-position: left; background-color: transparent !important; display: block; width: 30px; height: 30px; } .burger-inner:before {display:none;} Thanks before hand, John
  5. Site URL: https://plum-octahedron-jxxd.squarespace.com/ Hi everyone, I am creating a new website via Squarespace platform. The template is Heights. https://plum-octahedron-jxxd.squarespace.com/ Password to access is: 1234 As you can see, I have set some products to buy from our catalogue page. You have a section “ORDER” with two cart button named “vinyl” or “digital”. Whenever we click on it, for example on “digital”, it’s redirecting to the “checkout” page for ordering the product. But it has an animation of the button that does “ADDING…”. I would like to remove/skip this animation “ADDING…” of the button and be directly redirected to the checkout page. How I could do this? 🙂 Thanks a lot for your kind help!
  6. I'm just trying to style some custom HTML lists for a course catalog page and the class selector doesn't target as it would under any other circumstance. I found a forum post from 2014 requesting this capability, I had hoped that because it was from 5 years ago, they may have implemented that ability. Basically, I am just trying to target these specific lists, leaving the rest on the site as they are. Any advice? Thanks!
  7. Site URL: https://www.workingdraftbeer.com/crowlers-1290876 Hello, I'm hoping to get some help on custom CSS for our Page displaying Product Blocks. On PC, the order of the product blocks make sense to read from left to right. On mobile, however, the products display top to bottom, left to right. I would like to change this so that the left to right display / order of product blocks translates to the correct display order on mobile. Here is the page: https://www.workingdraftbeer.com/crowlers-1290876 No custom CSS is being used at the moment to remedy this.
  8. Site URL: http://www.grey-sapphire-9lfk.squarespace.com Hey folks, I am designing a site using Brine, and I have a heap of code I've injected. I've just input a carousel gallery into a page and noticed that it scrolls OVER my (coded) fixed header and can't figure out why. Summary blocks don't do it, other galleries aren't doing it and all of my efforts yesterday to amend, didn't work. Can I get some help here? www.grey-sapphire-9lfk.squarespace.com/internal-signs Password: help
  9. Site URL: https://www.rubysplace.org/ Currently struggling with identifying the issue that is causing the extra spacing on the left and right of two of my content blocks. When I'm in edit mode, there is no spacing that appears, so I'm not sure why it appears when the site is live.. If anyone could help me with this, that would be great!
  10. Site URL: https://bassoon-oleander-texb.squarespace.com/ Site password: 12345 Right now, I have a "SHOP" Button in my navigation bar that I moved closer to the Cart icon using CSS edits to its spacing. However, when the window size is reduced/expanded, it moves with the other navigation items and the spacing I'm looking for gets messed up. I've currently used multiple lines to edit the spacing based off the window size as a basic fix: @media only screen and (min-width: 1270px){.header-nav-item:nth-child(5){ margin-left: 280px !important; margin-right: 5px !important; padding-right: 10px !important;}} @media only screen and (max-width: 1270px){.header-nav-item:nth-child(5){ margin-left: 200px !important; margin-right: 5px !important; padding-right: 10px !important;}} @media only screen and (max-width: 1200px){.header-nav-item:nth-child(5){ margin-left: 180px !important; margin-right: 5px !important; padding-right: 10px !important;}} etc.... However, I'm wondering if there is an easier fix to this and have that particular nav item (SHOP) behave like the Cart icon and Donate Button when the window size is expanded/reduced - so that it remains right-aligned to the window in the same relative position. Same thing when it comes to the grey backdrop. Any and all help would be greatly appreciated!
  11. Site URL: https://www.roostup.com/ I was making updates to my site and noticed that on mobile, my footer color comes up and overlaps most of the content on the page. I don't see a way to adjust this, as I can't select it as an element. Any ideas why this might be happening? Thank you, Alex
  12. Site URL: https://wombat-bobcat-nap5.squarespace.com/ Hello, Basically I want to use a poster image with an active link to take you to another page, but I only want the text to appear when the mouse is hovering over the image, the effect on other image layouts isn't right and poster seems to be the best but we don't yet have the hover option on SS yet. If anyone can share the CSS for this I would be very grateful. Thanks, R
  13. Site URL: https://www.dfwmicropigmentation.com Hi ya'll, Is it possible to style only for mobile/iPhone? For example, I hav the following css for controlling padding on my home page, but I want to decrease the padding-top a little more for iPhone: div#home-page { padding-top:10px; padding-left:0px; padding-right:0px; } Do you use the same code again, but wrapped in a css for mobile? How is that done correctly? Thanks so much!
  14. Site URL: https://kazoo-bulldog-snp5.squarespace.com/ Hi everyone, I am creating a new website via Squarespace platform. The template is Brine Family 7.0. https://kazoo-bulldog-snp5.squarespace.com/ Password to access is: 1234 I would like to add a feature of “read more” for the text paragraph of the website. In order to not display full text of the page - the user can read more by clicking if needed. An example I used to have this custom feature on our current site: http://www.oxmose.com/catalogue?ref=landing Read more → ← Close I can add some custom element on Squarespace with some code insert for that. Do you have any code suggestion for that? Thanks a lot for your kind help!
  15. I want to know how to hide an event date (because I don't know exact day yet) or perhaps replace it with only a month - for example change from 1st of September to only September? Here is a link to a website I'm building https://heron-gar-tw2b.squarespace.com/new-events Cheers
  16. Site URL: http://www.somaculvercity.com/sundays Hi, I'm wanting the banner on this page to scale smaller when on a mobile device so it doesn't get cut off. I think I have the nuts and bolts of code, but can't figure out how to put it together: .Index ([data-collection-id="5e8796abb6e8ff0b5b099b02" ]) @media screen and (max-width: 640px) {max-height: 115px!important;} Thanks! Jared
  17. Site URL: http://www.billydupee.co.uk Hi there, I am using the Lange template and I want to change the background of my Info page to Black, then use white text here. I have added in this code below which I found from the forum, however, it changes the background of all pages and also the header. body#collection-5d18349a84a155000110af0c #site { background: #000000; } Can I use custom CSS to change just the background of this page to black, but not the header - so keeping the header white as on the rest of the site. I have highlighted the section I want to change specifically on this page in red on the screen shot below. Thanks
  18. Site URL: https://www.numsyums.com/ Hello, Pretty new here and I have added a custom font to my site but it only attaches to the heading 2. Especially on the menu page how do I change the font the the custom one I want. Also my site title is no the same on the footer. #site-title{font-family:'Playlist'} h1 {font-family: 'Playlist';} h2 {font-family: 'Playlist';} h3 {font-family: 'Playlist';}
  19. Site URL: http://www.pllama.com I have a scrolling banner on my home page. Because of Squarespace's new "responsive webpage" i can not get it to scale down on mobile... only crop... and it looks terrible. Squarespace confirmed that there is no setting that will allow the banner to scale on mobile instead of crop. Is there a code that will allow me to do this? Any help will be much much much appreciated!
  20. Site URL: https://www.ronaldaartsen.com Hi, Wasn’t sure if I had to post this in Site Design or here, but I recently changed to 7.1 from 7.0. and took Merida as a starting point. Now I am really satisfied with the desktop view, and on my phone. But on my ipad it seems it does not show right the responsiveness with fonts. It breaks down the headings so one letter is broken off. Kind of bad hyphenation which may be solved with css, but if the headings would adjust size-wise it would solve the problem more easily. Is there any way I can accomplish this? Plus when I hold my ipad in vertical view, it shows the mobile menu, but still keeps two blocks next to eachother. Any help is much appreciated. Thanks!
  21. Hello. Is there a way to have a site wide background image in 7.1? Or at least apply background images to blocks? The site is private but I am not sure that you need to view the site to answer the question. Thanks for your help.
  22. Site URL: https://sunfish-azalea-4lx5.squarespace.com/config/ In my mobile view products with long names or multiple prcing options disturb the layout: This is my CSS: Password to access site is "Pass1234".
  23. I've noticed an unusual problem: the line-height for my text is different in Overlap Image Blocks than it is across the rest of my site (it appears to just be overlap blocks, not other image block types.) Turns out something is applying a line height change, but I didn't add this! line-height: 1.5 !important; How do I target all overlap image blocks in my site with css, so that I can customize the line-height in a way that overrides this? I tried the following with no success: .sqs-block-image .design-layout-overlap .image-title { line-height: 1.2 !important; }
  24. I am trying to make my navigation pages to underline on hover; however, I do not want it to change the color of the words above the underline like this. I want it to look like this: But, currently, it looks like this: when using the code: style #header a:active{ text-decoration: underline !important; } #header a:hover{color: red!important; text-decoration: underline ! important; } div.folder.active{ text-decoration: underline ! important; } Any suggestions? I am using 7.1.
  25. Site URL: https://www.innovativeink.ca/ I'm using the Bedford template and would like to use a typewriter effect on the text for my banner. I'd like to do something just like the website provided. Any tips? Thanks!
  • Create New...