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


Forums

  • 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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location

Found 588 results

  1. I have successfully removed by site title and tag line. I however have a weird space in the middle of my navigation. I have also tried to use custom CSS to re align the navigation. Any help would be appreciated. I am not an expert with CSS but here is the CSS that I am using: #siteTitle { display: none; } #siteTag { display: none; } #siteDescription { display: none; } #headerNav a { display: inline-block; margin-top: 10px; text-align: center; margin-right:; padding-left: 10px; padding-right: 10px; }
  2. My site is www.jessicagarda.com. I'd like for each link in my navigation (Home, About, Services, etc.) to have a different color when selected or hovered on (Home would be pink, Services would be green, About would be blue, etc.)
  3. I'm wondering how to make the text in the poster blocks show up as a larger font on mobile. I want to use images with text throughout the blog posts on this site, so if there's just an easier/better way to do this than using a Poster, I'm all ears. I just want people to be able to read the text when on mobile well, as currently on desktop it's fine, but on mobile incredibly tiny.
  4. Hey, so I've got quite a bit of custom CSS code in my website (though it is all fairly simple), and all the code works exactly as I planned it to. However, I have this strange issue: when I first load the website, none of the CSS changes are visible, it's as if there is no custom CSS whatsoever. But as soon as I open the CSS editor, all of the correct changes pop up. I haven't made my site live yet, and I'm worried that if I do, none of those changes will display (my worries seem to be valid because when I open the mobile version on my phone, the CSS changes don't show up). In which case I would be wasting money on a website that doesn't work as desired. Anyone else having this issue? Anyone found a solution? I'm on a Pacific template, btw.
  5. Hello. I'd like to apply the same background overlay to mobile that appears on desktop when the promotional popup is active. On desktop I see the following CSS which is missing from mobile. How can I add this to the mobile CSS? .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide { position: fixed; } .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide { background: #0000008c; } Thanks in advance!
  6. Hi everyone, I've scoured the forums trying to find a solution to my problem. Here's the sample page I'm working on: https://www.mydryeyedata.org/symptoms-list/how-it-started I'm trying to embed an iframe element on my site (on a blog post, actually). I created a survey and want to have a blog post for summary data of each question, which is accessible by an embeddable link provided by the survey platform, which should go to this page: https://www.questionpro.com/t/ZRhJQhZGgEqYG. <iframe src='https://www.questionpro.com/t/ZRhJQhZGgEqYF' width='100%' height='600' frameBorder='0'></iframe> When I'm editing in Safari or in a private tab, I just see empty boxes. I tried chrome and once I allowed unsafe elements I got the grey frowny face saying "www.questionpro.com refused to connect". I've contacted them about why their embed isn't working, but I haven't ruled out that this is a Squarespace issue. Things I've tried: I know the url is https Putting the above code into a code block doesn't work; frowny face. Putting the url in an embed block says it's not valid. Using specific code in the embed block and adding custom CSS also doesn't work; small box and frowny face. I tried the following per a few help articles (e.g. https://answers.squarespace.com/questions/69710/why-cant-i-interact-with-iframe-content.html) Code in embed block (grey < / >): <div style="text-align: center; -webkit-overflow-scrolling: touch; overflow: auto;"> <iframe src="https://www.questionpro.com/t/ZRhJQhZGgEqYG"></iframe> </div> Custom CSS: (is height: 100% valid? I'm embedding like 100 iframes on my site, and some are a lot taller than 600px. I could also choose some random value) my-iframe iframe { height: 100%; width: 100%; margin: 0; padding: 0; border-style: none; /* to ensure proper scrolling and overflow handling on mobile devices, put this styling in a div wrapper around the iframe because it's unreliable in css: -webkit-overflow-scrolling: touch; overflow: auto; */ } Since chrome says www.questionpro.com refuses to connect, I've contacted them. I'm not sure if they'll be able to solve anything or if this is a square space issue. Btw when I put the embed code provided into something like https://html5-editor.net/ it also doesn't work, leading me to think that it's a QuestionPro problem. @alxfyv @Jay Wilson Jr @raptra @alxfyv Thanks in advance, I'll be sure to provide updates and let everyone know what worked.
  7. For some reason, my blog titles are being clipped. I'm on a mac so I don't know if this is a compatibility issue. I've included a snapshot in this blog as well as a link to the live site. Does anyone know what is causing the titles to be cut off like this? https://cides.squarespace.com/blog Deeply appreciate your feedback
  8. Hello, As the categories / product list automatically sorts in alphabetical order, I have used CSS to rearrange this on a desktop size screen. However, when switching to mobile it turns the horizontal bar into a dropdown category menu. I am looking for a way to reorder the categories on this list but keeping the dropdown style. I want them in the order ALL, EVERYONE, BUNDLES & KITS, BABY, MAMA. Link is https://www.sisunaturals.com/shop I've also attached two screenshots of what it looks like on mobile when I attempt to reorder and what it looks like without
  9. Hi there, I am using a custom font on my website for the drop down menus at the top of the site but it just recently added a huge gap between the primary navigation titles and the drop down menus. Does anyone have an idea on how to reduce the padding between the pages within each drop down? My site is private for now but here is a screen shot of what it looks like. Ideally I would like to reduce the spacing between events and upcoming events and possibly between the other pages ie b/w upcoming events, venues, type of events and calendar. Thank you in advance! Also, this is the coding i used to get the font in place: @font-face { font-family: 'Estilo'; src: url('https://static1.squarespace.com/static/5d7be41b5cb7d218f8c093c0/t/5d8bc38b609d4674de42bad1/1569440651395/Estilo.otf'); } h1 {font-family: 'Estilo';} .Header-nav { font-family: 'estilo'; font-weight: 600; font-style: normal; font-size: 20px; letter-spacing: .0em; text-transform: normal; }
  10. I'm using the Impact theme and have added a very light background image in one section. I have set my alternative colors to lighter choices as this is what I will need for the majority of the site, but for this particular section I would like to use my original darker color. Is there a way to override this alt color for my H3, but only on this particular section of the site? Any help is appreciated. Thanks! ** Pic of the affected white H3 in attached. Domain is https://parrot-rabbit-m3m9.squarespace.com/
  11. I am working in Avenue and have made my site-title and navigation bar fixed. As the template is set, the site-title is left justified, and the navigation bar is right justified. I would like to move the navigation bar closer to the title, so that there is not a large gap. I have added the following in order to do this, however, now when the window size is reduced, the navigation bar overlaps the site-title. Any ideas on how to fix this? #topNav nav { float: left !important; margin-top:0px} #header nav {position: relative; bottom:0px; left: -150px;} #header { position:fixed; z-index: 1; background-color: white; padding-top: 30px; width: 90%; padding-bottom: 0px; }
  12. I've imported a custom font and it only shows, when the page is being viewed with the "Custom CSS" page open. On the live site, or with another page open in Squarespace, the h1 and h2 fonts don't display correctly. See for yourselves here: https://www.svamae.com/test Here the CSS I've added under Custom CSS: @font-face { font-family: 'Airbnb Cereal App Book'; font-style: normal; font-weight: normal; src: local('Airbnb Cereal App Book'), url('https://static1.squarespace.com/static/5d1c5598b57288000189eb6d/t/5d8753ede7a89537827e6f0a/1569149934367/AirbnbCerealBook.woff') format('woff'); } @font-face { font-family: 'Airbnb Cereal App Light'; font-style: normal; font-weight: normal; src: local('Airbnb Cereal App Light'), url('https://static1.squarespace.com/static/5d1c5598b57288000189eb6d/t/5d8753fe1d47f936914afb20/1569149951081/AirbnbCerealLight.woff') format('woff'); } @font-face { font-family: 'Airbnb Cereal App Medium'; font-style: normal; font-weight: normal; src: local('Airbnb Cereal App Medium'), url('https://static1.squarespace.com/static/5d1c5598b57288000189eb6d/t/5d8753e21d47f936914afa03/1569149923170/AirbnbCerealMedium.woff') format('woff'); } @font-face { font-family: 'Airbnb Cereal App Bold'; font-style: normal; font-weight: normal; src: local('Airbnb Cereal App Bold'), url('https://static1.squarespace.com/static/5d1c5598b57288000189eb6d/t/5d8753ce68af88237828efed/1569149902585/AirbnbCerealBold.woff') format('woff'); } @font-face { font-family: 'Airbnb Cereal App Extra Bold'; font-style: normal; font-weight: normal; src: local('Airbnb Cereal App Extra Bold'), url('https://static1.squarespace.com/static/5d1c5598b57288000189eb6d/t/5d8753f81d47f936914afaf1/1569149944845/AirbnbCerealExtraBold.woff') format('woff'); } @font-face { font-family: 'Airbnb Cereal App Black'; font-style: normal; font-weight: normal; src: local('Airbnb Cereal App Black'), url('https://static1.squarespace.com/static/5d1c5598b57288000189eb6d/t/5d8753b414ffd35492a0c69c/1569149877286/AirbnbCerealBlack.woff') format('woff'); } h1 { font-family: 'Airbnb Cereal App Black' !important; font-size: 34px; font-weight: 700; letter-spacing: -0.8px; color: #2b2b2b; } h1 strong { font-weight: bold; font-family: 'Airbnb Cereal App Light' !important; color: #767676; line-height: 10px; font-weight: 100; font-size: 32px; letter-spacing: -0.8px; margin-bottom: 32px; } h2 { font-family: 'Airbnb Cereal App Light' !important; color: #767676; line-height: 40px; font-weight: 100; font-size: 34px; letter-spacing: -0.8px; margin-bottom: 32px; } h3 { font-family: 'Airbnb Cereal App light' !important; color: #767676; line-height: 15px; letter-spacing: -0.5px; } Thanks for any input - I've ran out of ideas on how to fix this…
  13. Hey guys, I'm slowly learning front-end coding right now and want to implement ScrollMagic to my website. But I am absolutely clueless on where to even begin doing what it says on the documentation. Can anyone walk me through the basics? What I want is basically start an animation the moment the user scrolls down, it seems to me ScrollMagic is the closest one to what I want. A basic version of this. Thanks,
  14. I'm finding with the new 7.1 version that the way the text is responding on mobile isn't working well for my site. I've tried the code below on one particular type of text in the Custom CSS editor - when I add it, the preview area doesn't change at all. When I save it, the font I've added elsewhere in CSS breaks. @media screen and (max-width: 767px) .sqsrte-large { font-size: 2rem; } I've also tried it on a different one that doesn't have a custom font - .h3 - and the same thing happens - nothing. Any ideas greatly appreciated!
  15. Hi there, I have uploaded a video from my Vimeo Plus account, which I assumed would playback in HD quality. The video is a text animation, so unfortunately it looks really bad at low res. As it is a banner video, squarespace only accepts the URL and not the embedded code of the video. Index page - Media - Video - URL Is there any code I can use to force playback HD always? Website: www.oddthing.co.nzPassword: oddthingltd Thank you!
  16. For products with status sold out, we added this SOLD medallion at the top right side of the product image (like this one https://www.matthewrachmangallery.com/cowhides/18?rq=TRICOLOR%20GENUINE%20BRAZILIAN%20COWHIDE) Check here --> https://prnt.sc/pbu6se We want to add a new status called IN HOLD, however, we could not find an option to add this in the system, we were thinking if it is possible to add in IN HOLD medallion based on the tag or category of an item, for example, if we put "inhold" tag to a certain item then the SOL medallion should be displayed. Is this possible? if yes, could you point us how to achieve this based on tag or category? If not, what would you suggest?
  17. Hello, the password for my site is "gerbercontrols". The side address is gerbercontrols.squarespace.com The issue I am running into is the header is stuck on the left side of the page. I am trying to get the white background of the header to span the entire page, but the logo and nav bar to be limited to 1400px wide and centered on the page. It also needs to be fixed as well. I have entered css code for it to do that, but it pulled it to the left and limited the white background to 1400px wide instead of just the logo and nav bar. Is it possible to do what I am trying to do, and are you able to tell me what the issue with my code is that I am having? I have pasted all of the pertinent coding below that may have an effect on the page. A site that is a good reference to what I am trying to achieve is this one: https://ice-electric.com/ All of the code the is on my site currently is this: #site { max-width: 1400x; margin-right: auto; margin-left: auto;} #header { position: fixed !important; location: center; max-width: 1400px !important; margin-right: auto !important; margin-left: auto !important; border-top: 4px solid #003399; border-bottom: 4px solid #003399; width: 100%; z-index: 10000;} .sqs-block-summary-v2 .img-wrapper, .sqs-block-summary-v2 .sqs-video-wrapper { border: 1px solid #003399);} #headerNav nav .subnav, #sidecarNav nav .subnav { background-color: #afacac;} hr { padding: 2px 0 2px 0; color: #003399 !important; background-color: #003399 !important;}
  18. I'm working on this site: https://jacqueline-misla.squarespace.com The home page and Expertise (https://jacqueline-misla.squarespace.com/expertise) page are both using Poster Image Blocks. I'd like to center the text on the Image Blocks on the Expertise page while keeping them left aligned on the home page. Can anyone help?
  19. Hi, I'm trying to target a specific text block on mobile so that I can adjust the text styling (from centre align desktop, to left align mobile), and other elements such as padding. Is there a way to target and style a block through CSS that doesn't affect all the other blocks? Here's the site: https://www.rejectsupply.com/ Test123 The block I'm trying to style is called "H2 Text Block" on the site itself, (ID block-ce591823b8f1025afa01) Thanks!
  20. I am trying to hide the navigation bar to build a landing page.
  21. Hi, Currently in iOS 13 Beta, dark mode can be enabled automatically. I have seen a lot of blogs add CSS code that’s turns their websites in dark mode when dark mode is initiated on iOS and vice versa. I’ve added a CSS code that turns my site into dark mode on iOS but having trouble with the headings and menu navigation text colour changing to match the theme. I am currently using the Avenue Theme on chambyte.net. I’ve attached a photo and the CSS code snippet I’m currently using, if anyone can help modify this CSS (or have a better CSS code) for the avenue theme for the blog post title and menu colours too match the theme that would greatly appreciated. @media (prefers-color-scheme: dark) { body { color: #fafafa; background-color: #1a1a1a; } .blog-title a { color: #ffffff; } .post-title a { color: #ffffff !important; } blockquote p { color: #ffffff !important; } } Any help will be greatly appreciated. Many thanks in advance.
  22. Suggestion of adding the below does not seem to change anything on my Om template. Any additional things I could try? This should do it:.flow-back {font-size: 35px}You can make the font size larger by changing that 35 to whatever you would like. Just put this into the Style Editor's custom CSS area.
  23. Is there a CSS code I can inject to show the home page banner (index banner block) on all my pages without having to manually create individual image/banner blocks per page; I have custom fitted the index page banner (its padding and margins) using code. If I can inject a line to show the same banner across all my other pages (or selective ones), it would allow for uniformity of design.
  24. Hi all, I was wondering if there's a way I can display an image caption on a separate block?
  25. Hi there,I have managed to change the body text to my desired font on my website, but cannot change the Nav, Title or Titles of my blog posts in Tremont.Link to my page is as follows:https://flower-jaguar-tpnb.squarespace.com/config/designAny help would be most appreciated :-)ThanksVanessa
×
×
  • Create New...