Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Making CSS changes with Custom Code Editor

Avatar

Avatar
Validate 1
Level 1
hayley1989
Level 1

Likes

0 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile

Avatar
Validate 1
Level 1
hayley1989
Level 1

Likes

0 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile
hayley1989
Level 1

18-09-2017

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,

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Boost 1
Employee
hirashim
Employee

Like

1 like

Total Posts

2 posts

Correct Reply

2 solutions
Top badges earned
Boost 1
Affirm 1
View profile

Avatar
Boost 1
Employee
hirashim
Employee

Like

1 like

Total Posts

2 posts

Correct Reply

2 solutions
Top badges earned
Boost 1
Affirm 1
View profile
hirashim
Employee

25-09-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>

Answers (3)

Answers (3)

Avatar

Avatar
Give Back 25
Employee
ryanr701
Employee

Likes

188 likes

Total Posts

193 posts

Correct Reply

77 solutions
Top badges earned
Give Back 25
Give Back 10
Give Back 5
Give Back 3
Give Back
View profile

Avatar
Give Back 25
Employee
ryanr701
Employee

Likes

188 likes

Total Posts

193 posts

Correct Reply

77 solutions
Top badges earned
Give Back 25
Give Back 10
Give Back 5
Give Back 3
Give Back
View profile
ryanr701
Employee

19-09-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:

Avatar

Avatar
Give Back 25
Employee
ryanr701
Employee

Likes

188 likes

Total Posts

193 posts

Correct Reply

77 solutions
Top badges earned
Give Back 25
Give Back 10
Give Back 5
Give Back 3
Give Back
View profile

Avatar
Give Back 25
Employee
ryanr701
Employee

Likes

188 likes

Total Posts

193 posts

Correct Reply

77 solutions
Top badges earned
Give Back 25
Give Back 10
Give Back 5
Give Back 3
Give Back
View profile
ryanr701
Employee

19-09-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.

Avatar

Avatar
Validate 1
Level 1
hayley1989
Level 1

Likes

0 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile

Avatar
Validate 1
Level 1
hayley1989
Level 1

Likes

0 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile
hayley1989
Level 1

19-09-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.