Super-amatuer coder trying to create a perfect wedding blogsite. I've been pointed in the direction of this forum from here https://productforums.google.com/forum/?utm_medium=email&utm_source=footer#!msg/blogger/XoinQAtTfOk/8Zw0SsX8AAAJ
I've removed post/page titles on my blog, but it's left a short horizontal black line still. Is there a way to remove this?
I used the following html code to remove the titles:
.post h3 {display:none !important;}
The URL is https://chrisandruthgetweddytorumble.blogspot.com/ for anyone that wants to take a closer look.
Thanks!
You can inspect the page to find the code. For example, in Chrome if you right-click and select "inspect" code will appear in the right side. When I select that shot line, I see "::before:". So, however blogspot removes that would solve your problem.
If you do F12 and select that horizontal piece, you will get this:
You need to delete that ::before to solve your problem
You may use this [immediate before "</head>" tag]:
<style>
.widget.FeaturedPost .featured-post-snippet::before {
content: "";
}
.page .widget.FeaturedPost .post-header {
display: none !important;
height: 0 !important;
margin: 0 !important;
}
</style>
Related
My code is available here:
https://drive.google.com/open?id=0B1sXI26Zssw2YUVueDdyUHlrVXM
The problem that I'm facing is that there's some space showing up between my navigation tabs, and I didn't have this problem before I used the 'display: inline' function to center my navigation. What can be done? I've tried using "negative pixel margins" but they don't seem to work at all (They did work in another sample navigation I was experimenting with).
Here's a screenshot of the output of the code.
Ok so I downloaded the files and tested it on my server, what I found was rather strange, but the space was only there when the code was on different lines, I ended up fixing it by putting all the <li> elements on one line. You can see the code here: https://gist.github.com/HoogleyB/87de68e1a74480d73150770885e25224
Try to set margin = 0 . If you are running your code on chrome, it adds additional padding and margin of about 8px on its own. So try to fix that.
Have you tried:
ul li{ margin-left:-6px; }
Hope it will helps you.
Just so you know, this bug is because you are using display: inline-block;
With inline-block, if your html has breakline between elements you will see a space.
To remove it there is a tricky css thing :
ul {
font-size: 0;
}
li {
font-size: 12px;
}
If you set the parent with a font-size 0 the space will disappear.
I was editing my styles.css on a WordPress site to remove the title on a particular page. To do this I used the following code:
.post-name .entry-title { display: none; }
This removed the title like I expected. I then enter the following code to remove a border that was after the header:
.post-name .entry-header::after { border-bottom: none; }
This bit of code didn't work. I then removed both pieces of code that I added to try and start from scratch. Now when I view the page, my title is still missing, but the bottom border stayed. I tried clearing my browser's cached images and files, but that didn't work.
What could have caused the title to be permanently missing and why didn't the second bit of code work (I also check my specificity and the above ::after code took priority)?
Thank you!
that is odd.
try making it re-appear by
.post-name .entry-title { display: block; }
Hey stack over flow I have been getting into styling my fire fox browser and have run into a bit of a bump. When I try and re-color my search bar there seems to be a border or something andcant find out what it is that's making that edge white if any one can help me it would be much appreciated.
here is the code I have put in at the moment
input#gbqfif
{
color: #AADA2C !important;
background: #262626;
border: 0px;
}
here is an image of what i'm going for and what is wrong
http://i.imgur.com/dNVxv1A.png
I hope you guys can help and thanks!
That thing, sir, is a div-beast:
I found in my browser it's id = "gs_tti0" what you want to modify. So you should do:
#gs_tti0 {
background-color: #262626;
}
However, it looks like it might be dynamically generated. Just right click in the search bar, inspect element and change that background. If it doesn't work, go one level up (the parent). Keep doing so until you find the one you want.
I am working on a blog: http://poweryogatrainings.blogspot.com/search. If you check the link you can see that currently the blog posts are just below the thumbnail. Now I am trying to make the blog posts align beside (on the right side of) the thumbnail but I am not sure how. Does anyone know what is causing the line break and what can I do to avoid it?
Also I think there was a website where you could edit codes of your website and watch the preview without actually changing the codes. Any ideas about it?
Simply add left float to the image, and give it some space to the right and bottom, as below:
img.postthumb {
float: left;
margin: 0 10px 10px 0;
}
Use float to place your contents on same line. Like float:left; for img tag will allow contents to be displayed horizontally.
if your thumbnails are all the same width, then you can do this:
article { overflow: hidden; /* or some other clearfix method */ }
article img.postthumb { float: left; }
article h3, article header, article div.postbody, article footer { margin-left: WIDTH_OF_IMAGE }
a few points:
WIDTH_OF_IMAGE should be replaced by the actual width of your image, and possibly any extra space that you want to appear between it and the words of your article
the code I've recommended will line things up in columns, if you want to avoid that, then just remove the third line of css and you will have flowing paragraphs which wrap the image
there is a lot you could do to make your code a bit more consise, for instance your article's h3 tag should really be in your article's header tag etc. You also have <title> and <meta> tags in your body, when these are best placed in the <head> of your document..
anyway, good luck, I love yoga sites in general and, look forward to seeing the finished article
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Closed 3 years ago.
In this test page, the element has a strange extra amount of space on the top:
http://dl.dropbox.com/u/3085200/canvasTest/index.html
I tried putting margin, padding, top all to 0 for body, and padding to 0 for html, but none of it helped.
html
{
padding:0px;
}
body
{
margin:0px;
padding:0px;
top:0px;
}
Try this in css:
h1 {
margin-top: 0;
}
This is a common scenario (logo image wrapped in h1 tag):
I believe this is actually caused by the margin on your h1 element.
You <h1> has default margin-top added to it, so it's pushing the <body> down from the top of the window.
body > h1:first-child { margin-top: 0; }
My console is showing a 0.67em top margin on the <h1> surrounding your top element.
Try this...
h1 {
margin: 0;
}
Well, I'm sure the experts will laugh at this. I started using Expression Web 4 and tried to place the header info for my pages into a file header.txt to include on every page. I changed the file type from html to shtml and used this line:
All okay, except for a pesky extra space at the top of the file.
The solution was this:
Tools>Page Editor Options>Authoring
Uncheck .txt under "Add a Byte Order Mark when creating or renaming UTF-8 documents with these file extensions."
I hope this helps someone else as naive as I.
You can try to put a display flex on your body, it worked in my case
Hope it will help someone :)
I recognize that space at the top. This often happens to me too. In my case there is a hidden break (<br/>) somewhere between the <head> and <body>. When you find this break and remove it, the top space will be fixed!
html > h1:first-child { margin-top: 0; }
I know this post is old, but I wanted to share a different solution that worked for me, for anyone that might come across this same post, looking for help, as I have.
Every solution I found seemed to be the result of an error, but I didn't have any errors, that could see. After over an hour of problem solving and piecing apart one of my past designs, I found this solution:
In the CSS for the DIV that you want attached to the top of the browser, add this one simple line:
#ContentContainer{
border: 1px solid transparent;
};
I'm not quite sure why it works or why it's needed, but it made the gap disappear.