I'm trying to reduce the space above and below the sidebar widgets as well as reduce the space between the blog posts on my Wordpress site, but I can't figure out how. I've searched all over the internet and tried inputting code that worked for other people into both the theme's style sheet and the "Additional CSS" area, but to no avail.
Here is a link to the page so you can see what I'm talking about: https://www.swissarmymusician.com/articles/
If it means anything, I'm using the "Astra" theme (free version).
If anyone could help it would be much appreciated!
You can add the following to your style.css
.widget {
padding: 1em .65em; //1st value top/bottom 2nd value left/right; Default was 2em;
margin: 1em .65em; //1st value top/bottom 2nd value left/right; Default was 2em;
}
Regards.
Learn more about CSS units # https://www.w3schools.com/cssref/css_units.asp;
Learn more about CSS padding # https://www.w3schools.com/css/css_padding.asp;
Learn more about CSS margin # https://www.w3schools.com/css/css_margin.asp;
EDIT 1: If you want to edit the widget title you can target it with:
.widget-title {
margin-bottom: .65em; //Default was 1em;
}
Don't hesitate if you need a bit more help.
EDIT 2 Regarding last comments
.widget {
padding: 1em .65em !important; //1st value top/bottom 2nd value left/right; Default was 2em;
margin: 1em .65em !important; //1st value top/bottom 2nd value left/right; Default was 2em;
}
It's highly recommended to learn early on in your life as a website maker to use the devtools in your favorite browser (it's already installed with the browser). If you inspect your sidebar, you will see this and can then easily detect which css class you have to modify in order to make changes:
Here I'd modify the orange or yellow part at the bottom of the inspected widget div so that you either get more padding (yellow inspector color) at the bottom (padding-bottom:) or margin (orange inspector color) (margin-bottom:).
If your styles don't work you may need to add an !important flag to each line that doesn't work the traditional way so that your change overwrites the theme's own CSS styles. Best of luck with the site.
Search in Stack Overflow helped me to get an answer for aligning poetry justified for all and the last line. with the following CSS code, it works perfectly aligning the last glyph. Those who may not know, single and double vertical lines at the end of the line in Sanskrit is equivalent to full stop in English. In Sanskrit poetry, the single and double lines (full stops) also signify how they are recited and therefore alignment of these is very crucial for a reader.
This is the CSS code that helps me to align the Sanskrit poetry lines. (Using Divi Code modules).
.et_pb_code {
font-family: Sanskrit;
text-align: justify;
font-size: 20px;
color: #3C268C;
font-weight: bold;
padding-bottom: 0.1em;
max-width: 100%;
}
.et_pb_code:after {
content: '';
display: inline-block;
width: 100%;
padding-bottom: 1px;
}
Here is the example of the poetry in Sanskrit and giving the reference in small sized but different font.
The question is: How do I align the last reference line to the poetry to the right side of the poem and not to the far right of the page as shown by the first image?
I would be very pleased if there is a way through CSS to right align the reference where the poetry lines end.
I hope to achieve the results as per the picture link but haven't been able to do so.
Note: I formatted the desired outcome (second picture) in Word 2016 using textbox to right align the reference line. I, then, tried to export as filtered HTML to see how Word would handle this. But it saved the text box as image and that is not what I want. There must be some CSS solution that I am looking for tips.
Ok, So I am making a travel blog through WordPress. I have made some fiddles including maps and some tables which work perfectly in the fiddle. however, now that I put it on my site - it is messing up. I think something to do with the CSS is messing it up - but I cannot find where.
The page I am having the most problem with is located here:
http://www.journeywithandrew.com/world-heritage-sites-reviews-info/
Problem (1):
The maps infobox (when an icon is clicked) is not displaying the CSS correctly.
Fiddle is here: http://jsfiddle.net/4V7en/4/
You can see what it is supposed to look like.
Problem (2):
The fusion layer I imposed is not displaying correctly when using CHROME or iOS browsers. So again, refer to the above fiddle. It displays correctly in the fiddle, and internet explorer - but not chrome. As you can see the layers is distorted in some places on my site. (like if you scroll left on the map over Australia - for example)
Problem (3):
around my check mark buttons, there seems to be a border on the table I put them in. why!?! I tried to remove this in the table (, etc) but it does not work. Not sure what CSS is causing this!
I think that is all. If someone can take a look at the site and especially using chrome you will be able to see the problems.
.caption-title-link {
text-decoration:none;
color:#41a62a;
font-size:12px;
font-family: verdana;
font-weight: bold;
}
thanks!!
1 . Add padding: 10em; to .infobox, which replaces the padding:.5em 1em at current. This should make the content sit better.
2 . Dont quite understand the issue
3 . Currently your Td is set to
border-width: 0 1px 1px 0;
Remove border-width and replace with border:none
border: none;
Thanks
Problem 1.
Table inside .infobox has a margin-bottom set. Adding .infobox table { margin-bottom: 0 } should fix it. Adjusting the td padding inside .infobox is also needed.
Em values are dependent on font-size, and in your page, you've set the font-size to 1px (vs in Fiddle, where it was 10px). Setting it back to 10px should fix the padding problems.
Problem 2. Which is fusion layer?
Problem 3. Border is coming from style.css, line 412
e.g. I have such CSS code to edit on the fly:
nav {
margin: 100px auto;
text-align: center;
}
It seems that the ONLY way to edit it through firefox's inspect element is the high light the part and overwrite it.
EVERY TIME when I try to move the cursor somewhere, delete some characters and add something new (for example, move to the position between two zeros, delete the first one and add 5 such that 100 changes to 150), it automatically brings back the characters I have just deleted. See below:
nav {
margin: 1050px auto;
text-align: center;
}
The deleted zero automatically goes back. It turns out to be super annoying to me but I couldn't get around this issue at all. Can anyone tell me how to edit the style just the way the same as people do in any text editor instead of it bringing back EVERYTHING I have deleted, making the edition totally messed up.
This hadn't hit me until now (and this is not only in webkit browsers). On all texts in like p tags, h1 tags etc... there's an extra space over and below the text.
In chrome I found this:
user agent stylesheet
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
This makes the alignment wrong in some places. And yes I'm using a reset stylesheet and no padding or margin are added. Pretty much a basic setup. Why is this and how do I solve it?
You can also directly modify those attributes like so:
-webkit-margin-before:0em;
-webkit-margin-after:0em;
Works for me in Chrome/Safari. Hope that helps!
These -webkit-margin(s) are overwritten by margin: 0; padding: 0;. Do not worry about them.
Extra space? Maybe you've set line-height:?
I had the same issue. Displaying correctly in Firefox but not Chrome.
I had a closer look at http://meyerweb.com/eric/tools/css/reset/ and found that I hadn't declared a general line-height for the body tag in my stylesheet. Set it to 1.2 and that recreated the correct layout in both browsers.
Just remove the whitespace between tags e.g.
<p id="one"></p>
<p id="two"></p>
becomes:
<p id="one"></p><p id="two"></p>
I had a same problem. Extra space between menu links. None of the above solutions worked. What worked for me, was negative margin.
Just do something like this:
margin: 0 -2px;
NEW EDIT:
This has nothing to do with -webkit-margins. Most likely your problem occurs with inline elements. This happens because you have spaces or line breaks between your inline elements. To fix this, you have many options:
remove all spaces and line-breaks between inline elements
skip element closing tag - for example </li> (HTML5 does not care)
negative margin (as stated above - problems with IE6/7 - who cares, upgrade ;)
set font-size: 0; to problematic inline element container (has issues with android and if font-sizing with ems)
give up inline and use float (this way you loose text-align:center)
Explained more specifically and examples by CHRIS COYIER
I was having this same problem with my <h3> tag. I tried setting margin:0;, but it didn't work.
I found that I was habitually commenting out lines in my css by using //. I never noticed it because it hadn't caused any problems before. But when I used // in the line before declaring <h3>, it caused the browser to skip the declaration completely. When I traded out // for /**/ I was able to adjust the margin.
Moral of this story: Always use proper commenting syntax!
For me, the picture was:
* {margin:0;padding:0;}
Firefox (FF) and Google Chrome both put 0.67em margins regardless.
FF showed its default margin, but crossed out, but applied it anyway.
GC showed its default margin (-webkit-margin-before...) uncrossed.
I applied
* {margin:0;padding:0; -webkit-margin-before: 0; -webkit-margin-after: 0;}
but to no avail, although GC now showed its default margin crossed.
I found out, that I can apply either
line-height: 0;
or
font-size: 0;
to achieve the desired effect.
This makes sense, if one assumes, that the margin is of the .67em - type.
If anybody could give an explanation, why browsers make our lives miserable by applying a line-height dependent, non-removable margin, i would be really grateful.
For me in Chrome it was some 40px padding-start that was causing this. I did the following that worked:
ul {
-webkit-padding-start: 0em;
}
-webkit-margin-before: 0em;
-webkit-padding-start: 0;
-webkit-margin-after: 0em;
This solved it for me when I was having this exact problem.
In your css file add the following.
* {
-webkit-margin-before: 0em !important;
-webkit-margin-after: 0em !important;
}
'*' selects all css elements and overrides the webkit-margin.
Modern properties
The following properties should be used instead.
margin-block-start: 0;
margin-block-end: 0;
It's very rare to need to use these at all, but the following can be useful to avoid extra space after the last paragraph in a series.
p:last-child
{
margin-block-end: 0;
}
I also found that even in Chrome you can trigger the 'ghost margin' by setting margin to inherit in some cases.
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start
I had the same problem. Suddenly one out of my three table cells containing data its header was moved down a little bit. My problem was simply solved by adding this:
table td
{
vertical-align: top;
}
Seems like some other element in a 'higher' style sheet was telling my data to center itself in the cell, instead of just staying on top.
I guess its just stupid, and wasnt really a problem... but the next person to read this topic might have the same stupid error as i did :)
Take care!
If user agent stylesheet is kicking in, it is because the tag property was not properly defined in your css stylesheet.
Chances are that a typo, forgotten bracket or semicolon is breaking up your stylesheet BEFORE reaching the tag property settings your page later refers to or "needs".
Run your CSS thru error checking, like CSS LINT and fix whichever errors are eventually detected.