Jump to content

Archived

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

paulweller84

Padding Issue

Recommended Posts

paulweller84

Hi,

This is probably a very basic question but I'm totally inexperienced with building websites so some help from someone in the know would be very helpful.

Whenever I add new elements into my site, everything has huge amounts of padding around it, and when the bottom of one element and the top of another both have padding like this it pushes everything so far apart on the page. I'd like everything to sit a bit tighter together and not look so lost. I thought I was doing the right thing by using the 'padding' control on the toolbar but after adding "0px 0px" it hasn't made any difference. See the attached image, it's the green shaded areas I want to remove or at least reduce.

Can anyone offer me some help here, and if the solution is at all complicated please be quite detailed with any responses, as I said, total novice here.

Thanks in advance

Help.jpg

Share this post


Link to post
Share on other sites
Danny

Hi,

Can you provide a link to the site in question and a screenshot to your actual padding issue. As the the editor when enabled, adds additional styling to make designing your site easier.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
paulweller84

Trying to upload a screenshot but it's telling me I can't upload more than 40kb which is really low resolution.

The site is www.meslertraining.com

It looks the same whether editor is enabled or not, and whichever browser I use.

Share this post


Link to post
Share on other sites
paulweller84

Screen-Shot-2015-08-10-at-20.10.12.pngScreen-Shot-2015-08-10-at-20.10.22.png

Here is an example of what I mean. The first image shows a screenshot from a browser not connected to Pagelines that I'm using purely for viewing.

The second image is the code for that area from the editor. Without the <h3> and <h5> tags everything sits well together, but when they're added everything spaces out. The gaps between the photo, and the two lines of text are too big and I've no idea how to control this.

Share this post


Link to post
Share on other sites
Danny

If I understand you correctly, you want to reduce the space between the h3 text i.e. Rob and the h5 text Managing Director? If this is the case, that isn't padding, it is margin and all header tags contain margins. I have reviewed your site and you now appear to be using divs with inline styling, you shouldn't really use inline styling as it s a PITA to manage and overrides class CSS.

Therefore, what you had originally, was the better HTML.

<img src="http://meslertraining.com/wp-content/uploads/2015/08/Photo-09-08-2015-11-18-58-e1439233576882.jpg" width="100%">
<h3>Rob</h3>
<h5>Managing Director</h5>
<p>I'm Rob and I'm one of the founders of Mesler Training. My main roles in the day-to-day running of the business include contract management and customer service, amongst many other things. In my free time I enjoy playing rugby and taking my Land Rover Defender off-roading. My favourite part of my job is getting awesome feedback from our clients.</p>

If you want to reduce this, you can do so quite easily by using the CSS utility classes included in DMS. You can use these classes easily due to this being code you have added yourself.

<img src="http://meslertraining.com/wp-content/uploads/2015/08/Photo-09-08-2015-11-18-58-e1439233576882.jpg" width="100%">
<h3 class="zmt zmb">Rob</h3>
<h5 class="zmt zmb">Managing Director</h5>
<p class="zmt">I'm Rob and I'm one of the founders of Mesler Training. My main roles in the day-to-day running of the business include contract management and customer service, amongst many other things. In my free time I enjoy playing rugby and taking my Land Rover Defender off-roading. My favourite part of my job is getting awesome feedback from our clients.</p>

As you can see from above, the code is exactly, the same except that each of the elements except for the image tag now contain the following utility classes zmt and zmb.

zmt = zero margin top
zmb = zero margin bottom

So when you use these in HTML you have included to a page yourself, you can add these to remove margins from the top or bottom on any element that may have margins.

You could also gone one step further and use the grid to make sure that this HTML acts responsive. By using the following:

<div class="row">
  <div class="span12">
    <img src="http://meslertraining.com/wp-content/uploads/2015/08/Photo-09-08-2015-11-18-58-e1439233576882.jpg" width="100%">
      <h3 class="zmt zmb">Rob</h3>
      <h5 class="zmt zmb">Managing Director</h5>
      <p class="zmt">I'm Rob and I'm one of the founders of Mesler Training. My main roles in the day-to-day running of the business include contract management and customer service, amongst many other things. In my free time I enjoy playing rugby and taking my Land Rover Defender off-roading. My favourite part of my job is getting awesome feedback from our clients.</p>
  </div>
</div>


 

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
paulweller84

Thanks Danny, great help!

I understood everything up to;

"You could also gone one step further and use the grid to make sure that this HTML acts responsive."

There you lost me. The grid? The classes "row" and "span12" mean nothing to me unfortunately! Sorry, total novice.

Share this post


Link to post
Share on other sites

×