Joomla Templates Club 406,261 posts

[dayman Friend daymanJoin date: May 2011Posts: 21Downloads:1Uploads:6 Thanks: 7 Thanked: 1 times in 1 posts]

#190220

I’ve tried about every setting, but can’t seem to change the width of the large image on the attached screenshot.

When you click on one of the thumbnails on the home page this large image appears.

It’s normally about 720 pixels wide, but I want to reduce it to a width of 640 pixels.

Help would be sincerly appreciated!

---

Attachments:

1. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#504315

Hi dayman,

In this case, you will need to adjust the max-width full article image in two files:

– Put below codes into the end of templates/ja_lens/css/template.css file:

.itemImageBlock .itemImage img {
max-width: 640px !important;
}

– Open /templates/ja_lens/css/layout-tablet.css file, find change:

/* MISC.
--------------------------------------------------------- */
.BlogView .itemImageBlock span.itemImage img {
width: 100% !important;
max-width: 100% !important;
}

to

/* MISC.
--------------------------------------------------------- */
.BlogView .itemImageBlock span.itemImage img {
width: 100% !important;
max-width: 640px !important;
}

Then clear System cache.

[dayman Friend daymanJoin date: May 2011Posts: 21Downloads:1Uploads:6 Thanks: 7 Thanked: 1 times in 1 posts]

#504497

Hi Leo,

Thanks for your answer!

I found the line in layout-tablet.css but not in template.css

Are you sure I need to look in template.css ?

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#504508

Hi dayman,

Yes. That is the additional css styles to display the fixed-width images on the desktop and wide device solutions, these need to be added into template.css file.

[dayman Friend daymanJoin date: May 2011Posts: 21Downloads:1Uploads:6 Thanks: 7 Thanked: 1 times in 1 posts]

#504542

I’ve added the code below into the end of “templates/ja_lens/css/template.css” and the photos are now smaller, so that’s good!

.itemImageBlock .itemImage img {max-width: 640px !important;}

.BlogView .itemImageBlock span.itemImage img {
width: 100% !important;
max-width: 640px !important;
}

But the white background stays the original width instead of automatically taking the width of the photos (see attached screenshot).

How can I make the the white background have exactly the same width as the photos?

---

Attachments:

1. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#504551

Hi dayman,

If possible, can put put the website’s url or send me PM ?

[dayman Friend daymanJoin date: May 2011Posts: 21Downloads:1Uploads:6 Thanks: 7 Thanked: 1 times in 1 posts]

#504559

<em>@Leo Burnetts 387888 wrote:</em><blockquote>Hi dayman,

If possible, can put put the website’s url or send me PM ?</blockquote>

I’ve sent you a private message!

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#504644

Hi Thomas,

In order to make the content width to be fitted with the image, you can try to put below css styles into the end of template.css file too:

div.item.masonry-brick.clicked.item-popup-view.grid-trible {
width: 550px !important;
}

Adjust the width until you get perfect, then clear System cache.

1 user says Thank You to phong nam for this useful post

1. dayman

[dayman Friend daymanJoin date: May 2011Posts: 21Downloads:1Uploads:6 Thanks: 7 Thanked: 1 times in 1 posts]

#504770

<em>@Leo Burnetts 388012 wrote:</em><blockquote>Hi Thomas,

In order to make the content width to be fitted with the image, you can try to put below css styles into the end of template.css file too:

div.item.masonry-brick.clicked.item-popup-view.grid-trible {
width: 550px !important;
}

Adjust the width until you get perfect, then clear System cache.</blockquote>

Thanks, you’re a real lifesaver! 🙂

[Author]

Posts