Public Forums 71,145 posts

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

#1011809

If you have a small image (width about 100 px) then in mobiles it will take the entire width, it will look too large and with low resolution. This may look very ugly.

One solution is to write the following rule in custom.css
.img-responsive { width: auto!important; }

However since the above behaviour seems very odd to me, I suspect it may be a bug. Maybe you could tell the developers to look into this issue please?

The way to more permanently fix the problem, made the following change in line 263 in file: /templates/purity_iii/less/joomla.less

BEFORE:
width: 100% !important;

AFTER:
width: auto;

(This was initially discussed here: https://www.joomlart.com/forums/topic/cannot-control-images-in-screens-under-992px/ )

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

#1012015

Hi
The style was defined to make the image 100% width so it will resize the images.
As I asked the URL in the previous post. Can u share the URL here so that i can check it and suggest you changes?
Also do not make it auto because if you use big image you will face issue in resize.

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

#1012057

This reply has been marked as private.

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

#1012072

Hi
Kindly replace the width with:auto to

max-width:100%!important

This will fix the problem.

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

#1012079

Hi

The original code is:

// Reponsive Article Images on Mobile
@media screen and (max-width: @screen-md) {
  article,
  .article-intro {
    img, img[align=left], img[align=right],
    .img_caption,
    .article-image-full,
    .article-image-intro,
    .img-intro-none,
    .img-intro-left,
    .img-intro-right,
    .img-fulltext-none,
    .img-fulltext-left,
    .img-fulltext-right, {
      float: none !important;
      margin-left: 0;
      margin-right: 0;
      width: 100% !important;   
    }
  }
}

So I will replace it with :

// Reponsive Article Images on Mobile
@media screen and (max-width: @screen-md) {
  article,
  .article-intro {
    img, img[align=left], img[align=right],
    .img_caption,
    .article-image-full,
    .article-image-intro,
    .img-intro-none,
    .img-intro-left,
    .img-intro-right,
    .img-fulltext-none,
    .img-fulltext-left,
    .img-fulltext-right, {
      float: none !important;
      margin-left: 0;
      margin-right: 0;
      width: 100% !important;   
max-width:100%!important;  // <<<====  Added new code
    }
  }
}

Correct?

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

#1012087

Hi
You have to remove width: 100% !important; otherwise your image will be 100% width.

Regards

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

#1012109

Yes it works very good for small and large images. Here is the code:

// Reponsive Article Images on Mobile
@media screen and (max-width: @screen-md) {
  article,
  .article-intro {
    img, img[align=left], img[align=right],
    .img_caption,
    .article-image-full,
    .article-image-intro,
    .img-intro-none,
    .img-intro-left,
    .img-intro-right,
    .img-fulltext-none,
    .img-fulltext-left,
    .img-fulltext-right, {
      float: none !important;
      margin-left: 0;
      margin-right: 0;
      max-width: 100% !important;  // changed from width to max-width
    }
  }
}

Maybe the developers should be notified and this change should go into the next release?

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

#1012114

Hi
Yes i already notified it as improvement in the style code.

Regards

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

#1061320

Hi

I have downloaded and I am testing ver 1.2.0 now.

The issue is exactly the same (not fixed).

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

#1061335

Hi
I will remind the team again to look on this issue.

Regards

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

#1074425

Hi

This issue seems to be fixed in version 1.2.1.

I have not noticed any change in the code of /templates/purity_iii/less/joomla.less, but the issue does seem resolved.

Thanks

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

#1074453

Hi
Sorry, I discussed with the team and this looks a personal customisation as in small mostly image preferred to fill the container width.
You can apply the suggestion in local folder and it will not be overridden on template updates.

Regards

• This reply was modified 7 years ago by  Pankaj Sharma.

[Author]

Posts