Archived

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

  • 0

Grid System - Nested cells

Question

Posted · Report post

Hi All

 

I am trying tidy up a Grid System element with some nested cells that I have on a full width page. The code is attached. What I'm having difficulty with is reducing the spacing between the rows (see picture). Can't seem to track down what I need to adjust. Having read the documentation I am thinking that the CSS classes .zmb and .zmt may hold the answer, however I have been able to get this functioning - maybe someone would be so kind to give an example of there usage.

<div class="row-fluid">
<div class="span5">
<h4>LETTERPRESS WEDDING STATIONARY</h4>
<p style="text-align: justify;">Unmistakably elegant, luxuriously soft, tactile and timeless. Announcing your nuptials with a specially crafted and unique piece of letterpress stationary helps set the tone for your special day and the start of your lives together.</p>
<p style="text-align: justify;">Working with us, you can create a unique bespoke theme for your special day, or you can select a theme from our range of studio templates.</p>

</div>
<div class="span1"></div>
<div class="span6">
<h4>CREATE YOUR WEDDING THEME</h4>
<div class="row-fluid"><div class="span4"><p style="text-align: right;"><strong>Create a scrap book</strong></p></div><div class="span8"><p style="text-align: justify; ">of clippings which inspire and represent the style you want for your special day</p></div></div>
<div class="row-fluid"><div class="span4"><p style="text-align: right; "><strong>Book a consultation</strong></p></div><div class="span8"><p style="text-align: justify; ">with us to discuss your Wedding Stationary Theme and to explore the letterpress options</p></div></div>
</div>
</div>

Share this post


Link to post
Share on other sites

16 answers to this question

Posted · Report post

Gave it a try. No luck. In any case I am happier with the typography fix I found. 

Share this post


Link to post
Share on other sites

Posted · Report post

Add the zmb zmt classes to your p tags.
 

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Danny thats made quite an improvement. There is still a gap between the lines of text in the right hand row. I tried adding the zmt class also, but that didn't improve further. 

 

I think I am just going to abandon this idea for now. The horizontal typography approach has provided a satisfactory alternative and its not as complex. This the code I used. Will be placing an image in the right hand span once I get it created. 

<div class="row">
<div class="span5">
<h4>LETTERPRESS WEDDING STATIONARY</h4>
<p style="text-align: justify;">Unmistakably elegant, luxuriously soft, tactile and timeless. Announcing your nuptials with a specially crafted and unique piece of letterpress stationary helps set the tone for your special day and the start of your lives together.</p>
<p style="text-align: justify;">Working with MAGVA design+letterpress, you can create a unique bespoke theme for your special day, or you can select a theme from our range of studio templates.</p>
<h4>CREATE YOUR WEDDING THEME</h4>
<dl class="dl-horizontal">
<dt>Create a scrap book</dt>
<dd>of clippings which inspire and represent the style you want for your special day</dd>
<dt>Book a consultation</dt>
<dd>with us to discuss your Wedding Stationary Theme and to explore the letterpress options</dd>
<dt>Concept</dt>
<dd>we will develop a concept theme based on your scrap book and consultation</dd>
<dt>Review</dt>
<dd>Take some time to review your stationary theme concept and provide feedback instructions</dd>
<dt>Finalise</dt>
<dd>the theme Once you are happy with the theme concept, sign the proofs</dd>
<dt>Print</dt>
<dd>we will manufacture the plates to make your stationary, prepare the papers and hand press each one individually, ensuring it meets our quality standards</dd>
<dt>Delivery</dt>
<dd>Collect or take delivery of your Unique Bespoke Wedding Stationary</dt>
</dl>
</div>

Thanks for the help.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Danny, but I have the nested cells working with no issues. The issue I have is the large spacing between rows that I want to remove. I am thinking the CSS class zmb and zmt do this, however I cannot figure out how to implement. The documentation was excellent in getting the nesting working with no issues. 

 

Thanks in advance

Share this post


Link to post
Share on other sites

Posted · Report post

Have you tried writing the CSS code or do you need CSS assistance?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Catrina

 

I have tried writing the CSS code for these classes but really am unsure of it. I can't locate a example of its usage anywhere either. I am sure this not correct:

.zmt { margin-top: 0px !important; }
.zmb { margin-bottom: 0px !important; }

I only want to apply it to the space that appears between the rows. 

Share this post


Link to post
Share on other sites

Posted · Report post

You should add #page before .zmt and .zmb like this so that your CSS overrides the default:

#page .zmt
#page .zmb

Share this post


Link to post
Share on other sites

Posted · Report post

No joy with adding the #page. Tried also the page-ID, but no luck.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Keith

 

I've logged into to take a look but it seems like the layout on the page has changed, I seen you've mentioned changing to the typography options since though. Looking at your original image the yellow area seems to indicate a margin around the element, possibility around a <p> tag or div, wordpress does add margins to the <p> tag automatically.

 

I've taken a screenshot to show you on the existing page the margins applied around the titled of the paragraph so you can see how those spaces show up in the code, usually anything in yellow is a margin, dark blue is padding - http://screencast.com/t/1aNVm4rPara

Share this post


Link to post
Share on other sites

Posted · Report post

Can you please post a link to your site?

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Catrina

The site is not live at the moment. Currently in the development with a splash screen attached. I have found an alternative method to what I was trying to achieve whereby I don't need to use nested cells. 

 

I will be using Horizontal description found under the typography section This is a far better solution for my needs.

 

I am somewhat reluctant to mark this as resolved, given that the .zmt and .zmb class issues where the focus. 

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for the log-in. Try this CSS instead:

#page .row.zmt
#page .row.zmb

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Catrina. 

Still no luck however. The mind boggles....

Share this post


Link to post
Share on other sites

Posted · Report post

Add the zmb zmt to your span classes like so:

 

http://d.pr/n/D1wU

Share this post


Link to post
Share on other sites