0

I am new-ish to what I am trying to do which is revamp the website for a local non-profit --Joomla 3, what they've been using, is reaching end of life and their previous template provider isn't moving to J! 4.

A template that would be compatible with J! 4 was purchased through RocketTheme which uses Gantry 5 and Particles. I have been stumbling my way through manipluating the page elements but seem to have hit a few impasses. I thought I would reach out and see if there were recommendatins for both this specific instance and general reading that may help me out at some point.

What I'm trying to show in the picture is that there are going to be lots of images-- this is a staff page I'm working on now but want to have a nice big actual "promo image" (as teh particle is called) at the top. I thought it would look snappy to have the staff blurbs show when the pictures are hovered over, which this particle allows for. The problem is the size inconsistency. I can only figure out a way to affect all .g-promoimage sizes via the _promoimage.scss as it seemed like nothing I added to the custom.css I made affected it. But since the top image is a promo image particle as well, and I want it to stay promo sized, that solution won't work. I managed to get specific particles classified as g-promoimage-staff so they could be set to a uniform size, but no matter where I put the following coding, in either of the aforementioned .(s)css files, the particle I have assigned as g-promoimage-staff (Staff 1/ s1) size is unchanged

    .g-promoimage-staff img {
        width: 550px;
        height: 415px;

Have tried with and without img trailing. Example of what I can see with inspect, and kind of shows what I'm trying to change too

As mentioned above I have only been able to get all promoimage sizes to change, but I need only for those I'm indentifying (via the template manager and particles in Joomla backend) as staff to be the set, uniform size I'm going for in this endeavor.

[*Edit: this shows that those two pics are not the same size, which the previous picture doesn't show due to my cropping][1] [1]: https://i.stack.imgur.com/cZkTt.jpg

eMT
  • 1
  • 2

0 Answers0