Featured Picture Boxes Change Size of Featured Picture Boxes

[zhonghao 1]

Hi there - first of all I guess I should ask how / where I should post my question as there doesn't seem to be a 'place' for it.  It concerns adjusting the size for the Featured Picture Box section which I just purchased. I contacted the developer Ryan Varley who suggested I should go to (http://www.pagelines.com/forum/forum/68-store-products/) to post my question so that it can help other people. However there is no option to place a question for Ryan Varley sections and under the Pagelines section there is no option for Featured Picture Boxes. 

 

I would like to resize the boxes as my understanding is that they change dynamically depending on the size of the container they are in. So for example if i have 3 boxes they will be much larger than having 4 boxes in a row. Ryan said to change the padding via css but after looking at the page with the developer tools in Chrome I have no idea how to do this. I have selected and changed padding values for everything I can find relating to the boxes on the page but only seem to be able to chop off the top/bottom of the box or change the navigation menu placement ! I have temporarily solved the problem by just placing 4 boxes on the row but I would like to have only 3 so any help would of course be greatly appreciated.

 

Thanks and regards,

Richard

 

[ryanvarley 0]

Hi, Padding at either side of the boxes can be done by using (place in your custom css or theme css)

#featured-picture-boxes .plgrid-pad {padding: 0 15px 0 15px}

If you want to add spacing between boxes use this

#featured-picture-boxes .grid-element {
    width: 25%;
    margin-right: 8.3%;
}

Where width is the width of a box and margin right is the spacing between them. You should stick to % here to keep them responsive.

 

You make sure you get the calculation right aswell. do 100% / number of boxes (for 3 this is 33.3%) than make sure width + margin-right adds up to this.

 

This will effect ALL featured picture boxes on your page, if your using more than one across the site and only want this to effect a specific set of boxes then add a custom class to it in page options and change #featured-picture-boxes to .customclass (replacing custom class with whatever you called the custom class in page options)

 

If you need more specific help please post a link to your site and what you are trying to achieve.

[zhonghao 1]

Hi Ryan,

 

Thanks very much for such a prompt and detailed reply. You've answered everything -this is just what I was after - much appreciated. Regards, Richard

[mortenoa 0]

Hi Ryan,

 

I have two questions:

 

1. How to decrease the spacing between my boxes? They function as menubuttons and they should be placed closer to each other.

2. I made a lot of "invisible boxes" so I could place the visible boxes on the left. But is it possible to only place one vertical row of boxes on the left?

 

Hope you can help.

 

Many Thanks,

 

Morten 

[mortenoa 0]

The site is btw: http://kropsrummet.dk/test/

[ryanvarley 0]

Hi, given the holidays ill take a look at this for you on thursday.

 

does the answer above not solve the spacing issue?

[ryanvarley 0]

I would start by setting one section with one box per row. this should get you the button style layout. You will then need to have the container section in the side (use a sidebar?) as the boxes fill that space. Alternatively reduce the width of the section with css. You certainly shouldn't need invisible boxes.