Centering Category Views in Fluid Width pages (Responsive)

[KaiWulf]

Browsing the forum I have noticed a few people with issues centering their category view on a page, even after setting a fixed width. I have overcome those limitations and found a way to center a fluid width gallery.

This is currently working with T3 Framework and Bootstrap on J!3 and Phoca 4.x. I have not tested it with non-framework sites or other frameworks for that matter. Im simply putting my results up in the hopes that it helps someone else looking for a solution that doesnt break responsive design.

I am using medium thumbnails with image settings in Phoca for medium at 350 width, 250 height. This produces between 1 and 4 columns of centered thumbnails as the browser is resized up to a 1920x1080 resolution screen

First, go into Styles in the Phoca Gallery Admin, and open up the Default file. Look for the Phoca Gallery Category View options starting at line 40.

Code: Select all

/* Phoca Gallery Category View */
.pg-cv-box {
   float: left;
   padding: 10px;
   margin: 5px;

You'll want to alter this code as follows:

Code: Select all

.pg-cv-box {
   float: none;
   padding: 10px;
   margin: 5px;
   display: inline-block;
}

Save and close

Next, open the Phocagallery file, and navigate to #pg-msnr-container at line 924.

Code: Select all

#pg-msnr-container {
   padding: 0;
   margin: 0;
}

Alter this code as follows:

Code: Select all

#pg-msnr-container {
   padding: 0;
   margin: 0;
   text-align: center;
}

Save and close.

Thats it! You should now have a centered gallery.

One caveat: If you have Return to Galleries thumbnail navigation enabled, this change currently causes the navigation thumbnail to vertically offset by a few pixels. Depending on how you look at it, its either a good or bad thing. For those who want everything perfectly aligned, it may be upsetting. For those that like the idea of the nav being slightly offset to denote its not part of the gallery images, it may be an okay thing. Im looking at ways to address the issue and will update if I find anything.

One other note: The images themselves are still not responsive, but 350 width on a smartphone isnt completely terrible.

[Jan]

Hi, thank you very much for the guide.

Jan