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.
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;
}
}
