Is it possible to use drop caps on blog posts?

Ask the community
, ,
1

I have tried to add a html code:

FIRST LETTER

It did form a drop cap, but the whole text was then in a strange format. I use open sans as a font.

Any ideas?

2

i’ve been wondering the same thing, couldn’t get it to work

3

Hi, to get a drop cap in a Wix blog is a breeze. However, to include a drop cap and get the rest of the sentence in the correctly formatted text so that it matches the rest of the blog post is a COMPLETE PAIN.

However, managed to do this inside a blog post after a few hours of research, headbanging and hand coding on the W3Schools editor.

So, here’s how the post with the drop cap and correctly formatted text in the rest of the sentence looks in the website blog currently:
Flash Fiction ‘A TRYST WITH CAFFEINE’ (o-o-o.org)

Dropcap Code for this Blog Post

I

ntravenous data ingestion is tough on the body and Caid was feeling the fatigue as Hyperspatial Geometry 101 trickled into the cannula embedded in his arm.

Process

  1. Identify the right font family (for this blog these were Enriqueta and Signika)

  2. Head over to Google Fonts (in this case) and grab the free code for the relevant fonts.

  3. Embed this Google Fonts code above the tag - as shown above.

  4. Place the drop cap letter in a element that contains several styling attributes.
    Please Note: you have to experiment with the ‘wght’, ‘line-height’ and ‘padding’ to get it to display exactly the way you want it.

  5. Place the rest of the sentences WITH PARAGRAPH STYLING (as shown in code above) inside a

    tag.
    Please Note: each style attribute with its correct value is separated by a semi-colon character (:wink: and the entire style attribute family (for lack of a better word) is contained within double quotes ("). Most code editing mistakes happen here - when a semi-colon is missed out or that double quotation mark is not closed. Painful, but true. So, cross your T’s and dot your I’s with great care.

  6. Again, experiment with the style attributes: font-size, font-family, etc till you achieve the paragraph look and style you wanted for the post.

  7. Add the code to Wix via the ‘add HTML code’ element through the Blog Post manager. Check the final output, heave a sigh of relief and publish the post.

Contact
Still can’t get the dropcap to look the way you intended? Just drop me a message at: info@voystech.com. My name’s Jay, am a seasoned Wix developer and happy to help you solve your Wix issues.

Quick Observation / Disclosure
The solution outlined above works well on bigger screens (desktops/laptops) but is crappy on Mobile Phone screens. Am trying to figure out a work-around on mobile that is elegant. Will update the code as soon as that is figured out. Or, not figured out. Working on it.

4

Hi, Faith, have managed to achieve a drop cap inside a blog post along with the correctly formatted text for the rest of the sentence that includes this drop cap. Do take a look at the method/code given in the reply above. Also, do reach out in case you’re still facing the issue and can’t resolve it.

5

Thanks for the tip, but I’m afraid your text with the drop cap fades away in Google and duck duck go browser.

6

Am sorry, didn’t understand what you meant by ‘fades away’.
Please confirm:

  1. What’s the exact browser that you’re using - Chrome? Google and Duck Duck Go are search engines and not browsers.
  2. Are you viewing the blog post on the mobile or on a laptop/desktop.

As with everything else, this solution is good enough for the laptop and desktop…but NOT for mobile. That’s a Wix issue since Wix is not responsive by nature. Am experimenting with the code to make it display properly on a mobile phone.

7

@info33513 Hi, I was checking on mobile, thats why the text starting with the drop cap is only showing half of it. I use the browsers Safari and Duck Duck Go. Pity Wix doesn’t develop the option for a drop cap more. Maybe I can send you a screenshot somewhere?

8

@thevirtualstylistinf
Hi, can confirm that this is definitely a Safari issue. Have redone the code so that the blog post looks better on mobile devices. This html code workaround works very well on Chrome (and other chrome based browsers) on both desktop and mobile.

However, here’s what happened with Safari on an older iPad Mini:
: Safari didn’t load or show the html code element that was used to embed the drop cap + the rest of the sentence. The page simply didn’t load and displayed the message ‘unable to load content’.

: tried it again on an older version of the Dolphin browser on the iPad Mini - didn’t work. The page didn’t load and showed the same message: ‘unable to load content’.

Lastly, do check the post on your Safari browser (on mobile) again. Have fixed it to look better on mobile devices. The reason for only half the drop cap showing was: the HEIGHT of the html code element had to be increased inside the Blog post. Experimented with that and it worked.

You can send me a screenshot at: info@voystech.com for further assistance.

9

great thanks for looking into it😀I see it now. I am using Brave as a browser as well. There it looks perfect now on mobile and desktop! I don’t have to send you a screenshot because it’s looking good now😀