Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to remove white space which is colored black on image from both side
to remove this white space from header i add margin-left:-10px
.site-header-main {
float: left;
width: 100%;
margin-left: -10px;
padding: 44px 0 22px;
padding: 4.4rem 0 2.2rem;
background-color: #fff;
}
After adding this I successfully removed white space from the left side but a grey color space comes on right side image here
Please remove the margin: -10; you put in the css and add this to it.
.site-header-main .container {
padding: 0px;
}
The container class is having a margin of 3.3em from both left and right. so this will fix this glitch.
if You want to remove this from the whole site try this
body .container {
padding: 0px;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
How to remove white space from the top of this website
I had added
*{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
on my css but still i am getting that white space
Developer tools shows some characters at the beginning of your body tag. Remove them.
You have . (dot) right above in body, remove it
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am having some trouble trying to figure out what's happening with my page. As you can see below on the mobile version, it appears right next to the top part of the logo.
My current code for nav (the element in blue) is:
nav {
top: 0;
left: 0;
text-align: center;
font-style: italic;
font-weight: 700;
font-size: 25px;
}
Since it maybe hard to tell just by the picture, you can find the code to this page in https://jsfiddle.net/bg5srnj8/1/
nav > img {
vertical-align: middle;
margin: 0px 25px 10px 25px;
}
you had a 10px margin top in the image.
I hope it works.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I want to bring my Sketch file to HTML/CSS in the browser.
How can I implement the white line just between the small and big text, as shown in the image below?
If don't want to include any additional html element then you can use pseduo element:after.
h2:after {
display:block;
content:" ";
width: 80px;
height: 5px;
background: grey;
margin-top: 5px;
}
fiddle
You can add an empty div with a bottom border & custom width, which is of cleaner and shorter code:
body {
background-color: blue;
color: white;
}
#mydiv {
border-bottom: 4px solid white;
width: 33%;
}
#myline {
height: 4px;
background-color: white;
border: 0px solid black;
width: 33%;
}
A div:
<div id="mydiv"></div>
A horizontal line:
<hr id="myline" />
That's 4 lines for the HR and 2 for the div, and that's without making the hr align to the left.
If you don't want to add another element you can use ::after on any element - just make it have display: block and set the color, width, height etc. similar to the above code.
You can add tag <hr> and him specify needed width, height,color...
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
Help! I've read every question here and every tutorial online… but I can't seem to make the left and right column bottom border appear on my layout that I'm trying to put together.
Here is a link where I am currently working on it.
Can anyone tell me what I am doing wrong?
My current css is:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
margin-right: 20px;
background: white url(http://i1109.photobucket.com/albums/h423/thesinglemomoirs/templates/pinkcupcake/38d73024.png) repeat scroll top left;
border: 2px solid black;
}
.fauxcolumn-outer .fauxborder-left, .fauxcolumn-outer .fauxborder-right, .fauxcolumn-inner {
height: 100%;
}
The solution to your problem is to set the box-sizing like so:
.fauxcolumn-inner {
box-sizing: border-box;
}
Your problem is that without box-sizing to border-box when you set your height to 100%:
.fauxcolumn-outer .fauxborder-left,
.fauxcolumn-outer .fauxborder-right,
.fauxcolumn-inner {
height: 100%
}
and THEN add margins, padding or borders, your true height ends up being greater than 100%
You could replace border with an inner box shadow with no blur:
box-shadow: inset 0 0 0 2px #000000;
.yourclass {
border-bottom:thick solid black;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have the following page:
Page on JSBin
If you look at the top-right-hand corner, then you can see that the settings & chat pic and the username is aligning with the lower border of the profile picture.
How could I make all elements in top-right-hand-corner align in the middle of the top-bar?
The top-bar is supposed to look like that:
EDIT: I have applied the vertical-align: middle property to these elements. However, as you can see at ranganadh's JSBin, the image seems to be a bit too near to the lower corner. Any suggestions on that?
add vertical-align:middle property to class .top-right-button
change to
.top-right-button{
margin-right: 5px;
vertical-align:middle
}
Check JSBin
You need to modify your CSS as follows:
.right-stuff {
position: absolute;
bottom: 2px;
height: 100%;
right: 0px;
font-family: Roboto Condensed, bold;
font-size: 24px;
}
.top-right-button {
margin-right: 5px;
vertical-align: middle;
}
The vertical-align property is not inherited and must be specified explicitly.
By default, your right most image is aligned with the default baseline of the container block. Setting vertical align to middle gives a more pleasing view.
If you need to, use the bottom offset to adjust the overall vertical position of the .right-stuff block.
See demo at http://jsbin.com/uSiTOpU/16/edit
I hope i understand your edit well.
Try to change
#top-right-profile-image {
margin-top: 5px;
width: 40px;
height: 40px;
background-color: #ffffff;
}
to
#top-right-profile-image {
width: 40px;
height: 40px;
background-color: #ffffff;
}
It gives a better looking result.
I believe you simply need to add an valign="top" to your profile image.
<img valign="top" class="top-right-button" id="top-right-profile-image" src="//www.placehold.it/20x20"/ >