Making CSS changes with Custom Code Editor | Community
Skip to main content
H
hayley1989
September 18, 2017
Solved

Making CSS changes with Custom Code Editor

  • September 18, 2017
  • 4 replies
  • 6136 views

I'm wanting to use the custom code editor to edit simple css on the page (in this case, the background image).

An example is below:

.example {

    overflow: hidden;

    position: relative;

    background: #fceee3 url(/assets/img/example.jpg) no-repeat left bottom / cover;

    min-height: 905px;

}

When I edit the css directly within the inspector, it works as expected. When I use the same information in Target, it doesn't work.

This has happened whenever I select any element or any change.

Am I using this tool completely wrong?

Thanks,

Best answer by hideharu1977

Hi hayley1989,

Not sure if you've managed to fix the issue, but in case you are still facing the same issue, you may want to palce the CSS code within the style tag within the Custom Code section.  E.g.,

<style>

.example {

     overflow: hidden !important;

     position: relative !important;

     background: #fceee3 url(/assets/img/example.jpg) no-repeat left bottom / cover !important;

     min-height: 905px !important;

}

</style>

4 replies

R
Adobe Employee
ryanr7Adobe Employee
Adobe Employee
September 19, 2017

Hi Hayley,

CSS can sometimes be a little tricky because of its cascading effect. So a change to your CSS from Target might be getting overridden by other CSS on the page sometimes. I've found 2 useful ways to overcome this:

  1. Get more specific with your CSS selector. Instead of just using the class (.example) try something like: div.content > div.example.
  2. Try using the "!important" identifier on your CSS statements. It will look like this:
    D
    DeepakUp
    Level 2
    March 11, 2025

    Hi @hideharu1977 and @ryanr7, I also recently encountered a scenario where my external CSS was not rendering on the page. As a workaround, I had to use inline CSS for each of the HTML elements to style the page. In this situation, I was unable to use media queries in my code since inline CSS does not support it. Additionally, the "!important" identifier on my CSS statements did not render at all. Could you please investigate and provide a solution for such scenarios?

    H
    hayley1989Author
    September 19, 2017

    Thanks so much for your advice. Unfortunately even if I make the changes in inspector, and copy over the exact specific selector, code and changes over to Target, the changes still don't show in Target - even when I add important.

    R
    Adobe Employee
    ryanr7Adobe Employee
    Adobe Employee
    September 19, 2017

    If you want to share the URL I'm happy to try prototyping it to see if there is something else that will work? You can direct message the URL to me if you prefer.

    H
    Adobe Employee
    hideharu1977Adobe EmployeeAccepted solution
    Adobe Employee
    September 26, 2017

    Hi hayley1989,

    Not sure if you've managed to fix the issue, but in case you are still facing the same issue, you may want to palce the CSS code within the style tag within the Custom Code section.  E.g.,

    <style>

    .example {

         overflow: hidden !important;

         position: relative !important;

         background: #fceee3 url(/assets/img/example.jpg) no-repeat left bottom / cover !important;

         min-height: 905px !important;

    }

    </style>

      Terms & ConditionsAccessibility statement

      Loading footer...