Joomla Templates Club 406,261 posts

[brucect Friend brucectJoin date: March 2012Posts: 31Downloads:0Uploads:21 Thanks: 5 Thanked: 1 times in 1 posts]

#202841

JA Appolio Template images not fluid in small screens. I have tried all options and disable plugins 3. party components still its not responsive on images. To test the site I have tried different templates such as JA Biz it works perfectly. Could you please see the screenshots. Last screenshot is captured with JA Biz template as you can see images even with 3. pary image resizer program works fine.

Thank you.

---

Attachments:

1. 
2. 
3. 

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

#555558

HI try this
add this css code into your custom.css file
css/custom.css

@media(max-width:768px) {
img {
vertical-align: middle;
width: 100%!important;
}}

save clear cache and check .

Let me know if it helps

[brucect Friend brucectJoin date: March 2012Posts: 31Downloads:0Uploads:21 Thanks: 5 Thanked: 1 times in 1 posts]

#555620

thanks for your suggestion. but this did not work. I am still developing this site I think changes should not be in .less files?
I look around I did not see any custom.less file in templates less folder either.

Thanks you

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

#555640

create custom.css file in
/template/your ja template/css/custom.css and add above code in it .
clear cache and check it.

[brucect Friend brucectJoin date: March 2012Posts: 31Downloads:0Uploads:21 Thanks: 5 Thanked: 1 times in 1 posts]

#555644

please read first. I tried this already did not work.This is not my first template with Joomlart or Joomla. I know my way around well or file structure. This template has parallax design I think some of the core files overwriting this css option. Even your suggestion custom.css in use When I inspect the code. Please see the screenshot. When I go into inspect element and type there width:100%; it works but in template output dont bring custom.css. file.
By the way I dont use any system cache. when you go cache there is nothing to clear.
please see: screenshot 4

Thank you for your help

---

Attachments:

1. 

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

#555719

<blockquote>This is not my first template with Joomlart or Joomla. I know my way around well or file structure. This template has parallax design I think some of the core files overwriting this css option. </blockquote>

I never says its your first template 🙂

you can add this code . please let me know what issue you faced after adding this code in images .

@media (max-width:768px) {
img {
max-width: 100%;
width: auto;

}}

also i suggest you to add images in article via images&links options .
let me know if it helps.

[brucect Friend brucectJoin date: March 2012Posts: 31Downloads:0Uploads:21 Thanks: 5 Thanked: 1 times in 1 posts]

#555792

Thanks for reply. This code works. I haven’t check any other issues in template this custom.css code might arise but it works responsive now.
I would like to ask another improvement with this template. Responsive template certain sizes of tablets sidebar 2 position overlays to picture or main component content area. This was same before we add custom.css so it has nothing to with the code we add. Please see my screenshot tablet interface 800×600 768×1024. right side Main menu module sits on right side content area. In this case I have a picture there.

Thank you for your help

---

Attachments:

1. 

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

#555868

HI Please add images in article via standard option >> article>>images&link>>intro image -full article image >> http://prntscr.com/586xrs
All templates are designed with the standard options of joomla .
Add images via intro and full article image .
Let me know if this issue still there .

[brucect Friend brucectJoin date: March 2012Posts: 31Downloads:0Uploads:21 Thanks: 5 Thanked: 1 times in 1 posts]

#555941

Thanks for the reply. It works with joomla intro-full image embed but I still think some code is missing in JA Appolio template and needs to fix.
Because When I tried JA Biz and RT Chapelco this problem dont happens.

I believe is standard option is put your image with article-content img. intro-full images recently added options by Joomla

I try to dont use intro-full image because there are a lots of images I have to add many articles. I dont want to resize images for blogs and articles. There is no blog images to articles linking and no resize option. bad design by Joomla team I dont see images in WYSIWYG editor I have to go another tab to preview the pictures. These are really bad cons and I want simple easy design for clients able to edit.

So you think this can be fix in JA Appolio or just use another template?

Thanks for your help

---

Attachments:

1. 
2. 

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

#555946

<blockquote>I believe is standard option is put your image with article-content img. intro-full images recently added options by Joomla</blockquote>
this option is an old option . you can see same in the template demo . all template using standard option.
i suggest you the same because this option is standard and if in future you are going to shift your site on a new template there again you need to change all images into article >> images and links options .
This is not a bug or less feature in the template .
you can use this but its not recommended and may produce problems for future if you are go for change in templates .
if still want to use . just replace the previous custom.css code
with this code

@media (max-width:984px) {img {max-width: 100%;width: auto;}}
.
Hope it helps you 🙂

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#555949

Try adding this code in custom.css

.article-intro img {
max-width: 100% !important;

}

[brucect Friend brucectJoin date: March 2012Posts: 31Downloads:0Uploads:21 Thanks: 5 Thanked: 1 times in 1 posts]

#555951

<blockquote>this option is an old option . you can see same in the template demo . all template using standard option . and
i again suggest you the same because this option is standard and if in future you are going to shift your site on a new template there again you need to change all images into article >> images and links options .</blockquote>

I get your point for future direction of the Joomla and article images.This is very inconvenient and unfortunate way for the users.

<blockquote>This is not a bug or less feature in the template . </blockquote>

What is the explanation of two other templates work fine.

<blockquote>@media (max-width:984px) {img {max-width: 100%;width: auto;}}</blockquote>

this code did not worked. Any suggestions?

Thanks for your help

---

Attachments:

1. 

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

#555953

Hi @brucect seems you have not added the new code .
see this >> http://prntscr.com/588wuv
its still showing old code.

i fixed it directly on your site . I removed previous code and added this code .

.article-content img {max-width: 100%!important ;width: auto;}


Please check your site now .

Let me know if it helps

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#555954

I have added these codes to your site’s custom.css. please browser cache and check your site. It looks good now. Please check and confirm.


.article-content img {
max-width: 100% !important;
width: auto;
}
.article-intro img {
max-width: 100% !important;

}

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

#555957

<em>@Chavan 454033 wrote:</em><blockquote>I have added these codes to your site’s custom.css. please browser cache and check your site. It looks good now. Please check and confirm.


.article-content img {
max-width: 100% !important;
width: auto;
}
.article-intro img {
max-width: 100% !important;
}

</blockquote>
@chavan please revert the changes if you done on user . i already fixed it on user site. it will make conflict and confusion for user . @brucect Please check and verify if your issue is solved 🙂

1 user says Thank You to Pankaj Sharma for this useful post

1. brucect

[Author]

Posts