• 0

Column Span


Question

Posted · Report post

I have set the section to 0 padding. Then add padding to 2 columns.

 

There is a gap between columns.

 

[media]http://screencast.com/t/AVLddpYhlsSB[/media]

 

When i removed the margin, there will be gap on the right.

 

[media]http://screencast.com/t/A8KwNtvDLRb[/media]

 

I cannot set the width because, when it comes to responsive layout, it till break.

How is the span width calculated? Is there anywhere we can edit?

 

Please advise

Share this post


Link to post
Share on other sites

10 answers to this question

  • 0

Posted · Report post

Hi Andriana, The column structure is managed by Twitter Bootstrap, so I don't know where the width is calculated, or if there's any way to edit it as it's coming from their API. Can you provide a link to where this is visible, and I'll see what can be accomplished with CSS, if anything. As a possible option, you can make responsive tables if the spacing between the columns cannot be resolved.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I sent u a link

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Unfortunately, the only thing I could come up with is

.row > [class*="span"], .row-fluid > [class*="span"], .editor-row > [class*="span"] {
    float: left;
    margin: 0;
}
 
However, the code to create the percentage widths seems to be controlled from the API.  I don't know of any way to adjust the percentages so that you'd get 67% and 33% respectively.  Combined with the code above, you may be able to adjust the CSS, but in testing, it did not work.  The API places non-specific distances between the columns I could not find.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for the effort.

Is there such thing as (if else )expression in less?

Eg. If max width < eg. 768px , width =auto else width = 67%.

Just a thought.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I don't believe LESS uses conditional expressions, but I'm not an expert in LESS.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

How do i use the .ipad/iphone class?

Can i use it and set padding 15px override the other padding when it detect the browser?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The columns are already mobile friendly, what is it you're trying to do ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

    I wanted to remove the margin in between two columns and stretch the first column to fill up the space. Thus i set

.row > [class*="span"], .row-fluid > [class*="span"], .editor-row > [class*="span"] {
    float: left;
    margin: 0;
}

.row .span8,.editor-row .span8 {
    width: 68%;
}

The problem is when you reduce the browser to a mobile size as a preview,the first column keeps its width thus did not auto stretch. 

Please advise.

 

 

2013-10-22_0910.png

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Not sure what it is you're trying to achieve by removing the margins tbh, can you provide a link to the site please.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Quick look and i think what makes most sense is to either use the DMS tools to achieve what you're going for, or your simply going to have to add some responsive rules along with your margins. 

 

IMO DMS was designed to make these types of grid changes simple, but its hard for us to see exactly what you're going for and why the tools aren't helping you get there... 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now