Adding code to Additional code snippets

SOLVE
Philysgdy
Contributor | Partner

Hi there

I am wanting to add some code to a rich text element using the settings>additional code snippets. When I add the code it displays at the top of the page. What am I not doing correctly?

Ann link code d1.png

 

Ann link d2.png

 

 

CSS
0 Upvotes
4 Accepted solutions

Accepted Solutions
miljkovicmisa
Solution
Top Contributor | Gold Partner

Hello @Philysgdy , I believe I answered your previous question, in the answer I should have stated that your code must be wrapped in <style> tags like below, otherwise it renders as text, this is what you should put inside:

<style>
  @media screen and (max-width: 576px){
    .connectLink {
      left: 4%!important;
    }
  }
</style>

 

If you have any other issue, don't hesitate to ask.
If my answer helped you please mark it as a solution.

View solution in original post

Philysgdy
Solution
Contributor | Partner

Thank you that solves the riddle for me, I knew it was simple I just couldn't connect the dots mentally.

View solution in original post

0 Upvotes
miljkovicmisa
Solution
Top Contributor | Gold Partner

I would definatelly recomment all your css out of the rich text editor for two reasons.
1. Maintainability: Its easier to maintain when all your code is in the same place.

2. Readablility: It's a lot easier to read/write code in the snippet editor that in the rich text editor. It's just cleaner.

Also as a side note a separation of concerns is another reason, you will want your content to be decoupled from the styling, this is a broader topic that applies generally to web development, it is prefered to do that so you can maintain your code easily.

View solution in original post

Philysgdy
Solution
Contributor | Partner

You are exactly right, I have been in WP territory where this hybrid doesn't exist and I was trying to get my head around this CMS and this was my first attempt with it. Separation of concerns 😉 totally!!

I just sat back put it on paper and solved it as you suggested. Cheers

View solution in original post

0 Upvotes
4 Replies 4
miljkovicmisa
Solution
Top Contributor | Gold Partner

Hello @Philysgdy , I believe I answered your previous question, in the answer I should have stated that your code must be wrapped in <style> tags like below, otherwise it renders as text, this is what you should put inside:

<style>
  @media screen and (max-width: 576px){
    .connectLink {
      left: 4%!important;
    }
  }
</style>

 

If you have any other issue, don't hesitate to ask.
If my answer helped you please mark it as a solution.

View solution in original post

Philysgdy
Solution
Contributor | Partner

Thank you that solves the riddle for me, I knew it was simple I just couldn't connect the dots mentally.

View solution in original post

0 Upvotes
miljkovicmisa
Solution
Top Contributor | Gold Partner

I would definatelly recomment all your css out of the rich text editor for two reasons.
1. Maintainability: Its easier to maintain when all your code is in the same place.

2. Readablility: It's a lot easier to read/write code in the snippet editor that in the rich text editor. It's just cleaner.

Also as a side note a separation of concerns is another reason, you will want your content to be decoupled from the styling, this is a broader topic that applies generally to web development, it is prefered to do that so you can maintain your code easily.

View solution in original post

Philysgdy
Solution
Contributor | Partner

You are exactly right, I have been in WP territory where this hybrid doesn't exist and I was trying to get my head around this CMS and this was my first attempt with it. Separation of concerns 😉 totally!!

I just sat back put it on paper and solved it as you suggested. Cheers

View solution in original post

0 Upvotes