1. ColDee
  2. Sherlock Holmes
  3. Commercial Templates
  4. Tuesday, 30 November 2021
  5.  Subscribe via email
Hi,

I've added the following css to the J51 News module:

.j51news-image img {
height: 300px;
border: 5px solid #000;
}

The problem I have is I don't want the images to be cropped. Can you let me know what I need to add.

Thanks.
References
  1. https://www.gallerymckee.co.uk/NewSite/galleries/paintings
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

Sorry, I made the site live. Here it is:

https://gallerymckee.com/galleries/paintings

Regards,
Colin.
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
HI Colin

Would you have a URL to your gallery? The mentioned URL in this post appears to be nom longer valid.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
That's great, thank you.

I did mean to ask if the image and text could be centred vertically. Not sure if that's possible?

I also tried to edit the font size using the following css, but it didn't work?
.j51news figcaption {
font-size: 20px;
}

Regards,
Colin.
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Colin

Presuming I understand you correctly, your images appear to be already centered horizontally. To centre the title, try also adding the following to your Custom CSS.

.j51news figcaption {
text-align: center;
}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

The Gallery is looking so much better now. Thanks.

I'm not sure if this is possible, but it would make a huge improvement to the presentation of the images if they were centred horizontally and the titles were aligned at the bottom?

Regards,
Colin.
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
Brilliant. You've made my day.

Regards,
Colin.
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Colin

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

(edit to taste)

.j51news .j51news-image > a {
max-height: 260px;
}
.j51news-image img {
object-fit: contain;
}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks for your help with this.

I need all the paintings in a row with a maximum height. Not stretched or cropped.

Regards,
Colin.
  1. more than a month ago
  2. Commercial Templates
  3. # 8
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

It seems the CSS you have added is stretching your images rather than cropping them. Is this the intended behaviour? Considering the different ratios of each of your images, a better approach might be to use the masonry option available in your news module settings.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 9
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.