How to change height of main image in JA Content Listing Module

origomedia

Evening guys,

Can someone explain to me how I can change the height of the main image on the home page JA Content Listing Module on www.prvlge.com I want to keep the width but make the height smaller.

Cheers Jim

cssyeah

Hi @origomedia,
I have add the custom style in the Custom CSS modal to change the height of the main image on the home page. Open the Custom CSS modal to see below CSS code:

/* Custom height for main image on the home page */
.highlight-item .item-style-1 .jacl-item__media {
  padding-bottom: 50%;
}

.highlight-item .item-style-1 .jacl-item__media img {
  height: auto;
}

You can increase or decrease the padding-bottom property to change height of main image.

Kind regards,

origomedia

cssyeah cssyeah Thanks.

BTW you know you helped out with https://www.joomlart.com/forums/d/51041-logo-doubling-up-on-page/2 I just noticed on some pages when I look at it on my handphone (https://prvlge.com/index.php/tours-activities) there are some logos still doubled up. Any suggestions.

Cheers Jim

origomedia

Sorry cssyeah

is it in Editing file "‎/templates/ja_blockk/css/custom.css" in template "ja_blockk". as I couldn't see it.

Jim

cssyeah

origomedia From template dashboard click to the Tools menu, after click to the Edit Custom CSS modal to see all custom style.

cssyeah

Hi @origomedia,
Update below CSS rule to the Custom CSS modal to fix the double logo issue on mobile.

.navbar-brand .logo-img.logo-dark,
.navbar-brand .logo-img-sm.logo-sm-dark {
  display: none !important;
}

origomedia

cssyeah sorry to sound dumb but where are you navigating to find the template dashboard that looks like the screenshot you have attached? I don't see anything like that so I must be looking in the wrong place.

Thanks for all your help Jim

saguaros

@origomedia Navigate to Administrator Panel >> System >> Site template styles >> JA Blockk

origomedia

Many thanks saguaros I was looking in Site Templates not Site Template Styles.
I edited the code to:
.navbar-brand .logo-img.logo-dark,
.navbar-brand .logo-img.logo-sm-dark {
display: none !important;
}

But the double logo is still showing on this page https://prvlge.com/index.php/tours-activities just in mobile view.

Any suggestions? Have I done it wrong?

Jim

cssyeah

origomedia
Sorry I updated CSS code in above post. Help me update to your website:
New code:

.navbar-brand .logo-img.logo-dark,
.navbar-brand .logo-img-sm.logo-sm-dark {
  display: none !important;
}

origomedia

Sorry cssyeah it is still the same after I added it.

cssyeah

Hi,
Please try clearing cache on your website. Or share us admin login account. I will check this issue.

Best regards,

origomedia

cssyeah Not sure how to share the admin details without them being public. However, they are shown in this previous post https://www.joomlart.com/forums/d/51098-new-module-not-displaying

Thanks Jim

cssyeah

origomedia Thank you. I have edited the custom style and It worked.

origomedia

Thanks cssyeah,

I am always trying to learn. Had I put it in the wrong place or made an error when I pasted it?

Cheers Jim

cssyeah

origomedia
You have the correct file but the CSS code is the old code. I changed it to the new code and it worked.

origomedia

Hi cssyeah I just realised that when you look at the home page now on a mobile phone the first image is smaller than the other images in the articles underneath it www.prvlge.com is there some code I can change that would keep it the same in the mobile version? Many thanks Jim

cssyeah

Hi Jim,
The images in each section are displayed at different aspect ratios. Additionally, the size of your first image differs from the other images. As a result, increasing the height of the first image to match the others will create a gap at the bottom.

If you want the first image to have the same height as the others on mobile, you need to ensure all images maintain the same proportional dimensions.

Kind regards,

origomedia

ok thanks