Jump to content


Photo
- - - - -

Grid System - Nested cells


  • Please log in to reply
16 replies to this topic

#1 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 414 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 01 May 2013 - 08:53 AM

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.

Please Login or Register to see this Hidden Content



#2 Danny

Danny

    Is Awesome!

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

Posted 01 May 2013 - 09:05 AM

Hi,

 

To use nested columns, see our documentation -

Please Login or Register to see this Hidden Content



#3 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 414 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 01 May 2013 - 02:03 PM

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



#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 01 May 2013 - 03:13 PM

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



#5 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 414 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 01 May 2013 - 03:36 PM

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:

Please Login or Register to see this Hidden Content

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



#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 01 May 2013 - 04:08 PM

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

Please Login or Register to see this Hidden Content



#7 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 414 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 01 May 2013 - 04:19 PM

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



#8 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 01 May 2013 - 04:54 PM

Can you please post a link to your site?



#9 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 414 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 01 May 2013 - 05:04 PM

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

Please Login or Register to see this Hidden Content

 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. 



#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 01 May 2013 - 06:49 PM

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

Please Login or Register to see this Hidden Content



#11 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 414 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 01 May 2013 - 07:56 PM

Thanks Catrina. 

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



#12 Danny

Danny

    Is Awesome!

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

Posted 01 May 2013 - 11:06 PM

Add the zmb zmt to your span classes like so:

 

Please Login or Register to see this Hidden Content



#13 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 414 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 03 May 2013 - 11:37 AM

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



#14 Danny

Danny

    Is Awesome!

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

Posted 03 May 2013 - 11:45 AM

Add the zmb zmt classes to your p tags.
 



#15 Danny

Danny

    Is Awesome!

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

Posted 03 May 2013 - 12:40 PM

Try this:

 

Which looks like this:

Please Login or Register to see this Hidden Content



#16 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 414 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 03 May 2013 - 01:10 PM

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. 

Please Login or Register to see this Hidden Content

Thanks for the help.



#17 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 03 May 2013 - 11:02 PM

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 -

Please Login or Register to see this Hidden Content