Jump to content

NickScola

Circle Member
  • Posts

    50
  • Joined

  • Last visited

  • Days Won

    1

Everything posted by NickScola

  1. Ah, so it looks like Mobile Navigation has a totally different class. Here's an updated code: .Header-nav .Header-nav-folder-item[href="/healthandfitness"], .Mobile-overlay-folder-item[href="/healthandfitness"] { color: red; }
  2. Make sure you convert your fonts to support all font types. Here's an example CSS font fact @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } You can convert your fonts and get them downloaded to these formats here: https://transfonter.org/ if it still doesn't work let me know, but it helps a lot if you do this first.
  3. It is possible, but you’ll need to use JavaScript to achieve this. You’ll want to fetch the JSON for each page and then render the content you need. Repeat this when the user scrolls past the last article or when the last article has entered the viewport. I can code up an example on Monday.
  4. Looks like there's 70px of padding being applied. Remove this: main#page { padding-bottom: 0px; } Again, if you want this on the homepage only just add .homepage .homepage main#page { padding-bottom: 0px; }
  5. Hi! To prevent text from applying hyphens add this custom css: .rotating-words span { hyphens: none; } In my opinion the rotating words is coded little wonky and not that scalable. Each span word has position: absolute; for mobile since the text will go off-screen due to the length of the sentence and position: absolute; I would make the rotating words be display: block; on mobile only. Some quick adjustments to span as well. Note: I only used 375px here b/c after that the rotating words look strange. I could code up a more scalable version if you want. .rotating-words { @media (max-width: 375px) { display: block; span { left: 0; right: 0; text-align: center; } } }
  6. Hi! There's a couple ways to approach this. I personally recommend you use the Gallery Block -> Grid design. Then I would use Custom CSS to 1. Target that specific gallery block and then target everything but the 1st and 2nd image to be 100% width. Here's an example: #block-yui_3_17_2_1_1625336195519_3278 .slide:not(:nth-child(1)):not(:nth-child(2)) { @media (max-width: 640px) { width: 100% !important; } } Replace the block-yui_3_17_2_1_1625336195519_3278 with your new Gallery block ID. If you need help finding it after you create the Gallery block let me know.
  7. Hi! Try adding this css code to Custom CSS. Replace red with whatever color hex value you wish to use. .Header-nav .Header-nav-folder-item[href="/healthandfitness"] { color: red; } Note, with this solution it will break if you change the URL.
  8. Ah thats my bad! I totally forgot to apply a z-index prop / value. I've updated the code.
  9. Hi! You need to move the pages you don't want to appear in the header to the Not Linked section. Here's a screenshot. Let me know if you need help, nick@nickscola.com
  10. Hi! You'll need to set the footer to an absolute or fixed position in the Custom CSS section. Try this, FYI this will only apply to the homepage, but if you want it applied everywhere just remove .homepage from it. .homepage #footer-sections { position: absolute; bottom: 0; top: auto; left: 0; width: 100%; z-index: 999; } If you need help let me know nick@nickscola.com
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.