1

I am asking about this again because the solution from joomla v3.6 article - uploaded image stretches to max does not seem to work for me.

The issue I have is the article images keeping their size when I view the website on my smart phone device, whereas on my desktop monitor, their width stretch fully, resulting in humongous, degraded images in my articles.

Could anyone suggest a fix for me? I have spent hours on this but still cannot resolve it.

Many thanks.

Image issue example

The following are codes(only the ones that refer to img tag)have been extracted from the template.CSS file in the CSS folder from the website Joomla back-end.

.features-list .feature-row div:first-child.feature-img img {
  float: left;
}
.features-list .feature-row div:last-child.feature-img img {
  float: right;
}
article-intro img,
.article-content img {
  display: block;
  width: 100% \9;
  max-width: 100%;
  height: auto;
}
.article-intro img[align=left],
.article-content img[align=left],
.article-intro .img_caption.left,
.article-content .img_caption.left,
.article-intro .pull-left.item-image,
.article-content .pull-left.item-image {
  margin: 0 30px 20px 0;
}
.article-intro img[align=right],
.article-content img[align=right],
.article-intro .img_caption.right,
.article-content .img_caption.right,
.article-intro .pull-right.item-image,
.article-content .pull-right.item-image {
  margin: 0 0 20px 30px;
}
@media (max-width: 768px) {
  .article-content iframe {
    width: 100% !important;
    height: auto;
  }
}
.img-intro-none,
.img-intro-left,
.img-intro-right,
.img-fulltext-none,
.img-fulltext-left,
.img-fulltext-right,
.img_caption {
  position: relative;
}
.img-intro-none,
.img-intro-left,
.img-intro-right,
.img-fulltext-none,
.img-fulltext-left,
.img-fulltext-right,
.img_caption {
  margin-bottom: 20px;
  max-width: 100%;
}
.img-fulltext-left {
  float: left;
  margin-right: 20px;
}
.img-fulltext-right {
  float: right;
  margin-left: 20px;
}
.img-intro-none img,
.img-intro-left img,
.img-intro-right img,
.img-fulltext-none img,
.img-fulltext-left img,
.img-fulltext-right img {
  margin: 0;
}
.img_caption img {
  margin-bottom: 1px !important;
}
.img_caption p.img_caption {
  background: #eeeeee;
  color: #555555;
  font-size: 12px;
  width: 100%;
  margin: 0;
  padding: 5px;
  text-align: center;
  clear: both;
}
@media screen and (max-width: 767px) {
  article img[align=left],
  .img_caption.left,
  article img[align=right],
  .img_caption.right,
  .img-fulltext-left,
  .img-fulltext-right {
    float: none !important;
    margin-left: 0;
    margin-right: 0;
    width: 100% !important;
  }
}
3

Normally you won't find good answers that are specific to the template you use. All templates are different.

I visited your page and in your case you have this in your template CSS (line 3891 in http://elitemaths.com.au/templates/elitemaths/local/css/themes/elitemaths/template.css): .article-intro img, .article-content img, .article-image-full img { width: 100%; }

Change the 100% part to initial and that should do it for you.

  • It worked beautifully. – Will Kim Feb 3 '17 at 7:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.