I'm trying to increase the bottom padding of my headline in my blog and for some reason it is not being possible.
This is the code that I'm writing to increase the padding:
.post .type-post .entry-content h1.entry-title{
padding: 0 0 50px;
}
Entry-title and Entry-content are the classes for H1 element.
Here is the link of the page where this issue exist -> https://www.writtenlyhub.com/writing-product-description/
I think this will help you in understand my problem better.
Please do help me out here.
Thanks
Simplest would be to use padding-bottom: 50px;
While there is nothing wrong in using shorthand, there is a recent video from Kevin Powell explaining some gotchas, I recommend you should watch it and some other videos on his channel.
.post .type-post would select an element with the class type-post, that is a descendant of an element with the class post - but you don't actually have that in your structure.
You have one element that has both classes - so the spacing between the two classes in your selector needs to be removed,
.post.type-post .entry-content h1.entry-title{
padding: 0 0 50px;
}
Related
I'm having some frustrating trouble with my FAQ accordions at the bottom of the following page.
I need to put about 50px of space in between them, but nothing seems to be working.
Any suggestions?
Try adding to your css:
.accordionButton {
margin: 25px auto;
}
.accordionContent p {
padding-top: 10px;
margin-top: 0;
}
div.accordionContent {
margin-top: -25px;
}
Hope this helps :)
Step 1: Wrap each question and answer in a div in my example I've given it a class container
Step 2: Remove float:left from your styles
Step 3: Add margin-bottom to the container
.container {margin-bottom:50px;}
Example: http://jsfiddle.net/c6Kvz/2/
For a tidier more semantic version please see: http://jsfiddle.net/VyzqR/. This uses CSS for the hover effect instead of javascript. Feel free to replace th h2 tag with what ever hx tag mages the most sense for your document layout, just don't use h1!
You may also want to investigate CSS Sprites for your background images. This will reduce filcker while the images load on hover or click.
I'm very inexperience with html and only know the basics for my Tumblr blog. My question is probably very simple but I'm very pissed off at it and I'm losing sleep because I will not sleep without fixing it. So waaay in the beginning of my code, I have:
.post img { width: 100%; }
and then waaay later in the code, I have:
div class="asker-info"><img src="{AskerPortraitURL-24}" alt="" class="asker-avatar" /> {Asker}></div>
My problem here is that whenever someone asks me a question, their avatar appears 20x literally the size it should be. I've checked it out on Google Chrome's "inspect element" and found that the .post img part of my code cancels out with the width part in this section:
.asker-avatar {
float: left;
width: 24px;
margin: 5px 10px 5px 10px;
}
I'm so goddamn pissed off and nothing makes sense
Could you try this and tell what happens ?
Here you create a css class with the image size you want. You set the width what you want, and the height auto, it must pick a good value depending on height
.asker-avatar
{
width: 24px;
height: auto;
margin: 5px 10px 5px 10px;
}
Another question, can you put here the asker-info class you use in the div ? Could be that class the problem with your img ? And maybe you could try to remove the .post img {width:100%} because can make the img to resize to the 100% width of the div
And here you can practise with images sizes and resizes, and you can read some explanation about the img attributes, it's an useful page:
HTML_IMAGES W3SCHOOL
I fixed it!! Oh my god, am I relieved! I noticed that my own avatar was not affected by the .post img so I looked over the class and found out that by simply adding an id="_", you can change it!!
It's not working because the CSS selector .post img is "more specific" than the selector .asker-avatar.
Since .asker-avatar appears lower in the style-sheet that .post img, it will be enough to make that selector as specific as the one you want to override.
I'm not an expert on CSS specificity (this guy is), but try changing the .asker-avatar selector to img.asker-avatar (note - no space between img and .).
I'm using Zurb Foundation 4 for the first time to build a friend's small picture folio site.
Testing # http://wagonbroadcastservice.org/ktest/
The layout is meant to be quite simple: a grid of images. Using "block grid" seemed appropriate, but the problem that I've run into is that I need each image to be vertically aligned to the middle, rather than the top of each row. I'm having issues figuring out what code I need for that.
I came across one thread that I thought might have answered my questions, but the proposed answer doesn't seem to work at all.
Can't get image to align to bottom of div with Foundation block-grid class
Does anybody have an idea what I might be doing wrong?
Your actual "problem" is caused by this style rule (in app.css line 1123):
[class*="block-grid-"] > li {
display: inline;
float: left;
height: auto;
padding: 0 0.625em 1.25em;
}
You can test it by changing the rule-set to:
[class*="block-grid-"] > li {
display: inline-block;
height: auto;
padding: 0 0.625em 1.25em;
}
inline-block has some other drawbacks, like the white-space issue. There are 2 options to avoid the unwanted margins between the elements:
1. remove any white-space and line breaks from your HTML markup
2. set the font-size of the parent element to '0'
Using Frameworks isn't always the best/ easiest solution! ;-)
And as I don't know "Zurb Foundation 4" I cannot help you more - sorry.
I'm trying to remove the margin in the screenshot attached (see http://goo.gl/tbw4V), but I can't for the life of me see where it is in my WordPress stylesheet to remove it! I was hoping someone on hear could possibly help me? I have checked the H1, H2 tags, .bylines DIV and paragraph tags but nothing seems to be pushing the entry information approximately 15 pixels below the header. My website is at http://gracefulpostcards.com
Thanks for any help,
Steven.
To adjust these styles is highly recommended that you use the Firebug extension for Chrome or Firefox. So you can debug the html page and styles.
In your case, simply set the property margin-bottom of selector .singular .entry-title with 0:
.singular .entry-title {
margin-bottom: 0;
}
in style.css line 753
.hentry .entry-title {
margin: 0 0 0.6em 0;
}
Look in style.css, the style starting at line 753.
How I found it? Google Chrome -> Right click -> Inspect element.
The margin is defined under the selector .hentry .entry-title. It's margin: 0 0 0.6em 0. Just make it 0.
.featured {
margin-bottom: 20px;
}
Is the CSS rule you have to change.
If this is the page you are talking about : http://gracefulpostcards.com/why-start-a-personal-blog/#.UKGMi4csDng
then removing this CSS rule deletes the margin-bottom perfectly.
After inspecting your page, it seems that h2.entry-title has a margin-bottom
To fix this, add the following to your css:
h2 {
margin-bottom: 0px !important;
}
I have a website (http://www.errandly.com) and would like to raise the height of the "Copyright" blurb at the footer. I know little about html and css - and have tried searching for answers online and on your site. I am using weebly (an easy drag-and-drop website making site that allows me to change the html and css), and I have pasted the footer's html code below (but not sure what to do with it - or css - in order to raise the height of the footer:
{<div id="footer">%%WEEBLYFOOTER%%</div><div align=center>© Copyright <a href='http://errandly.com/'> Errandly Errand Services Ltd.</a> 2011 All Rights Reserved</div>}
I would greatly appreciate any help.
Thank you,
Jack
If you're trying to make the element larger, you've a few options:
Increase the font-size of the element: font-size: 2em; for example.
Apply padding: padding: 0.5em; (to apply padding of 0.5em to top, right,bottom and left of the element).
specify the height directly: height: 3em;
I'd also suggest applying an id to the element: <div id="footer">, and using that as a hook for the css:
#footer {
font-size: 2em;
padding-top: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.5em;
padding-right: 0.5em;
height: 3em;
}
As an alternative interpretation of your question, if you want to simply move the element a little higher from the bottom of the page, you can use:
#footer {
margin-bottom: 2em;
}
I think the issue is that you posted your copyright note below <div id="footer"> ... </div>, and your cms created a new element after the footer for it.
Easiest way to fix would be to copy your copyright notice inside the footer-div. Or you could edit your css, find the block that starts with #footer and set the line "padding: 35px 0 20px;" to "padding:0;"
You can use css style attribute to change the size of your div tag
<div style="height:100px" id="footer">%%WEEBLYFOOTER%%</div><div align=center>© Copyright <a href='http://errandly.com/'> Errandly Errand Services Ltd.</a> 2011 All Rights Reserved</div>}
Well first off you want to try add tags in your HTML file between the tags of the Footer. Then if you want to change the position of the text within the div of the Footer, just add this code...
#footer p {
line-height: 25px;
}
Of course 25px is just an option but you'd always want to adding padding at the top and below of the paragraph attribute.
Hope this helps,
Thank you,
Aaron