Wordpress twentysixteen theme removing all the unnecessary spacing in theme - css

Basically this is one question but might need a multi part answer to remove the excess spacing. Basically the problem occurs when setting the featured image on a post on the default twentysixteen theme. I have a live test environment setup to show this here: http://192.241.239.174/index.php/2016/11/02/hello-world/
Here is a shot of how it currently is vs what I'm expecting it to look like: http://prntscr.com/d204p5
Thank you for any help
Edit: Further researching similar questions I have gotten slightly closer by using some custom css to change the thumbnail/featured image max width to 150 which should be fine as all my featured images are going to be 150x150 anyways. This code was added into custom css:
.post-thumbnail img {
float: left;
margin: 5px 15px 10px 0;
max-width: 150px;
}
Now the text does appear slightly higher but still fails to wrap the thumbnail and is still not close enough to the thumbnail. I'd like to have the text closer to the thumbnail
EDIT: Complete solution
The complete solution I used was adding this code into my custom css:
.entry-footer {
display: none;
}
.post-thumbnail img {
float: left;
margin: 0px 20px 0px 0;
max-width: 150px;
}
body:not(.search-results) article:not(.type-page) .entry-content {
float: none !important;
width: 100%;
}
.entry-content > :last-child {
margin-bottom: 0;
text-align: center;
width:100%;
}

i don't think that's the better choice to make in fact i would have setup a child theme and worked on it, by the way:
.entry-footer {
display: none;
}
.post-thumbnail img {
float: left;
margin: 0px 20px 0px 0;
max-width: 150px;
}
body:not(.search-results) article:not(.type-page) .entry-content {
float: none !important;
width: 100% !important;
}
.entry-content > :last-child {
margin-bottom: 0;
text-align: center;
}
You may need to add !important keyword if something doesn't work.
The result: Is that like what you wanted?

Related

How do I fix my logo from overlapping my menu?

My logo is overlapping my menu bar I just went to space it from overlapping
I tried changing the code but I'm a novelist so I really don't know what works I know about HTML but it's not the same.
.navbar-nav > li > a {
font-size: 20px;
}
.nav { right: 10px; }
Whenever I change the code it messes up the font size and it still over lamps
Here is the website:http://143wear.com
As you are using WordPress, through Admin dashboard you can set the max-width: 146px; to Logo,
Else you can use the following code into CSS,
By using this code there will be least chances for responsiveness issues,
In case you need bigger logo, you have to customize the code.
.site-header .logo img {
max-width: 146px;
}
.container {
width: 100%;
}
.header-logo {
width: auto;
}
.header-right {
width: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
justify-content: space-between;
}
Would be a working solution (might need some improvements for responsibility)

CSS: Can't alter css class within a div

I have been working on this for about 45 minutes and I'm sure the answer is ridiculously easy, I'm just not getting it. I need to take out the width element of .content (width:760px). However, when I change the CSS (it's a wordpress.com site, which is why I have to use the customizer and can't just do this via the editor) it just ADDS a content class and doesn't change the one in the stylesheet.
This is what's in the stylesheet, the site uses the content-sidebar-wrap style:
/* Wrapping div for .content and .sidebar-primary */
.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
width: 930px;
}
.content-sidebar-sidebar .content-sidebar-wrap {
float: left;
}
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
float: right;
}
/* Content */
.content {
background-color: #fff;
border-radius: 3px;
float: right;
margin-bottom: 30px;
padding: 40px;
width: 760px;
}
Because it is a wordpress.com site, not wordpress.org, we can alter the CSS in the "customize web" tab.
In your "customize web" tab, try putting this:
.content {
width: initial !important;
}
Then the 760px width would be taken out.

Floating image overlaps container. Clearfix hasn't worked

I have literally been trying every clearfix hack that I could find for hours and nothing is working. The paving photo at the bottom right always goes outside the content container. This is currently what I have:
.content {
margin: -10px auto 10px;
padding: 10px;
}
#paving_photo {
float: right;
margin: 10px 0 10px 10px;
border: 2px solid black;
width: 300px;
height: 300px;
}
.content:after {
content: "";
display: block;
height: 0;
clear: both;
}
This is the page: website template
I have tried the clearfix hack and micro hack. I have added the clearfix to the content class. I have tried overflow: hidden|auto. I have tried adding the clear: both after the floating element. Literally nothing as worked.
I'm at my wits end. Please help!
Thanks!
It seems fine on FF on my end, with the exception being when the screen height is less than about 791px. I think this is due to .outercontainer height is set to height:100%.

Footer ul margin bleeding into body... sometimes

