Jump to content


Photo
- - - - -

Boxes : changing widths from 50% : 50% to 35% : 65% when 2 boxes display


  • Please log in to reply
3 replies to this topic

#1 shpr

shpr

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 18 March 2013 - 02:25 PM

Hello,

 

I have a set of boxes, containing 2 boxes displayed in one row. They are evenly distributed across the page 50:50.

 

How can I make it so the 1st box is 35% width and the 2nd box is 65% of the width?

 

Thanks



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 18 March 2013 - 02:57 PM

You’ll need to use Custom CSS (in Site Options > Custom Code > Custom CSS/LESS). To find the Custom CSS you need, you'll need to use Firebug (or Chrome Development tools). To learn how to use Firebug for CSS customizations, please review this entire documentation and follow the instructions:

Please Login or Register to see this Hidden Content

. For further insight about the width property, please see this documentation:

Please Login or Register to see this Hidden Content

.



#3 shpr

shpr

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 18 March 2013 - 03:25 PM

Hi catrina,

 

can you provide any further clues?

 

I'm happy to use firebug & make amendments in the customization section (have done quite a few already) but can't seem to figure this one out :(

 

I see:

 

 

<div class="pprow grid-row fix ">
 

<div class="grid-element pp2 img_grid ">

 

Which I think are for the full width (both boxes)

 

I can't figure out how to alter the % width of the two boxes...is it related to <div id="fbox_204" ? Seems more difficult than the other things I've done.

 

Thanks

 

 



#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 18 March 2013 - 05:09 PM

You are right, it is related to div id=fbox_204 so the CSS would look something like:

 

 

Please Login or Register to see this Hidden Content