Jump to content

Archived

This topic is now archived and is closed to further replies.

RiverRat

Padding/margins Too muchs space below graphics

Recommended Posts

RiverRat

Hi Fairly new to Pagelines and to not have the technique to take the space out below the logo and picture on the right even after removing padding. This happens everytime I do this and it adjusts the height of my header. Can someone help me with the coding to fix this problem. Thank you

 

http://buff.ly/1g71FyF

Share this post


Link to post
Share on other sites
James B

Hi there,

 

Looking at the site there's still quiet a bit of padding and margins inside the various elements within the section which is giving the extra space. You can remove this the same way as you have done for previously removing the padding, but you'll need to go further into the section to see the css applied to each element.

 

The easiest way to do this is open firebug or chrome dev tools, scroll through the html and you'll see on the live page the padding show up as dark blue areas and the margins as yellow. When you see either of those appear, you know that somewhere in that div the padding is applied, so you can scroll through the css on the right to find/edit the padding/margin figure, then copy/paste the code back into dms.

 

I've recorded a short screencast showing this process live on your site and the end result of removing the extra space.

 

http://screencast.com/t/08jkL1lh


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
RiverRat

Thank you! However it still is not working. Not knowing the best way to get my code to affect my layout I decided to do a child theme as per your documentations. Do I need to use a child theme for this customzation. I tried the custom css form in DMS and  it would not affect my layout. Now I have installed a child them and still I am not getting rid of the any padding. This is what I did on the style.less:

 

body .pl-area .pl-section .pl-section .pl-section-pad {
    margin-bottom: 1px;
    padding: 1px;
}

.pl-area-wrap .pl-bg-cover {
    padding-top: 1px;
    padding-bottom: 1px;
}

 

Thank you for checking this out. I seem to put code in and it does sometimes affect my layout and sometimes not. I have read through your documentation is why I choose to install your child theme, change the style.less document and upload it with ftp.

 

Thank you I need to get this figured out ASAP

Share this post


Link to post
Share on other sites
James B

You can place your code within either the custom child theme in the style.less or within the custom css panel inside the DMS control panel. Both areas will take affect as long as the code you're entering is correct. When targeting certain or specific areas with css you'll need to use the section class or id as a prefix to narrow in on that area. An example of a class would be .section-ibox, these can be seen in firebug or Chrome dev tools higher up the html.

 

If you're keen to learn css take a look at http://docs.pagelines.com/customize/how-to-customize which has a selection of resources for learning css and links to the various web inspectors and how to use them. There's also some examples on overriding css via sections using classes at http://docs.pagelines.com/customize/overriding-default-css which can help explain further.

 

For example the code below takes out the margin below the bottom of the header, the area where the logo and the telephone number/image is.

 

#header

.pl-area-wrap {
    padding-bottom: 0 !important;
}

 

The logo is quiet small so there's a fair bit of space below that, if you want the logo to appear larger and fill up more of the header area I would advise uploading a bigger version of the logo as an image as stretching the existing image using css will make it appear pixelated.

 

If you're really stuck with making css changes we also have a list of PageLines Pros who will be able to make third party changes and you're on a deadline. A list of the Pros can be obtained by emailing hello @ pagelines.com


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
RiverRat

Thank you. I read in your documentation that the dms custom css page does not override sections. That was my confusion. Thanks examples work wonders for me! If I can see one example I can usually figure everything else out.  You can read read, but without examples it is easy to miss something.

Share this post


Link to post
Share on other sites
James B

You're welcome, let us know how you get on


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
RiverRat

Yes that worked Thank you!

Share this post


Link to post
Share on other sites
James B

Excellent, glad that worked for you. Thank you for updating the thread.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

×