Bootstrap Layout Question

[barefootMarc]

I’m trying to find a way to best display these tiles. Ideally I want them to float left, and stack accordingly.

I have set the max width to 20% so that no more than 5 tiles display in each row. Width 100%. Min-width 250px.

If they could arrange like “Gallery Masonry” that would be ideal.

Shot in the dark, but if there’s a way to display the columns as an array that would solve the problem.

Cheers,

Marc

[barefootMarc]

So instead of each column display as a column, just display as a container.

[Kyle – SUPPORT]

Hi

Not really sure what you have done, seems like a lot of customisation has been made. How come the tiles are stacked instead of side by side? What have you done to make them?

– Kyle

[barefootMarc]

Hi Kyle,

They are all full width columns. I’m trying to get them to take up as much of the screen as possible.
I’ve started playing with @media to see if I can get specific width % based on browser size. The goal is to have 5 tiles for devices with 900px of width or more.
3 tiles for 700-900 and 2 for 450-700 and 1 for everything smaller.

If I set the width of every column to 1/6th I can trick the theme to displaying my intended design, but the Swift theme builder slows down big time, and moving tiles around is next to impossible.

Most edits are now being down by copying the code, and editing in dreamweaver, then pasting the code back in.

I think i’ve pushed the theme as far as it can go with custom css.

[barefootMarc]

ROW SECTION is called “Tile Menu” can I target the spb_column width=”1/4″ using cs3 and change that 1/4 to 1/3 depending on browser window?

for instance
@media only screen and (min-width:960px){
/* styles for browsers larger than 960px; */
.Tile Menu .spb_column { width=”1/6″
}}

@media only screen and (min-width:700px){
/* styles for browsers larger than 700px; */
.Tile Menu .spb_column {width=”1/3″
}}

[barefootMarc]

woops

@media only screen and (min-width:960px){
/* styles for browsers larger than 960px; */
.Tile Menu .spb_column { width:16%;
}}

@media only screen and (min-width:700px){
/* styles for browsers larger than 700px; */
.Tile Menu .spb_column {width:33%;
}}

[barefootMarc]

NOt resolved but going to re word the question.

[David Martin – Support]

Duplucate thread, now answered in your new thread: http://www.swiftideas.com/forums/topic/change-column-width-from-14-to-16-using-media/