Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • bobptz Friend
    #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
    #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
    #1012057
    This reply has been marked as private.
    Pankaj Sharma Moderator
    #1012072

    Hi
    Kindly replace the width with:auto to

    max-width:100%!important
    

    This will fix the problem.

    bobptz Friend
    #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
    #1012087

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

    Regards

    bobptz Friend
    #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
    #1012114

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

    Regards

    bobptz Friend
    #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
    #1061335

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

    Regards

    bobptz Friend
    #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
    #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

Viewing 12 posts - 1 through 12 (of 12 total)

This topic contains 11 replies, has 2 voices, and was last updated by  Pankaj Sharma 1 week ago.

You must be logged in to reply to this topic.