Public Forums 71,145 posts

[bobptz Friend bobptzJoin date: November 2016Posts: 178Downloads:8Uploads:19 Thanks: 1 Thanked: 1 times in 1 posts]

#998651

The solution that seems to work for me is this:

I use the img-responsive class for the images. <img src="images/….jpg" class="img-responsive" />

Then in custom.css I wrote this rule: .img-responsive { width: auto!important; }

[kopetschke Friend kopetschkeJoin date: December 2016Posts: 51Downloads:6Uploads:14]

#998676

My hint is to set the max width for the images in the article itself!

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#998826

Hi
You can replace the above code value to

@media screen and (max-width: 992px)

into

@media screen (min-width:468px) and (max-width: 992px)

Now it work when width is between 468 and 992px.
Regards

[bobptz Friend bobptzJoin date: November 2016Posts: 178Downloads:8Uploads:19 Thanks: 1 Thanked: 1 times in 1 posts]

#998905

Hello

I did try to replace the code with this (in chrome inspect element):

@media screen and (min-width:468px) and (max-width: 992px) 

The result was that for screen sizes 468px – 992px, the small images expanded too much (100%). So this did not solve my problem.

However for smaller screen (browser) sizes (<468px), the images were nice and small, as expected.

The best solution I can find is to replace (in file /t3-assets/dev/templates.purity_iii.less.joomla.less.css) this:

width: 100% !important;

with this:

width: auto;

I just don’t know what the implications will be elsewhere.

Maybe the coders/developers could have a look at this issue. From what I read, the "!important" command usually causes problems, like the one I faced.

[bobptz Friend bobptzJoin date: November 2016Posts: 178Downloads:8Uploads:19 Thanks: 1 Thanked: 1 times in 1 posts]

#998913

kopetschke wrote:

My hint is to set the max width for the images in the article itself!

Hi

This is a great idea. Maybe better than changing the custom.css.

I just want to clear the issue with the ( width: 100% !important; ). I am afraid it will cause trouble in other places too.

[bobptz Friend bobptzJoin date: November 2016Posts: 178Downloads:8Uploads:19 Thanks: 1 Thanked: 1 times in 1 posts]

#999028

@pankaj Sharma

bobptz wrote:

The best solution I can find is to replace (in file /t3-assets/dev/templates.purity_iii.less.joomla.less.css) this:

I need to find the .LESS file to change. This is the .CSS file. When I compiled the less files into css files, that file was overwritten.

So which is the .LESS file that contains the code I need to change?

Is it this file? /templates/purity_iii/less/joomla.less

I do change this file, but when I compile it, /t3-assets/dev/templates.purity_iii.less.joomla.less.css is not affected. Am I doing something wrong?

Do I have to edit the file from joomla template manager? Is it wrong if I edit it with my TXT editor and upload it with FTP, then compile LESS to CSS?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#999069

Hi
I suggest you to use custom.css file and override the style code.
T3Assets is temp. Folder used to cache the css.

[bobptz Friend bobptzJoin date: November 2016Posts: 178Downloads:8Uploads:19 Thanks: 1 Thanked: 1 times in 1 posts]

#999075

Hello

Thank you for your suggestion. However I am trying to follow this guide:
https://www.joomlart.com/documentation/joomla-faqs/embed-font
section: #4: compile LESS to CSS

So the LESS files to change are here:
/templates/purity_iii/less

Could you tell me where compiled CSS files are placed?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#999079

Hi
Kindly read my last post again and apply the custom override style in custom.css file.
Beside for new topics kindly open new threads.

[bobptz Friend bobptzJoin date: November 2016Posts: 178Downloads:8Uploads:19 Thanks: 1 Thanked: 1 times in 1 posts]

#999639

kopetschke wrote:

My hint is to set the max width for the images in the article itself!

If I try to add css code in a joomla article, then I am adding it in the section. However css rules state that these should go to the section. How do you deal with this?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#999678

Hi
Kindly post your site URL here with a screenshot of the problem so i can suggest you better.

[bobptz Friend bobptzJoin date: November 2016Posts: 178Downloads:8Uploads:19 Thanks: 1 Thanked: 1 times in 1 posts]

#999679

No problem. I used the sourcerer joomla extension to place the css code on the article. This is a good alternative to using custom.css, if I only want to change the styling in several articles.

[Author]

Posts