Jump to content
Sign in to follow this  
stug

setting box height

Recommended Posts

stug    0
stug

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

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
stug    0
stug

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
Danny    1,327
Danny

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/


Please search our forums, before posting!

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

Sign in to follow this  

×