I want to know that how can I reduce the space gap after the header of the blog. Let me be specific, The space gap after the header menu and before the main content body.
I don't really have too much CSS knowledge, but after looking at the massive CSS code of the theme, I was a bit confused and decided not to play with the code. So, a little help needed here.
Link - Thats Breaking
Theme - Newspaper
Blog platform - WordPress
Let me know if I missed any info.
what you are trying to do is set the margin or padding of the header or the body.
You can either use padding or margin, depends on the visual effect you want to get.
margin
padding
To get faster results, you can:
In the web page you linked righ-click on the body container you want to change the space gap
Look for this in the css code inspector:
td-main-page-wrap {
padding-top: 48px;
}
Notice that the withe space is set with that attr.
For example, if you change that in the inspector from 48px, to 0px, automatically header and body content gaps together.
After that you shall change it in you css code. search for td-main-page-wrap.
You can change top, bottom, right or left Margin and Padding too.
Take care if you modify the css of the template, because the class or elements will probable be used in different views. Just in case you see all broken :p
Related
I'm working on a Wordpress website and I use the custom CSS to change small things from the template. So I only know how to work with html and CSS.
But now I have a problem...
After uploading my logo, the header seems to stretch slightly out of proportion. There seems to be too much padding above the logo, more then below it, which makes it look uneven and the header just looks slightly too large on the whole. There is just too much white space in it… Whereas it was slimmer and a lot more streamline before uploading the logo.
The page I need help with: https://delizabeth.nl
Is there any way someone can help me fix this.
Your header has a max-height of 200px.
With the image added the way it is, the actual content exceeds that height and is cut off at the bottom.
The logo has padding around it and margin at the bottom. Since it only has margin at the bottom, the text doesn´t get verticaly centered to where the center of the image is but to the middle including the margin.
If you remove the padding and the margin around the logo, then the extra whitespace will disappear and only the padding from the header itself will remain.
It then all fits inside the max-height so nothing is cut off.
I don´t know how that theme works, but if it always has the same ID then the css would be:
#media_image-11 {
margin: 0;
padding: 0;
}
you need to set class[widget] (padding: initial;) and you can set image height and width.
I am trying to create my personal website.
However there is a blank space above the footer i cannot eliminate.
You can find online my website here:
http://www.gx-personal.site/index.php
There is an unexplained blank space above the footer which is more visible at interests and contact pages because the color of background is different.
I have reviewed my code many times looking for padding and margins that might create that to no avail.
The problem seems to be the main tag.
The blank space behaves differently depending on the main's tag display property.
More specifically:
Block will crate space above and below the main section.
Grid (existing) creates blank space below.
Inline-block eliminates the blank space above and below but creates blank space on the right.
To help i will provide the following info:
Each page has 2 css files.
One that manages the header/ main navigation menu and footer and is common for all pages called mysite.css
And a specific css for each page.
The easier way to see the problem is with the interests page as there is no content there.
i have included some comments into the css files to indicate what the problem might be.
How can i eliminate this blank space and why is it created in the first place?
Thanx.
You have the following content after a script tag just above the footer:
It is rendering with 0 width but 19px of height in Chrome.
One of your bottom classes, "phome", has a margin-bottom of 274.075px directly inline.
And it is also an empty one, so I would look there first.
I've been trying to remove the white space behind my header. FYI, I've set the Header Bakcground to transparent, but certainly the main (body post) background still looks white.
If I change the main background to transparent, which will make the header turns clear, the body post will obviously turn clear as well. But I only want the header to be clear.
I tried the trick from here: http://www.blogdesignsbydani.com/2013/02/how-to-make-your-own-custom-blog.html (Step 5-6) about last year. But I can't apply the same trick with my current blog: http://silvertreasure.blogspot.com.
Can anybody take a look and see what's wrong with my blog this time?
You might have to move your tabs-outer div outside of the main container to achieve the look you desire. I can only guess that you want something like this because your description is not clear and the right click block on your blog would not allow me to perform edits more than once. See the attached picture to see how if it should look like this.
You can then proceed to adjust your widths and background-colors to match your needs.
If all you're trying to do is move the main content down below the menu, do this:
.fauxborder-left {
margin-top: 20px; /* or whatever */
}
You may also need to apply it to .fauxborder-right.
This website is built with a back-end web to print service called Zoo Printing. The client I work for does not like the original design so I've being hired to re-design it with the development team that handles the back-end. I replaced their old navigation menu with the current CSS mega navigation that's on the site. Their developers decided to keep their code on the website for back up just in case they need to roll-back to the old navigation. The issue is even though their code is commented out, it creates a huge white space between my CSS slideshow and footer. Their developers are blaming my code and will not tell me where the problem is coming from. Can one of you inspect my code and tell me what would be causing this? I've tried simply removing the white space with CSS by absolute positioning it off the page, but when i do this the footer changes on every page except the home and it also removes my CSS slide show. I can not figure out how to remove this white space without messing with my layout.
The website is Advanced Litho
body > div:nth-child(4)
This is the div that's creating the issues with the layout. So far I've tried to absolute position it off the page with no luck.
There is a div at the bottom that is making the space huge, it is right above the commented out content and right below the div with id=content. All of these boxes have a visibility of hidden which does not delete them from your page, it simply makes them invisible. All you need to do is find that div, and insert an inline style.
<div style="display: none;">(old nav)</div>
Essentially, they just hid what they were supposed to remove.
There are unordered lists inside <div class="nav_child"></div>
If you can remove them, it is best to do so, otherwise you can hide them with css and get rid of the white space:
.nav_child ul {
display: none;
}
I have been working on a small project for myself to try and experiment with HTML5 and CSS3, to get the hang of it. I need help solving a weird - in my eyes - and unexpected CSS quirk.
I have put my work on CodePen.io to see: http://codepen.io/jbehrens94/pen/uKgvH
The thing is, I want all <section>'s to be 100% in height, so every section fills the exact 100% width and height of the browser's screen. The thing is, if you scroll down to the bottom, there is a lot of white and I can't find out why.
I have noticed margins not working well, so I worked around them, mostly by using paddings.
I tried changing display's, floats and so on, but I just can not seem to find what the problem is and why there is a lot of white on the bottom.
It should not be there, as there are no elements after the last section.
You have three <div />s with classes file, sites, and contact on your last page which start about halfway down but have a CSS declaration forcing them to be 100% height.