Jump to content

Archived

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

karenb

iBox – set height = width

Recommended Posts

karenb

Hi

 

How do i set a height equal to a dynamic width?

 

 .i-box text & .i-box-desc { height: XX px;}

 

where xx = width of span#?

 

I have tried variations like:

 

@cmc-box-height: @GridColumnWidth;
 
@cmc-box-height: (@fluidGridColumnWidth * 3px);
 
@cmc-box-height: (@fluidGridColumnWidth * @media(max-width) * 3px);
 
Any suggestions?
 
Thanks
 
Karen

Share this post


Link to post
Share on other sites
Danny

HI Karen,

 

Not entirely sure what you're trying to do, can you explain in greater detail please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
karenb

Hi Danny

 

I love how the responsive aspects allow ibox (or grid code within text box) to smoothly narrow with screen size until they collapse into a column.

 

I am working on a site where the art-director wants a strict 5 x 5 grid look.

 

So far I have created the look with ibox (and text box) with:

.no media, 

.no title, 

.@fluidcolumnwidth% =19.1%  to make span5 full width.

 

                                    (PS having done this, textbox/column refuse to shrink to span1

                                          Do you know how I can fix that?)

 

I am trying to get that effect with navigation ie 5 squares lined up that narrow responsively before collapsing for mobile view.

 

So far I have tried 3 ways:

 

1. Craft the navbar:

- great for 

     A  colors base, active and hover

     B  collapses into an icon for iOS

     C whole block is active for the link

 

- but I can't

     D  set the width to be the same as "span1" so that it changes responsively

     E  or stop it from overflowing to a messy two lines before collapsing

 

2. Use a text box  (Placed row/span/link code into a text box.) and

3. Use an ibox (placed links into each box) 

 

with the same results:

- great for 

. D & E and 

. base colors

 

- but can't do 

.active or hover colors or 

.B or C

 

I have attached two screen shots. The first with the navbar artificially set to the same width as the boxes (ie width = xx px) and the second showing the overflow and how the un-responsive nav squares are rediculously large. 

 

(Ignore the colors, they're so I can see background / changes as I go!)

 

What do you think I should do??

 

Thanks

 

Karen

[attachment=1476:Screen Shot 2013-09-06 at 12.16.19 PM.png]

[attachment=1477:Screen Shot 2013-09-06 at 12.15.04 PM.png]

Share this post


Link to post
Share on other sites
karenb

Hi Danny

 

All this would be fixed if the styling classes for individual boxes worked. (Then I would change the ibox background color based on the page-id.)

 

I see on another thread that you reported the box issue on 6/9. 

 

If you can see any other way around please let me know.

 

Thanks

 

Karen

Share this post


Link to post
Share on other sites
Danny

I have reported the issue regarding Styling Classes not working on individual boxes.

I think the best course of action for you would be to use the Grid instead of Boxes, this way you have more control.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×