Jump to content

Styled quotation mark works in browser – except in chrome. Why?

Go to solution Solved by creedon,

Recommended Posts

Hi there, maybe somebody knows where I have an error 🙂

I styled the quotation mark by hiding standard mark and styling first letter.
This works in Firefox, Safari … but not in Chrome. And I don't get it.
Thank you in Advance

This is my code:

https://echidna-flugelhorn-5ybf.squarespace.com/projekte/brand-marketing-mpu-profi

// Quotations
  //Delete Quotations Marks
.sqs-block-quote span:first-child {
 display : none;  }
.sqs-block-quote span:last-child {
  display : none;  }

// 1. Letter Styling 
blockquote::first-letter {
  color: #F8D03F !important; 
  font-size: 5em !important;
  padding: 0.3em 0.05em 0.1em !important;
  margin: 0em 0.2em 0em -0.2em !important;
  float: left !important; }

this is it right looking in safari:

image.png.40cd64d792252b0bb5fc0738c6e2addc.png

 

and this in chrome:

image.png.b1cdddb1a7bf4d706e65e2934331ccaa.png

 

Link to comment

Display none doesn't remove the element, it's still there, just not showing. In your case, first-letter is styling the quotation mark in the <span>. But, Firefox (sounds like safari also) treats certain characters as letters. In your case the quotation in the span is the first-letter. A bug perhaps? But any characters around the first real letter is being treated as part of the first-letter selection, so it's just lucky that it worked on Firefox (and safari).

Not sure what's the best solution. Let's see... or someone else might be able to help.

Edit: assuming there is no built-in option to use your own quotation mark in the block?

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (may contain affiliate links)


 

Link to comment

Could you just use a regular text block? 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (may contain affiliate links)


 

Link to comment
  • Solution

I suggest removing the extra character ( » ) in the text. Remove the CSS for your current effect, make a copy somewhere. The try the following.

/* begin quote effect */

  .sqs-block-quote blockquote {
  
    margin-bottom : 2em;
    
    }

  .sqs-block-quote blockquote span:first-child,
  .sqs-block-quote blockquote span:last-child
  
    {
    
      visibility : hidden;
      
      }

  .sqs-block-quote blockquote span:first-child::before {
  
    color : #f8d03f;
    content : '»';
    font-size : 5em;
    visibility : visible;
    
    }

  .sqs-block-quote blockquote span:last-child::before {
  
    color : #f8d03f;
    content : '«';
    font-size : 5em;
    vertical-align : top;
    visibility : visible;
    
    }
    
  /* end quote effect */

ScreenShot2023-10-28at3_38_30PM.png.5d6392c6a7637b2869e1ad72b888e721.png

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@Matt-W-Urst you're welcome! Learnt a new syntax 🙂 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (may contain affiliate links)


 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.