You can reduce the spacing on the top by adding this in your css:
.site-main {
padding: 0;
}
Regarding the spacing on the left you can try something like:
.site-content {
margin-left: 23.4118%;
}
If you want to remove the spacing on the right you will need to adjust the content area width.
@kaniamea
Can you check my issue which is similar to this one. I am having lots of white spaces around the site.
Here’s the link to my site: http://ninjacreativity.com/
Thanks in advance. 🙂
Hi arbazkazi, Your site looks fine to me but if you would like to reduce some spacing you can use this
section {
padding-top: 20px;
padding-bottom: 20px;
}
It will reduce the spacing between the different sections of your site.
@kaniamea
Thanks a lot. Problem solved! I am new into this. This is the first website, I have designed. Just facing these small issues. Can you tell me the easiest way to track or locate the code of any element of the site and then edit it via CCS Code? Like the way you searched the word section { in my issue.
I always use the Inspect Element in Firefox to located classes. It also works with Chrome and Safari. You can Google it and you will see it is easy to use it.
@kaniamea
Thanks. There are 2-3 more things I need help in. Can you help me in those? Should I create a separate post thread in here and you help me out in there?
@arbazkazi, you can post your questions here.
@kaniamea
As you’ve had a look at my website, I need to change the front section [blue one] to cover the entire top portion and have something like this: http://creatives.pk/
Is it possible to change it via CCS Code? The theme I am using have this option but I am not too sure how to properly use that. Though, the blog page in my site is having something similar.
If the 1st section [block] I am using gets tweak and gets aligned till the top then I can even use slider similar to the website I have pasted.
If you would like to change the color of the top section so it also becomes blue just like the banner under it you can use:
.top-bar {
background: #4a88bf;
}
#4a88bf; is the color of your banner.Of course then you will need to adjust the font colors which you can do in your Divi – Theme customize (that’s if you are using the Divi theme as it looks like). From there you can also set up colors, font sizes, etc. Fore more info check Divi’s tutorial page on their site. You can also do it via CSS but Divi has made it really easy to do it through their system too. Hope this helps!
@kaniamea
The Theme I’m using is Pivot. In there examples pages, I have witnessed that they do have the option to use the background image as the front page header. Like this: http://pivotwp.wpengine.com/home-business/ and http://pivotwp.wpengine.com/home-personal/
But I am not able to set it for the front page, though my blog page do have this thing activated. But I am unable to do so for the home-page for some unknown reason. Can you help me with this? As I think the website will look good if I get that header in front with a background image and info/button in front.
@arbazkazi, I dont have experience with this particular theme so the best thing to do is to ask the Pivot theme developers. You can check their tutorials too.
@kaniamea
Okay, I am searching on their website. Can you help me with the button [free quote] I have set in the top? I am trying to change it to something similar to the one in the website I mentioned of creatives.pk as I think that one is in SVG button and can be made via CCS Code?
I think this button requires some custom coding. You can inspect their code with Inspect Element and see what classes and how they are doing it. Good luck!
@arbazkazi, I looked into this and it seems the button they use is similar to the code I am posting below. Modify it the way you want it and hopefully it will work for you. Once again good luck!
<style>
.ribbon strong {
font-size: 27px;
font-weight: 900;
display: block;
}
.ribbon {
margin-bottom: -7px;
background: #cd2122;
}
.topbutton {
clear: right;
float: right;
position: relative;
font-size: 11px;
font-weight: 700;
color: #fff;
text-align: center;
padding: 10px 10px 15px;
border-radius: 2px;
margin-top: 8px;
margin-left: 20px;
font-size: 21px;
width:200px;
}
.ribbon .trisvg path {
fill: #cd2122;
}
.ribbon .trisvg {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 25px;
}
svg:not(:root) {
overflow: hidden;
}
.ribbon:hover, .ribbon:focus {
background: #f5dc26;
color: #000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.ribbon:hover .trisvg path {
fill: #f5dc26;
}
.ribbon:focus .trisvg path {
fill: #f5dc26;
}
</style>
<a href="#" target="_self" title="GET FREE QUOTE" class="topbutton ribbon" id="topbutton"><strong>GET</strong>QUOTE
<svg version="1.1" class="trisvg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none" viewBox="0 0 14.017 5.006" enable-background="new 0 0 14.017 5.006" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.016,0L7.008,5.006L0,0H14.016z"></path>
</svg>
</a>
