Jump to content

Archived

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

Adrianna Lima

Column Span

Recommended Posts

Adrianna Lima

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
Rob
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.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob

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.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Adrianna Lima
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
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Adrianna Lima
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
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Adrianna Lima

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
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Andrew

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

  • Similar Content

    • dbrowne02
      By dbrowne02+
      Hi, I am trying to figure out how to create columns where the text flows into the next column, like the attached, and am flummoxed. Does anyone have any ideas? 

    • tkpagelines
      By tkpagelines+
      Hi there,
      how to make the corners of boxed columns round ?
      Any suggestions ?
      Thanks
    • JawDesigns
      By JawDesigns
      Hi to all,
      I always have this problem and I'm unhappy with the fix I usually apply for aligning columns at the bottom (see attached).
      For example: I use two text boxes side by side. Both text columns have a background colour. Text column 1 has 200 words and text column 2 has 300 words.
      How do I easily get them to align at the bottom without using a min-height declaration? I want to get text column 1 with 200 words to fit the height of text column 2 if that makes sense?
      Thanks for any help on this!
      Cheers,
      James

    • jeomiland
      By jeomiland+
      For quite a while I have worked around a refresh issue but it seems quite convoluted and near impossible to explain to clients. According to a lesson in PagelinesAcademy, it is because of javascript but there must be a more elegant way to deal with this. Here are 2 scenarios:
      1) Custom CSS: I add a css style to custom css, then have to select Edit in a component, then click in 2 text boxes to get the Refresh icon in the tools pallet to show. I click Publish a couple times then Refresh and hope that the new CSS code is still there - half the time it is not, so I have to redo a couple times till the system keeps it. Your "Tip: Hit [Cmd⌘+Return] or [Ctrl+Return] to Preview Live" at top of CSS window does nothing on my Macbook Pro.
      2) Home page at: http://199.119.180.102/~harmhill/newsite/ has 2 columns for main template area. In larger right column, I need to add a 3 column above the WPloop and below the image, which are both in that right column. I can drag the 3col section to the right place and it says "Section Added! Refresh page to view." Have tried several ways to get the section to stay and refresh but nothing works! Using cmd-r (refresh) in Mac Chrome, not my trick above... can't get the 3col section to stay on refresh, so no way to add the 3 text boxes required next.
      So 2 questions:  1) what is best way to refresh a page and preserve CSS and sections added and 2) can you put a 3-col inside 1col of a 2-col?
      thanks
    • nandorj78
      By nandorj78+
      Hi, I'd like to know if there is way to put the Hero box right under the column above it. The way it is now (see attached picture) has a lot of blank space. I can't seem to move it up a bit fo fill in this empty space.
×