Jump to content

Archived

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

james3

Removing Space Around Multiple Items

Recommended Posts

james3    0
james3

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

Share this post


Link to post
Share on other sites
Andrew    201
Andrew

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. 

  • Like 2

Share this post


Link to post
Share on other sites
james3    0
james3

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.

 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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-devtools.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.pagelines.com/tutorials/section-area-styling


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
james3    0
james3

Hi Danny,

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

Regards,

Jim

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem Jim, keep us posted.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • dreja
      By dreja+
      Hi,
       
      I have a site in development :
       
      ^ On this page there a ton of white space. I'd like for the div below the picture and main text to sit in this white page but when I move it there, the div shows up behind the picture. 
       
      Can anyone suggest a way for me to have the coloured box show up in that empty white space? Thanks for your help.
    • thesongchanneler
      By thesongchanneler
      Aloha,
       
      Another simple question, I'm sure. Just too much space under my nav bar on home page (right at top, below my banner)....    it's the space under the nav bar, and above my "template" which isn't really a template anymore, but 3 columns. How to remove the space? Please view at devorakalma.com
       
      Thank You,
      Devora
    • swiftitnz
      By swiftitnz
      Hello to all DMS users and support people!
       
      I'm having this issue trying to remove the blank space at the bottom part of each section (PLEASE SEE THE IMAGE).
       
      Image/Screeshot link: http://pho.to/7EDMB
       
      I have tried selecting the padding to be '0', but no luck.
       
      Any suggestions? Help is much appreciated.
       
      Just in case you want to see the live site (currently being finished): http://mostrespectedagents.net/
       
      Regards,
       
      Imran
       
      P.S.: I am using DMS Pro version 2.1.6.1
    • photomom86
      By photomom86+
      I've attached a screen shot. I have 2 columns in my header area. One has a media box (contains my logo) the other has a simplenav and a mediabox (contains the social media icons and a google ad). Under these two columns my nav bar sits. There is a lot of extra space between the bottom of my columns and the top of my navbar.
       
      Can you help me? I want to decrease the amount of space between the two. Thanks!
       
      [attachment=2390:Header Spacing.png]
       
    • dreamsight
      By dreamsight+
      http://www.countyflatroofing.co.uk/wordpress/county-flat-roofing-privacy-policy/ white space under the pagetitle. When I inspect element I can see div's that I assume are creating the white space. How do I remove them?
       
      <div class="pl-section-controls fix"> <div class="controls-left"> <a title="" href="#" class="s-control s-control-icon section-decrease" data-original-title="Decrease Width"><i class="icon icon-caret-left"></i></a> <span title="" class="s-control section-size" data-original-title="Column Width">12/12</span> <a title="" href="#" class="s-control s-control-icon section-increase" data-original-title="Increase Width"><i class="icon icon-caret-right"></i></a> <a title="" href="#" class="s-control s-control-icon section-offset-reduce " data-original-title="Offset Left "><i class="icon icon-angle-double-left"></i></a> <span title="" class="s-control offset-size" data-original-title="Offset Amount">0</span> <a title="" href="#" class="s-control s-control-icon section-offset-increase " data-original-title="Offset Right "><i class="icon icon-angle-double-right"></i></a> <a title="" href="#" class="s-control s-control-icon section-start-row " data-original-title="Force to New Row "><i class="icon icon-level-down"></i></a> </div> <div class="controls-right"> <a title="" href="#" class="s-control s-control-icon section-edit s-loaded" data-original-title="Edit"><i class="icon icon-pencil"></i></a> <a title="" href="#" class="s-control s-control-icon section-clone s-loaded " data-original-title="Clone "><i class="icon icon-copy"></i></a> <a title="" href="#" class="s-control s-control-icon section-delete" data-original-title="Delete"><i class="icon icon-remove"></i></a> </div> </div>
×