My intention is to have the post_entry level with the headline. I've noticed that some entries do this while others are shifted up or down seemingly random amounts. What is causing this? How do I fix/prevent it?
Site- http://whskytngfxtrt.com
(the slope of the red lines show the problem)
Thank you.
I think it has something to do with the margin-top you put on everything by hitting #main .post_entry and p, but unless you clean up your HTML (as Diodeus and Didier Ghys recommended: put everything into separate divs) it's impossible to say for sure. Sorry!
In your CSS, I noticed something else in this part:
#main .post_entry p {
font-size: 80%;
font-weight: normal;
line-height: 150%;
margin-left: 230px;
margin-bottom: 25px;
margin-top: -82px;
overflow: hidden;
width: 403px;
margin-top: -82px;
}
As you see, there is two margin tops of -82.
Related
My code works well in every browser, the text keeps its white opaque color on top of the semi-transparent background (background-color:rgba(0, 0, 0,.4)). However, in Safari, the background transparency value is different (much lighter) and the text is also affected by the transparency and it doesn't keep its full color. I tried changing the font color (color: #fff;) to the H2 and p only, but it didn't work. I've spent tons of hours trying to fix this, but I couldn't find a solution. Any idea how to fix it?
Please, take a look in Chrome and also in Safari.
Thank you for your help!!
This is the website I am working on: http://www.mattresszombie.com
This is my html code:
#prueba-block1 {
display: block;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
height: 150px;
background-color:rgba(0, 0, 0,.4);
margin-top: 90px;
margin-bottom: 110px;
color:#fff;
text-align: center;
position:relative;
z-index: -7;
}
#prueba-block1 h2 {
font-size: 1.2em;
font-stretch: expanded;
}
#prueba-block1 p {
font-size: 1.1em;
letter-spacing: 1px;
line-height: 0.8em;
}
<div id="prueba-block1">
<h2>We are going to make mattress shopping simple!</h2>
<p>This is an informational website to provide the facts about mattresses.</p>
<p>We have no affiliation with any manufacturer, any retailer, any website, nor any brand.</p>
<p><strong>Let's get started!</strong></p>
</div>
Tis not about color transparency, it's all about z-index
Please set
z-index:1 to #fixed
z-index:-1 to #container
and remove z-index: -7 from #prueba-block1
Actually whenever there are two lines in title, it gets very close, which makes it hard to read. So can anyone tell custom CSS that I add for space in between H1 tag in Tittle?
You can change your H1 tag in your css to have a larger line height
h1 { line-height: 20px; }
Using line-height
.page-title {
line-height: 40px;
margin-bottom: 20px;
}
<h1 class="page-title">Very Very Very Very Very Long Long Long Long Page Title</h1>
Adjusting the line height should fix that
h1 {
line-height: 1.4;
}
Try to work with padding. Padding basically let's you put in some extra pixels in the wanted direction. So for instance: for your title to stay in position on your screen, add 5 px of padding-bottom.
looks like this
padding-bottom: 5px;
...or whatever amount of space you want in there but this is basically how you do it.
As per your template Link you provide at comment, You are talking about this line,
"Use Of Computer Increases To Keep The Record"
Solution:
First open style.css, then got to line 2535 or find,
article.post.hentry h1.entry-title, article.post.hentry h2.entry-title {
line-height: 26px;
margin-bottom: 10px;
Increase line-height property 26 to 36 line-height: 36px;.(increase as it looks goods to you)
This was before
This is after
It's worked for me, Let's take another try,
Try using this line-height: 36px!important;
I am working out of wordpress. I have tried using inspect element to move a line of text that is basically overlapping another line of text in the ecwid plugin.
It does not seem to work, every time I edit the css code by using margins or padding attributes nothing happens
On my page where it says $205 for the product , was $295 is touching it and I want to separate that from the actual price.
How can I achieve this?
I have tried using this code
html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-compareTo-container{
padding-bottom: 5px;
}
here is a look at exactly what im reffering to
https://surveillanceshack.com/store/#!/Elec-Surveillance-system-w-4-bullet-&-4-dome/p/55396210/category=0
Add a line height like this:
html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price {
font-size: 24px;
font-weight: 400;
color: #a20505;
white-space: nowrap;
line-height: 21px;
}
Both of your prices are included inside the same div. When you have text that wraps, the only way to separate them is to define a height between the lines.
To fix your checkout problem fix the line-height there as well on this class:
.hentry table, #comments table {
margin-bottom: 1em;
font-size: 80%;
line-height: 21px;
}
If you want to fix this problem in one single CSS set of instructions do this instead:
.hentry table, #comments table, .ecwid-productBrowser-price {
line-height: 21px;
}
The issue is that it is a span element, which does not really accept margin / padding well.
The element in question is this:
html#ecwid_html body#ecwid_body .ecwid span
So, to make it have space above it, you can add this style to the stylesheet (at the end):
html#ecwid_html body#ecwid_body .ecwid span {
display: inline-block;
padding-top: 15px;
}
Adjust the padding-top to suite your desired layout.
Alternatively, you could do this by increasing the line-height of the element (in which case it does not need to be display: inline-block):
html#ecwid_html body#ecwid_body .ecwid span {
line-height: 2.5em;
}
It is a span element, to make padding active, you need to add :
{
display :inline-block;
}
You can set padding for "was" element.
html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-compareTo-container, html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-save-container {
padding-bottom:5px;
}
(Ecwid team here)
While the answers here can help to fix the issues yourself, we will investigate how Ecwid works with your "DMS" theme and make sure to fix those on our side. The issue is already in our devs queue, we will roll out the solution in one of the Ecwid plugin updates in the near future.
I'm trying to put a dropcap in a paragraph by using a . I think I found the correct workflow and tested it already in another area of my website, it worked great. When I want to apply the same technique to the desired paragraph, the content, the first letter of the paragraph, changes when viewed in browser to "03/". I've tried several different options but always same outcome.. When I inspect element in chrome, it shows "03/" as content, which is not correct. Does anyone know what might cause this?
css:
#services .firstcharacter { /*displays /03 instead of character*/
float: left;
color: #000;
font-size: 75px;
line-height: 80px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia; }
html:
<p><span class="firstcharacter">N</span>ulla...</p>
paragraph screenshot
Thanks!
EXTRA INFO
At first I removed #services, but no changes.. Afterwards I wrote code differently like this:
CSS
.service p.char a{
float: left;
color: #000;
font-size: 75px;
line-height: 80px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: serif;
}
HTML
<p class="char"><a><span>D</span></a>ulla...</p>
But nothing changed.
When I inspect the element in browser (chrome), the span's content has changed to 03/. But when I change it there, the character "D" or whatever is displayed correctly.
Can't really see where this error might be.. I checked my entire code for the "03/" combination as well and changed font settings, but no luck there either.
As I don't know full code, I can only suggest you removing #services from css. Or add <meta charset="UTF-8"> to <head>. Or both.
By dropping the in html, I solved the problem..
Now I have my solution, but would still like to know why this happened.
Thanks for the replies and for helping me find the cause.
I'm trying to get a div to be centered on the page. however WordPress isn't cooperating and doing it like it does in my testing HTML document. Any ideas?
HTML
<div class="propreq grid_4"><h2>Request a Proposal</h2></div>
CSS
.propreq {
margin: 0 auto;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
background-color: #0e7bd0;
}
Looks like it's because of a couple things. Try adding the styles below to your current definition (or changing them, if they're already there):
.propreq {
display: block;
float: none;
}
Before, .propreq had display:inline, float:left applied to it, making the styles you were applying to it ineffective. I hope this gives you what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
There could be Several reasons.
1st: Try examining the CSS using Developer's Tools (in Chrome/FireFox).
There could be another CSS rule which is OVER-RIDING your this one.
2nd: Try using
<div align="center" class="propreq grid_4"><h2>Request a Proposal</h2></div>
My best guess is, Another CSS-Rule is overtaking the Center Property.
.propreq {
margin: 0 auto;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
background-color: #0e7bd0;
}
TIP: Do a quick search on "Examining using FireFox Developer Tools" | Check out for the text-align: center; in .propreq section.