changing font-size and line-heigth wordpress - css

I tried changing fontsize and line-height of all blog-posts, but doesnt work. What am I doing wrong?
Example Page: http://neuronade.com/kopie-sdfsdf-3
Tried Code:
.mk-single-content{
line-height: 1.5em !important;
font-size: 120% !important;
}

Change that selector to
.mk-single-content * {
line-height: 1.5em !important;
font-size: 120% !important;
}
This selects all elements inside the .mk-single-content elements. If you only want to address particular elements inside, use their tags instead of "*"

You have to target each element inside the mk-single-content div.
For example:
.mk-single-content p {
font-size: 120%;
line-height: 1.5em;
}

Well this styling is working perfectly. May be you need to clear cache.

Related

Changing css for WooCommerce Billing Fields

I want to change the CSS styling for the first page of my WooCommerce checkout page to make the font larger and increase the margins around the input box. Here is my website:
I used the following code and put it in my child theme on style.css but it doesn't seem to work:
.woocommerce-billing-fields label {
font-size: 55px;
line-height: 23px;
color: #222222;
}
Changed the font size to 45px.
Am I putting the wrong code into my style.css folder?
You might want to add the !important keyword to ensure that the property overwrites any previously set property :
.woocommerce-billing-fields label{
font-size: 55px !important;
line-height: 23px !important;
color: #222222 !important;
}

How can I add padding to an element on my page?

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.

Applying font size to a div and selector priority for * tag

This may be a bit stupid, but I'm having a problem with the font size of text inside a div.
In my CSS I have used
*{
font-size: 16px;
}
#newsletter{
font-size: 14px;
}
When I do this Chromes Element Inspector shows that it is using the 16px from the * selector.
When I use
#newsletter p{
font-size: 14px;
}
That works, I know that It uses that because it is a more specific selector, but why doesn't it pick up the 14px set to the #newsletter selector, it is further down in the CSS so it should take priority, does it not work because the * selector takes priority for some reason, or does setting font-size on a div not work, does it have to be on the #newsletter p selector instead.
Try
#newsletter *{
font-size: 14px;
}
You probably want to apply the font-size to all children of newsletter
When you have any element (p in this case) inside another element (the element with id=newsletter in this case), then the styling of the inner element is always based on its own CSS properties. In this case, the only rule that assigns font-size to the inner element is *{ font-size: 16px; } so it takes effect. Anything that you set on outer elements cannot possibly affect this.
This is part of the CSS cascade.
If you want to set a fixed font size for the element with id=newsletter and all of its descendants (inner elements), you can set
#newsletter, #newsletter * { font-size: 14px }
A more structured approach is
body { font-size: 16px }
#newsletter { font-size: 14px }
When you don’t otherwise set font size, then elements will inherit from body or from the element with id=newsletter, depending on their placement.
An even better approach, with the same basic logic but with font size automatically adjusting to browser settings (user preferences) is
body { font-size: 100%; } /* logically not needed, helps against some bugs though */
#newsletter { font-size: 0.875em; } /* 14/16, giving 14px for body font size 16px */
Alternatively, use body instead of *. That will achieve the same thing without having specificity issues.
body {
font-size: 16px;
}
#newsletter {
font-size: 14px;
}

I'm using SpryTabbedPanels in Dreamweaver and I need to change the menu font size only?

In SpryTabbedPanels.css trying to add this code
.TabbedPanels {
overflow: hidden;
font-family: tahoma;
font-size: 1em;
margin: 0px;
padding: 0px;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}
But the font size here apply to the content too, But I need it to apply only to the head menu.
thanks
There is no way you can do this in an 'easy' way. All the parent css rules get inherited by child nodes unless overwritten. So if you want to make sure that all the elements inside .TabbedPanels will not inherit its font, use:
.TabbedPanels <elements you need styled> {
font-family: <your desired font>;
}
For example, this will reset font of all the nodes within .TabbedPanels:
.TabbedPanels * {
font-family: auto;
}

How to size this text with css?

I am having some trouble with a font size with CSS. Below you see I have .post I have < pre > tags that are nested inside of the post class so should the css I have for the pre tags work below? It is not working but I can't figure out why? The text inside my pre tags end up being 15px instead of 12px
.post {
width: 100%;
clear: both;
padding: 10px 0;
border-bottom: #CBCBCB 1px solid;
background: url(images/post_element.gif) no-repeat 126px 21px;
font-family: arial;
font-size: 15px;
}
.post pre{
font-size: 12px;
}
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
.post pre{
font-size: 12px !important;
}
Should work, but to answer your questing we need to view all html + css because it really depends...
In a vacuum, that code should work. However, base tag styling can vary browser-to-browser and <pre> tends to be a bit of an odd one. My first thought is that some other style is overriding it.
Have you used Firebug (or some other developer console) to take a look at the styles being applied and the computed style for the element? That should put you on the right track.
This was a weird issue, I had to end up changing the class and font size for all the other text, everything except the pre tags to get it to finally quit resizing after page load from my JS syntax highlighter

Resources