I don't have any experience with html or css, I recently started my blog: https://nataliaputilova.blogspot.com/2019/09/blog-post_50.html
But you can see there's so much white space on the left, how do I reduce this? I tried googling some stuff about editing the html or adding a css code, but none of it worked.
This is the css I tried, and it didn't look like it changed anythin
.content-outer {
margin-left: 10px;
}
change the .centered-bottom and post-sidebar class width.
.centered-bottom, .centered-top {
width: 90%; /*change this */
}
if you don't want to have padding for .post-sidebar u can remove it.
.post-sidebar {
box-sizing: border-box;
display: block;
font: normal 400 14px Montserrat, sans-serif;
padding-right: 20px; /*Remove this if u don't want to have padding */
width: 70px; /*change this */
}
Final output:
It looks like sidebar (.post-sidebbar) is causing the main content to shift to the right. If it works, you can position it elsewhere so that your content gets more space.
OR
You can override the css of .centered-bottom, and add margin-left: 100px (Change the number as per your need) to it.
Related
I am trying to put the top side of the icon caret-down lined up with the bottom side of my p:
There is a gap between the arrow and the p, I don't know how to get rid of this gap.
I set p with margin-bottom: 0, but the gap of the image still remains.
My second guess was to set the icon with a negative margin-top, but it only works so far:
The image above shows what happens when I set the icon with margin-top: -10px. I am still getting a gap and this is the closest I can get the icon next to p, it doesn't matter how much I decrease the margin-top, this is the limit.
Maybe there is something about these icons that I don't know.
A sample of my code:
JSX:
<div>
<p onClick={() => setTag('all')} className="products-select products-select-active">ALL PRODUCTS</p>
<FontAwesomeIcon icon="caret-down" size="2x" />
</div>
css:
.products-select {
width: 155px;
height: 46px;
background-color: #F5F5F5;
padding: 10px;
cursor: pointer;
margin-bottom: 0;
}
.products-select-active {
background-color: #3A3A3A;
color: white;
}
Icon:
How can I fix it?
EDIT:
I just made my own arrow-down with css and JSX and it solved my problem.
EDIT 2:
#lt1 solution works great.
When you need to move something around precisely, you can use the transform CSS property with a translate value. For example, here you could try
.products-select {
transform: translateY(15px);
}
That will move the products-select down by 15px, you can adjust the value to whatever you need. (there's also translateX for a horizontal translation.)
Try adding box-sizing: border-box to the products-select class, like so:
.products-select {
box-sizing: border-box;
width: 155px;
height: 46px;
background-color: #F5F5F5;
padding: 10px;
cursor: pointer;
margin-bottom: 0;
}
And then set your height. :)
In this template by Colorlib: https://colorlib.com/demo?theme=pemodule
I'm trying to remove the purple borders around the outside of the website. I can't seem to figure out in the CSS how this border is achieved and how I can remove it.
Just wondering if anyone has any ideas.
Your help is much appreciated.
The border is the background of the body and the rest of the website has a margin which creates the space between it and the edges of the viewport.
in main.css, line 1927:
body {
background: #4b379a;
}
in main.css, line 1931:
.main-wrapper-first {
width: 68.75%;
margin: 0 auto;
margin-top: 6rem;
}
the body tag has the following:
body {
background: #4b379a;
}
change that to:
body {
background: white;
}
Set these things in your CSS (I don't know if you need the !importants), but here:
.main-wrapper, .main-wrapper-first {
width: 100% !important;
margin-top: 0 !important;
}
If you are adding this to the CSS, place this at the bottom.
Site: http://stagingsite16.info/
Screenshot below:
Problem:
As you see on the screenshot, there is a gap at the bottom of the page. (I applied red background so that it can be seen immediately.)
I tried applying this code:
html {
margin: 0;
padding: 0;
overflow: hidden;
}
but still it doesn't solve my issue. Any help is really appreciated! :)
You have to place the div of the footer outside all the other divs , and then add:
div#builder-module-537dadf9ae69e-background-wrapper
{
background: #2c2c2c;
color: #fff !important;
padding-top: 0px;
margin-bottom: 0px;
}
you had this before:
div#builder-module-537dadf9ae69e-background-wrapper
{
background: #2c2c2c;
color: #fff !important;
padding-top: 20px;
}
But you have to move the div outside the other divs!!
I've used this in a user style sheet locally and it seems to fix the problem:
.builder-container-outer-wrapper {
margin-bottom: 0px;
}
div#builder-module-537dadf9ae69e-background-wrapper.builder-module-background-wrapper.builder-module-footer-background-wrapper.builder-module-6-background-wrapper.builder-module-footer-1-background-wrapper.builder-module-bottom-background-wrapper.builder-module-last-background-wrapper.builder-module-footer-last-background-wrapper.builder-module-after-widget-bar-background-wrapper.default-module-style-background-wrapper {
margin-bottom: 0px;
padding-bottom: 1.5em;
}
Another thing to consider: CSS applies the style which is most specific to the element. The html { ... } element is the one for the whole page (including the tag), so it will be the least specific rule for the element you want to apply your style to. It is likely that a more specific style (such as div.builder-container-outer-wrapper) is applying the margin somewhere else in your CSS, and you'll have to fix it there. (See http://css-tricks.com/specifics-on-css-specificity/ for an explanation of how the specificity rules are applied.)
Anyway, hope that helps.
.builder-container-outer-wrapper {
margin-bottom: 0;
width: 100%;
}
This is the container which has the margin-bottom.
Please visit this website.
There is a blank space at the bottom. I checked it and there is no minimum height mentioned in my css.
I suspect it's in the body's css details as below:
body {
line-height: 1.5;
font-size: 87.5%;
word-wrap: break-word;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
border: 0;
outline: 0;
background: none repeat scroll 0 0 #EFEFEF;
}
html, body, #page {
height: 100%;
}
This removed the bleed for me in Safari 6.0.3;
#footer-wrapper {
margin-top: 40px;
background: url("../images/footer.png") repeat-x scroll 0 0;
overflow: hidden;
}
You might want to handle that overflow differently tho, based on the content inside it. But this should fix the white space.
I figured it out by just deleting nodes from the DOM bottom-up. It had to be in the #footer-wrapper. As margin-bottom didn't work and you were using relative positioning I figured it was some shadow styling bleeding out of that element.
Update (better fix)
Just found the real issue to the problem;
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Change content: "."; to content: ""; and it's fixed. Or just remove that style at all, as it doesn't seem to have use in that case.
"overflow: hidden"
makes things harder but try,
"overflow: auto"
in order to be able to flow when you need.
I'm late to the show here but it may help somebody in my case I had an empty space at the top I added the margin-top=-20px now the empty space at the bottom, tried almost all suggestions I found on these and many threads and nothing. Decided to run it thru some HTML validator there are a few none of them pick up but after a couple one found an extra character(`) at the end of a tag, and that was it, so it was user clumsiness, took that thing out now my page was shifted, took the negative margin and all good. So try a validator and look for something like this.
margin-bottom: 0px;
This would do it
Btw ..nice site dude :)
Sometimes, it's some iframes/objects that are created by third party services that create this blank space. In my case, Google Adwords and Google Analytics was creating this. So, I removed by adding this CSS:
object[type="application/gas-events-cef"],
iframe[name="google_conversion_frame"] {
display: none !important;
height: 0 !important;
width: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
margin-top: -13px;
float: left;
}
Maybe you will need to add some extra rules for your case. Hope that helps.
I'm trying to create a styled button that has a single character centred inside it.
I'm using "border-image" and "border-width" to create a button that I could stretch to larger content (that ability has been lost in this simplified scenario...).
My problem is this: when the button is small (specifically, when the button is little more than 2*border-width), the content is not centred. I've tried 'conventional' techniques like margin: 0 auto; but don't seem to be having any joy. Using a dumb-button class without these border properties I can get what I want (see below)
This neatly demonstrates the problem. I would like the characters centred in the styled buttons:
http://jsfiddle.net/rjmLy/
(works in Chrome/Safari, and this is targeting Webkit only)
(example of the themed button from http://girliemac.com/blog/2011/07/29/five-css-tricks-used-in-enyo)
My CSS is as follows:
.fancy-button {
border-image: url(http://girliemac.com/sandbox/images/alert-button.png) 0 14 111 14 fill repeat repeat;
border-width: 0 14px;
box-sizing: border-box;
font-size: 16px;
height: 37px;
line-height:37px;
text-align: center;
margin: 0 auto;
width: 28px;
}
.centerme {
position:relative;
margin:0 auto;
}
.dumb-button {
font-size: 16px;
height: 37px;
line-height: 37px;
text-align: center;
width: 28px;
background-color: red;
margin: 0 auto;
}
The HTML looks like this. The centerme class was an attempt to try centring a new div on top of the old shape. It doesn't work for me. The dumb-button versions look correct (but dull...)
<div class="fancy-button">I</div>
<div class="fancy-button">W</div>
<div class="fancy-button"><div class="centerme">W</div></div>
<div class="dumb-button">I</div>
<div class="dumb-button">W</div>
<div class="dumb-button"><div class="centerme">W</div></div>
Any help would be greatly appreciated.
You're building the button with a CSS3 Sprite and a border-image attribute where the start of the left side of the button is 14px wide and the start of the right side of the button is 14px wide.
In your CSS you set the width of the button to 28px: The problem is that this leaves no room for any text that you put in the middle of the button and therefore the letter is overlapping onto part of the border-image.
In order to fix this you could simply increase the width of the button to about 42px or larger.
.fancy-button {
border-image: url(http://girliemac.com/sandbox/images/alert-button.png) 0 14 111 14 fill repeat repeat;
border-width: 0 14px;
box-sizing: border-box;
font-size: 16px;
height: 37px;
line-height:37px;
text-align: center;
margin: 0 auto;
width: 42px;
}
Here's a working fiddle: http://jsfiddle.net/QYrzS/
But, if you really want to keep the images that small - things are a little more difficult. One option is wrapping the content of each button (the single letter) in a <div> and then manually setting the margin for each. For example:
HTML
<div class="fancy-button"><div class="centerme">W</div></div>
CSS
.centerme {
margin-left:-7px;
}
This is kind of hacky and will need to be manually adjusted (since each letter is a different width).
Here's a working demo: http://jsfiddle.net/rjmLy/
Notice that the letter i is not centered. You would need to specify the correct margin for the individual <div> that holds that letter in order to fix that.