Jump to content


Photo
- - - - -

Tweaking Masonic Gallery with CSS

masonic gallery css square

  • Please log in to reply
3 replies to this topic

#1 warm__tape

warm__tape

    Newbie

  • Members

  • 7 posts
  • Framework Version:DMS 2.1
  • Country: Country Flag

Posted 28 July 2014 - 10:54 AM

Hi all,

 

I'm trying to customise my masonic gallery on a site im working on. Basically, I want the grid items to be square, and for the images to proportionately fill the background.

 

I've got the following code working to achieve part of the solution:

 
.pl-grid-image {height:250px!important;overflow:hidden!important;}

.pl-grid-image img {width:100%!important;height:auto!important;}

Which achieves the following: (ignore missing images)

 

Attached File  masonic.gif   97KB   0 downloads

 

Obviously the problem is that the images arent a ) centred b ) filling the container and c ) the same height as the column is wide.

Where should I go to from here? any help would be much appreciated.

Brad


Edited by warm__tape, 28 July 2014 - 11:04 AM.


#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16923 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 July 2014 - 12:17 PM

HI,

 

It's hard to see what the problem with a link to the site in question. Can you please provide one so we can take a closer look.



#3 warm__tape

warm__tape

    Newbie

  • Members

  • 7 posts
  • Framework Version:DMS 2.1
  • Country: Country Flag

Posted 28 July 2014 - 12:26 PM

I've posted a capture of the area in question- the site is incomplete so not publically available. What I need to do is make the masonic gallery tiles square, and have the images fill them.



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16923 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 29 July 2014 - 11:43 AM

If you add images that are squared to begin with then there should be no need for customizing the section. For example, I have just uploaded an image that is 500x500 and when viewed in the Masonic section, the image displayed is squared. So I am not entirely sure what you're trying to do and therefore, I am going to need to view your site so I can get a better understanding.