Ok. This is really weird and I have spent countless hours in vain searching for anything similar. I will add code, but you'll need visuals as well, so I'll include a couple of cropped images to show you what I mean.
My goal: Simple. Push my horizontal nav bar in my footer about 25px below the top edge of the footer. (Footer has a static background image)
Code used: #footer ul {margin:25px}
Result: No change.
HUH? So I played with it... tried several variations, but nothing worked. NOW, I did find a workaround... used padding instead of margin... but it bothered me that margin wouldn't work so I kept trying to figure out if I messed up my code somewhere.
I used float in the body, but I cancelled it out. Validations all came out ok. So I accidentally stumbled upon Firebug (never used it before... and still don't know how) but in my aimless clicking, I noticed something odd... when I clicked onto my footer ul, a box overlapping the footer and content was highlighted. So it appeared that my margin did exist, but instead of pushing my nav list down... it kept the nav list static, and expanded into the content.
HUH? So I did a little experiment. I created a bright border around the divs in my content and footer and ul to figure out exactly what was happening. (My content section has three divs: content (floating left); sidebar (floating right); and contentWrapper that contains both).
With the borders on, I noticed that my 'outerContent' div was collapsed. A mere 20% or so of the height of the area. So after some (lengthy) research, I came up with the overflow-auto fix. And although I still don't quite understand it, it worked. The contentWrapper expanded to meet the footer, and the footer ul moved to where I wanted to.
So problem fixed, right? Well..... not exactly.
My previews did fine, so I went back in and deleted the borders so I can get on with the rest of the formatting. Only when I previewed again... the footer ul was right back where it started. At the very edge of the top of the footer.
I did the borders again... the divs seemed fine, except that the contentWrapper was now pushed slightly above the footer to allow for that margin.
Now the REALLY weird thing is that when I put the border around my footer... the ul margin works. When I take it off... the ul goes back to where it was.
What the #$#%!? Although I know of the workaround (the padding) I am worried about compounding whatever mistake I have made and repeating constantly in the future (I have to build another website after this). If someone can figure out what I did to screw things up... it would be GREATLY appreciated.
#contentWrapper {
overflow: auto;
padding: 20px 10px;
}
#content {
float: left;
width: 660px;
}
#content h1 {
padding: 0 0 20px;
}
#content h2 {
padding: 20px 0 10px;
}
#content p {
line-height: 160%;
text-align: justify;
}
#content img {
float: left;
margin-right: 10px;
}
#content ul {
line-height: 160%;
list-style: disc outside url("../images/Bullet-artsy1.png");
margin: 0 0 10px 325px;
padding: 10px 0;
}
#content .info {
margin: 5px 0 10px 250px;
}
#rightSide {
float: right;
line-height: 140%;
padding: 0 10px;
width: 220px;
}
#rightSide h2 {
margin-top: 10px;
padding-bottom: 10px;
}
#rightSide p {
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 16px;
text-align: justify;
}
#rightSide img {
display: block;
margin: 5px auto;
}
#footer {
background-image: url("../images/TCS-Footer1b-plain-230px h.png");
background-repeat: no-repeat;
clear: both;
height: 230px;
}
#footer ul {
list-style: none outside none;
margin: 25px;
text-align: center;
}
#footer ul li {
display: inline;
margin: 30px 0;
}
#footer ul li a {
color: #E8FAFF;
padding: 30px;
}
#footer p {
color: #E8FAFF;
text-align: center;
}
#footer img {
bottom: -60px;
position: relative;
right: -900px;
}
The site is not active, but I've uploaded a word doc with images showing what I am talking about. This is the link to Temp Share: http://temp-share.com/show/dPf3UCobW
Thanks in advance to everyone who can perhaps show me where I went wrong.
First, to prevent your margin from disappearing, either change the margin on the #footer ul element to padding, or add one px of padding to the #footer element.
In this fiddle, we've set the padding on the #footer to 1px and reduced the height by 2px to compensate.
FIDDLE
#footer ul {
list-style: none outside none;
padding: 40px;
text-align: center;
}
or
#footer {
background-color: #DDDDDD;
background-repeat: no-repeat;
clear: both;
color: #808080;
font-size: 12px;
height: 228px;
padding: 1px;
}
looking at the css, your padding settings on the <a> tags won't work the way you expect, since by default they are aren't block elements. Add this to the css to have them padded correctly:
#footer ul li a {
display: inline-block;
}
likewise, your ul li should be inline-block.
so ...
#footer ul li {
display: inline-block;
margin: 30px 0;
}
#footer ul li a {
display: inline-block;
color: #E8FAFF;
padding: 30px;
}
Basically, just be aware that when top and bottom margins touch, including those of parent and child elements, the largest margin is used, but the margin is pushed outside the outermost element.
I tested it using firebug and working fine. If you have problem you can add !important at the end as this
#footer > ul {
margin: 13px !important;
}
And even what you would like to do is to get some margin before and or after the ul. For this you could set margin and/or padding value to your #footer.
Hope this help!
This is for future reference. I simply wanted to add the following link to compliment Dom Day's above. I am still having difficulty conceptualizing the event but between the two links, it will help me research it until I find the equivalent to an 'adjoining/collapsing margins-for-dummies' site. www.w3.org/TR/CSS2/box.html - Details near the bottom of the web page.

wordpress div to align like a gallery

I am not sure what i can do to fix it but I am unable to use css to align the images in 1 row and then another row like a gallery. Can anyone help. I have tried to float the div entry to left and still unable to get it correct.
here is the css for entry
.entry {
clear: both;
margin: 0;
padding-top: 1px;
}
Add
display:inline-block
to your div class .wp caption
See this article http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ as there may be some issues with Cross Browser but i think its only IE6, maybe 7
so in your case
.wp-caption {
border: 1px solid #a87c31;
text-align: center;
background-color: #10050B;
padding-top: 4px;
margin: 10px;
display: inline-block;
}

Resources