cPanel Question posted in
The official documentation can be seen here.

Can I use the !important in cpanel? I am with viewen and got cpanel but can't use the !important attribute in my css

I can’t seem to use the !important attribute in my cpanel. Is this a common problem

For some reason, I can’t get one of my css in my desktop media query to work. My other css in that same media query is responding ok but not for the following:

div.primervideos_heading {
  position: absolute;
  left: 7em;
  top: 56em;
  font-family: 'Lobster', cursive;
  font-size: 1.5em;
  text-decoration: underline;
  white-space: nowrap;
}

I can’t seem to use positioning at all here….

Tags:

2

Answers


  1. 0

    Try position: relative to the parent element.

    https://developer.mozilla.org/en-US/docs/Web/CSS/position#Types_of_positioning

    An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element’s containing block. (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset.

    For example:

    div.primervideos_container {
  background: yellow;
  border: 1px solid black;
  display: block;
  height: 100px;
  position: relative; 
  width: 300px;
}

div.primervideos_heading {
  position: absolute;
  left: 2em;
  top: 1em;
  font-family: 'Lobster', cursive;
  font-size: 1.5em;
  text-decoration: underline;
  white-space: nowrap;
}
    <div class="primervideos_container">
  <div class="primervideos_heading">Heading</div>
</div>
    Login or Signup to reply.
  2. 0

    You haven’t given us enough information to give you a definitive answer. To do so, you would also need to post the HTML upon which your CSS operates. However, I suspect Armel’s answer is on the right track: you’re trying to absolutely position your element without a containing element that has relative positioning.

    Here’s an example of how to do it right:

    div.container {
  position: relative;
  height: 180px;
  width: 500px;
  background-color: blue;
}

div.primervideos_heading {
  position: absolute;
  left: 50px;
  top: 50px;
  font-family: 'Lobster', cursive;
  font-size: 1.5em;
  text-decoration: underline;
  white-space: nowrap;
  padding: 0 20px;
  background-color: cyan;
}
    <div class="container">
  <div class="primervideos_heading">
    Here's some text in the inner div.
  </div>
</div>

    Now, I’m going to assume that you’re having difficulty getting your absolute positioning, and think that the reason is that some other selector is overriding yours, so you’re trying to override it with the “nuclear option”: position: absolute !important; This is, of course, not going to help you here, as we have explained.

    More importantly, though, I can’t emphasize enough that it is very bad practice to use !important simply because you can’t figure out why your declaration (a “declaration” is a block of CSS code with a selector and some attributes) isn’t working. That habit will turn your code into a disorganized mess.

    The reason to use it is when you know exactly why one of your selectors is being overridden by another selector, and you aren’t able (or at least it is very awkward) to increase the specificity of your selector to override it. (If you don’t understand what I mean, google “css specificity” and look it up.) You should use !important rarely, if at all, and should consider it a last resort.

    Finally, you may not want to use absolute positioning at all. If you are trying to, say, center your text, you’re better off working with display: flex and letting CSS do all the positioning work.

    div.container {
  height: 180px;
  width: 500px;
  background-color: blue;
  display: flex;
  justify-content: center;
  align-items: center; 
}

.primervideos_heading {
  font-family: 'Lobster', cursive;
  font-size: 1.5em;
  text-decoration: underline;
  white-space: nowrap;
  padding: 0 20px;
  background-color: cyan;
}
    <div class="container">
  <div class="primervideos_heading">
    Here's some text in the inner div.
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search