Jump to content


Photo
- - - - -

Removing Space Around Multiple Items

Space White space

  • Please log in to reply
5 replies to this topic

#1 james3

james3

    Newbie

  • Members
  • Pip
  • 4 posts
  • Framework Version:DMS 1.0.3.7
  • Country: Country Flag

Posted 31 July 2014 - 07:38 PM

Hello all,

 

I am pretty new to Pagelines and CSS in general, so any help would be hugely appreciated.

 

My issue is how to remove space around the following:

- Text boxes

- Media Boxes

- Sliders

- Between Sections (i.e. Header, Template, Footer)

 

Website URL: www.apcworldwide.com       Login: 
Framework Version: DMS 1.0.3.7
WordPress Version: 3.9.1
Plugins in Use: Easy Pie Maintenance Mode (Askimet and Simple Page ordering installed but not Activated)
Server/Host: Network Solutions
Screenshots: attached

Details:

 

The spacing issues are:

Slider - there is a boarder around it and white space as well. I would like it to abut, with no space or boarder, to the area of the template section.

 

Text Box - need to remove or better, control, the amount of space above and below the line of text "The passion to achieve added value through Advanced thinking."

 

Media Boxes (middle section of template) - need to remove the transparent space (margin??) around the media boxes themselves. This would allow, for example, the horizontal white lines inside the three images in a row (polymers, fiber and thermoplastic) to connect to each other. As you can see now, the horizontal rules are broken by the horizontal space between the media boxes.

 

Sections - could be just me, but it appears there is space (vertically) between sections too.

 

For the Media Boxes, I tried making the three media boxes in a row exactly 4/12ths wide each so they would abut each other, but there is still space.

I have tried to set margin, boarder and padding in the Custom Code section without success. I inspected the code in Google Chrome's  inspector and from what I can see it looks OK.  I probably just dont understand what is inherited by what and how to specify the class or id properly to remove the space. I find all the classes and dependencies a bit confusing...

 

I also looked throughout the forum and found several others with similar issues, but could not solve this by trying the code examples provided for them.

 

In your reply please remember I am a beginner, so as complete an answer, and the reason behind it (so I can learn :)), are greatly appreciated.

 

Regards,

Jim Summers

jamesssummers1@gmail.com



#2 arpowers

arpowers

    Founder

  • Administrators
  • 3271 posts
  • LocationSan Francisco, CA
  • Framework Version:2.3
  • Country: Country Flag

Posted 31 July 2014 - 10:55 PM

Had to edit to remove your admin details :P

 

The good news is that's its relatively easy to add spacing and control that once you know how to do it. I recommend adding some simple CSS for these basic customizations. 

 

you simply: 

  • find the ID of the section
  • add a rule to custom css/less. Something like:
    • #theSectionID .pl-section-pad { padding: 10px 10px 20px 10px; }

 

I usually use chrome web developer tools to get the container ID.

 

I do have one request, please give me a simple case to fix padding so i can give you an example...

 

Reading these long multivariate posts makes my head hurt haha. 


  • batman and Aires like this

#3 james3

james3

    Newbie

  • Members
  • Pip
  • 4 posts
  • Framework Version:DMS 1.0.3.7
  • Country: Country Flag

Posted 01 August 2014 - 07:25 PM

Thanks for your help Andrew,

and for removing the admin info!

 

I will break the issue into separate, simple cases.

 

The intra-media box space problem appears to be related to the margin-left being generated by DMS, not the padding, border or margin.

 

Chrome's web dev tools allows me to edit this value to 0%, and then rebalance the box horizontal placement by setting the width to 33.33%, but then both changes revert to their original values when the page is refreshed. If I could do this in customer css, I think the changes would stick.

 

The section id's for the three media boxes, in order from left to right, are:

id="mediabox88anp2"

id="mediaboxjytmej"

id="mediaboxdkc10k"

 

The styles I manually edit that fix the issue are the width and margin left values:

 

media="all"
.row .span4, .row-fluid .span4, .editor-row .span4 {
  1. width: 31.914893614%;
}

 

 
.row > [class*="span"], .row-fluid > [class*="span"],.editor-row > [class*="span"] {
  1. float: left;
  2. margin-left: 2.127659574%;
  3. margin-bottom: 21.7px;
}

 

Does this help? Please let me know if there is a better way to present information in the post.

 



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17540 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 03 August 2014 - 11:12 AM

Hi,

 

I have tried to view your site, but it appears to be behind a coming soon/splash page plugin.

 

The simplest way to remove any space (usually margin/padding) is to use Google Chrome Dev tools and then inspect the section or element you wish to reduce the space/gap on. When inspecting via Dev tools, margin is displayed as a orange color and padding is displayed as a green color, this helps distinguish between the two.

 

If you're new to both CSS and Google Chromes dev tools, I highly recommend you sign up to Code School, who provide awesome interactive tutorials and courses which will help make you a CSS/Dev tools ninja in no time at all.

 

The Dev tools tutorial is actually free and most certainly worth the time completing as you will learn so much - http://discover-devt...codeschool.com/

 

Some quick tips:

 

* All sections have a unique ID and a classname. The ID can be found by inspecting the section via Chromes dev tools - https://cloudup.com/c64vxp6YMv2

You can use this ID to prefix your custom CSS so that the CSS will only effect that section, for example:

 

#sectionIDhere .pl-pad { padding: 0; }

 

* Here is a screenshot of how padding is displayed in Chromes dev tools (see the green at the top and bottom, this means that element has padding on the top and bottom) - https://cloudup.com/cmulYhYt0Nq

 

* Here is a screenshot of how margin in displayed in Chromes dev tools (see the orange on the left and right, this means that element has margin on the left and right) - https://cloudup.com/cdOurMMx0BC

 

* All sections come with an option called Styling Classes field, this means you can add a custom class name to this field which will effect this section. Please be aware that this does require some basic CSS knowledge and is also dependant on what element you're attempting to style. See our docs on how to use the styling classes field here - http://docs.pageline...on-area-styling



#5 james3

james3

    Newbie

  • Members
  • Pip
  • 4 posts
  • Framework Version:DMS 1.0.3.7
  • Country: Country Flag

Posted 14 August 2014 - 06:40 PM

Hi Danny,

Apologies for the delay. Will try your recommendation and post back here.

Regards,

Jim



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 17540 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 15 August 2014 - 11:42 AM

No problem Jim, keep us posted.







Also tagged with one or more of these keywords: Space, White space