Archived

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

  • 0

setting box height


Question

Posted · Report post

I have a row of five boxes, the images are different heights which is fine and the text content diferent lengths which makes the boxes all different lengths. Is it possible to set it so that they are all the same and the ones with more text just have a scroll bar.

 

Here is the link to the test: http://loveyogaanatomy.com/test-caffe3/

 

Also, I have added some code into the custom code area that I found on the forum to center the headings and text.

That bit works fine, but I tried to alter the background colour just to see if I can change stuff here and that isn't doing anything. I am running a child theme so once I get the effect I want can I cut it from here and put it in the style.css page?

 

body{
#<span class="searchlite">box</span>es h3{text-align:<span class="searchlite">center</span>;} .f<span class="searchlite">box</span>text{text-align:<span class="searchlite">center</span>;}
.page-id-1372 #boxes {background-color: #FF0000;}
}

 

Thanks

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

HI,

 

Boxes do not support an inner scrollbar, if you set boxes to have a min-height, all that will mean is that the boxes will never be less than 500 pixels. If you wish to have a scroll bar inside your boxes, you will need to use custom code. For this kind of customisation, you will want to contact one of our pros.

 

http://www.pagelines.com/pros/

 

If you would like to learn more about coding, I highly recommend the following services,

 

http://www.codecademy.com/

http://www.codeschool.com/

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

The box height should be set by CSS, but this (below) isn't correct CSS:

body{
#<span class="searchlite">box</span>es h3{text-align:<span class="searchlite">center</span>;} .f<span class="searchlite">box</span>text{text-align:<span class="searchlite">center</span>;}
.page-id-1372 #boxes {background-color: #FF0000;}
}

Each box has a unique identifier which is the thing to use for custom CSS.   You find them using Chrome's Inspection Tool or Firebug for Firefox (my preference).

 

In looking at each of your boxes, they're actually all the same height. The visual appearance is simply variable due to the height/volume occupied by text.

 

If all your images were the same height, and you added the exact same text for each box, you'd see no change in the height of the boxes.  Since boxes are vertically responsive, they're going to react to the height of the longest thing in the row of boxes.

 

Should you still wish to modify the CSS, try something like:

#boxes .fbox_960 {min-height: 500px;}

This is just for demonstration purposes.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob, thanks for your help. I know very little about coding so this is stuff that was posted as solution to similar issues. I think the bottom line was about only affecting boxes on a specific page. If I set the height will those boxes with too much text to fit in automatically have a scroll bar?

I would like to know more about the coding is there any documentation that lists the attributes that are available for different sections and how the class structure works?

Share this post


Link to post
Share on other sites