• Resolved judah75

    (@judah75)


    Hello,

    I’ve been working on changing the Portfolio page on my boss’ website. With the help of Mr. Nevins I was able to release the images from their single column and start setting them in rows.

    I have since resized the images so that they are all the same dimensions.

    What I need to figure out now is how to get four images per row with equal spacing between each and between the border (basically centered inside the border). I need them all on one page rather than separated into two pages. And, if possible, add a second border about 5px in from the first, surrounding the whole thing.

    The page I am working on is here: http://vmvbrands.com/category/portfolio/

    Any help is greatly appreciated,

    Judah

Viewing 3 replies - 1 through 3 (of 3 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    line 318 style.css
    1. change padding from

    5px 0px 5px 5px;

    to

    5px 0px 5px 0px;

    2. add padding-left: 5px; to line 310 from

    .ourProduct ul{
    	margin:0px 0 0 0px;
    	padding:0px;
    	border:solid 1px #7f7f7f;
    	overflow:hidden;
    	border:solid 1px #7db442;
    	overflow:hidden;
    }

    to

    .ourProduct ul{
            padding-left: 5px;
    	margin:0px 0 0 0px;
    	padding:0px;
    	border:solid 1px #7f7f7f;
    	overflow:hidden;
    	border:solid 1px #7db442;
    	overflow:hidden;
    }

    There are 3 divs in the template that are too narrow for 4 images at their current size (#wrapper, #main, #colSpan). You can set them wider and get 4 images across, but it might mess up other pages. Add this to the end of style.css to try it:

    #wrapper, #main, #colSpan { width: 1002px; }

    As an alternative, you can decrease the size of each image.

    To have all images on one page, you can set Admin->Settings->Reading->’Blog pages show at most’ to -1. Again, this might conflict with other pages. In that case, you will need to create a custom template (or modify the current one, if there is one in use) to add the ‘posts_per_page=-1’ argument to the query.

    Thread Starter judah75

    (@judah75)

    Thank you both for your help.

    Andrew, thank you, the padding-left trick worked after I realized there was another padding set at 0 two lines below and took it out. It appears that, with the images at the sizes I’ve set, 15px is the magic number for getting the rows centered.

    vtxyzzy, thank you for the -1 in the Settings area. That worked to perfection. As to the width, I set up colSpan in the css specifically for this page, since all the others use colLeft and colRight. I set the width to match the end of the menu bar, and if I make it larger the area extends right rather than in both directions.

    Anyway, after removing the second padding in ourProduct ul and figuring out the right setting to get the logos centered, it’s all looking excellent.

    I want to thank you both again for your insightful and timely assistance. I hope you have a blessed week.

    Judah

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change php to list images in a row’ is closed to new replies.