My z-index property is not getting set [closed] - css

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a site with a log-in and a contact module, which is sliding out from the top-left side of the page. I have only one problem: the log-in module is working fine, but the contact module is going underneath the text, rather than above it. I set z-index: 999999; but, it still isn't working. I'm using position: fixed;

Moving #iUngicontactForm from the table to the body tag will fix it.
The problem is that the z-index of an element is inherited from it's parent and it only applies to sibling elements. And as you're using fixed positioning, it's a quick fix.
So instead of something like this:
<body>
<table>
<tr><td>some content..</td></tr>
<tr><td><div id="iUngicontactForm"></div></td></tr>
</table>
</body>
do this:
<body>
<div id="iUngicontactForm"></div>
<table>
<tr><td>some content..</td></tr>
</table>
</body>

if you go up the dom tree until .art-block and set z-index there it fixes the problem. Confirmed in firebug. Not to the whole .art-block class but you'll need to add a new class there, or id, or inline -- to that specific .art-block.

Related

nth-last-child, must select number more that actual elements [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
just so you know, I CAN NOT MODIFY ON JAVASCRIPT, I CAN ONLY ADD CUSTOM CSS
I have this website
https://elt.sa
you can check the last <section> tag
I want to select it in css so I can change the color of it
I can see that it's the last section! but it's not getting selected until I write
nth-last-child(18) and sometimes 19 !
check the images below, and you can inspect the website above and modify on <style> tag inside header , (the second one)
If it is always last then you can use :last-of-type, for more details check this CSS Selectors
section.section:last-of-type {
background: #cc3329;
}
section.section:last-of-type - it selects every section.section element that is the last section.section element of its parent.
you can do it also by javascript or css
for javascript
let section = document.querySelectorAll('section');
section[section.length - 1].style.background = 'red'
or css
section:last-of-type{
background: red;
}

Remove hestia top bar [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I need to remove the navbar in my Hestia Theme.
I tried .navbar {display:none;} and when I use it the top bar gets white and I need to remove it.
Could you help me with this problem, please?
Kind regards
As it showed in the piture
In Wordpress sites the main tag has a margin at the top. This is causing the white bar above the page after you removed the navigation. You can "deactivate" this with:
.main, main {
margin-top: 0 !important;
}
Edit: I have checked out your site and have found the reason. There is some top padding defined by inline CSS at the article tag, that's get added by some JavaScript, but I cannot tell you why.
But you can still turn it of with:
.elementor-page .pagebuilder-section {
padding: 0 !important;
}
This CSS rule is an extended rule already applied by Elementor, buts get overwritten by this inline CSS. I just added the !important to fix it:
If that was helpful and you used this answer to solve your problem, it would be nice if you mark this answer as accepted. If this answer doesn't work or you have other questions, please response with a comment.

First child on it's own line [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want to make my .screen class to be on its own line. Assuming I can not change the current layout.
<div class="app">
<div class="screen"></div>
</div>
I though that display: block; would do the trick but no.
.screen {
display: block;
}
As of now it all sits on one line. I am only handy with flex and I can't think of anyway flex will help me here.
If you're using flexbox flex-wrap can help. Make the first child 100% wide and put flex-wrap: wrap to the parent.
By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS. There is probably override of <div> style.
Try to use !important to prioritize your style:
.screen {
display: block !important;
}
Also, check the style of div in browser's inspector and provide that info – it would be useful to get more details

Changing margin in CSS does not change it on website (Cache cleared) [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have a strange issue.
I detected that margin-top needs to be set to 0 for my toggle menu to look well.
I changed this in CSS and cleared my cache but the problem is still there.
Please let me know what should I do to fix this.
You can see live problem here: http://onedayitinerary.com
Thanks!
Screenshot of the problem
https://i.stack.imgur.com/yk4CA.png
You didn't target the required selector. When pointing the element in DevTools, check the code that has the most importance on the right hand side.
.main-navigation ul ul li:hover > ul {
margin-top: 0;
}
Output:
The ul around, has a margin-top:25px; on it. Remove that in the file and it should work.
If you already have done that, try add "style.css?ver=1" to your stylesheet link. Sometimes that will force an stylesheet update.
you need to modify your style.css to fix this issue

CSS letter cut off. How to display entire text? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a problem with a text in a header. I use google fonts (Pinyon Script) and one of the letters is cut off. I don't understand why... I tried with the overflow properties but it doesn't work. The problem is the header in pink on www.x4v1.com/cecile/ when the screen width is between 935 and 970 pixel. The first L of the second word is cut off and I would like to show all the text. Could you help me please ? Thanking you in advance.
On chrome :
You're doing it exactly the wrong way around. The font your using is getting out of it's inherited size (line-height, letter-spacing and so on). Therefore you should give the h1 element a large size, and the span element a smaller size.
To fix this do the following:
<h1 id="myheader">
C<span class="lowerfont">écile</span>
L<span class="lowerfont">astchenko</span>
</h1>
Than add the following CSS
#myheader {
font-size: 6em;
}
.lowerfont {
font-size: .75em;
}
This is what I can see, what is supposed to be missing?

Resources