Joomla Category Blog Pictures

Hi,

I have been applying news2 template to my site and i figure out that in Joomla Category Blog View images are not responsive although images don't have height or width attributes.

You can see from the attachment.

Could You please post an url to your site - to exact place where I can see this problem?

Because of this problem i couldn't apply News2 template to my existing online site. It's in localhost now.

Ok i've solved the problem.

What was the solution?

I couldn't solve for internet explorer and firefox.

Responsive design for Internet Explorer and Firefox is not working in Joomla Categories pages.

Can you help please?

http://www.avmindirim.com/modavetrend.html

Images are not getting responsive although there is no height width attributes in category blog view. But if i delete display:table-cell images are getting responsive but not columns.

Code: Select all

.blog .items-row > div,
.blog-featured .items-row > div {
   border-left: 1px solid #e5e5e5;
   border-top: 1px solid #e5e5e5;
   padding: 32px;
   vertical-align: top;
}

Any help??

Could You please post an url to your site?

Could You please post an url to your site?

http://www.avmindirim.com/modavetrend.html

Hi

I was asked to take a look at the issue. I think adding this code to css should help:

Code: Select all

section img {
    height: auto !important;
    max-width: 100% !important;
    width: 100%;
}


Hi

I was asked to take a look at the issue. I think adding this code to css should help:

Code: Select all

section img {
    height: auto !important;
    max-width: 100% !important;
    width: 100%;
}


Ok it works thank you

Hi

I was asked to take a look at the issue. I think adding this code to css should help:

Code: Select all

section img {
    height: auto !important;
    max-width: 100% !important;
    width: 100%;
}


Today i noticed, this code justify all of my images including my medium images (width : 200px) in my articles. Isnt't it possible to apply this code only for category blog view? I have thousands of medium images it's not possible to add height and width all of them. And before news2 i was also using responsive template there was no problem.

Thanks

Hi

Sure it is possible. Use this code like that:

Code: Select all

.blog.itemList img {
    height: auto !important;
    max-width: 100% !important;
    width: 100%;
}


Ok thank you.

Hello again,

I can't understand but there is a same problem for the sub-categories blog layout? Can you check please?

http://www.avmindirim.com/banka-firsatlari/worldcard.html

Could you post a screenshot and info about browser in which you see the problem?
I have checked Chrome and FF Mac - all seems ok,

Hi,

Here are the screenshots of ff28 & ie11 (win7)

Thanks

Please correct the change you did to override.css so it looks this way:

Code: Select all

.blog.itemList img {
height: auto !important;
max-width: 100% !important;
width: 100% !important;


and write back if it helped.

Please correct the change you did to override.css so it looks this way:

Code: Select all

.blog.itemList img {
height: auto !important;
max-width: 100% !important;
width: 100% !important;


and write back if it helped.

Yes it works thank you again

Hello,

After adding this css code to override.css i had noticed that some small logo images (200x150px) in my articles viewing so badly in my website at Category Blog View.

I have articles with logo images. And some of my categories have only one article. Category view of these categories are very bad-looking as you can see at the attachment.

I've tried to solve this issue but i couldn't. Can you help me please how can i make the logo (small size images ex:200x150px) to appear well in responsive view.

Thanks and Regards

Could you please post an url to your site to a place where the problem can be seen and create a screenshot of desired outcome?

Could you please post an url to your site to a place where the problem can be seen and create a screenshot of desired outcome?

Example :
http://www.avmindirim.com/avmdunyasi/kirikkale.html

The image is normally 200x150px.

http://www.avmindirim.com/avmdunyasi/bursa.html

Images are 200x150px size. They are not looking well.

Could you please post an url to your site to a place where the problem can be seen and create a screenshot of desired outcome?

Sorry for late response...
In your override,css you have this declaration:

Code: Select all

.blog.itemList img {
   height: auto !important;
   max-width: 100% !important;
   width: 100% !important;
}


I don't know what was the purpose of it, but if you will modify it to:

Code: Select all

.blog.itemList img {
   height: auto !important;
   max-width: 100% !important;
}


images will not be enlarged.

Hi,

You wrote me to do it like this because if it is like that in firefox and ie, this is breaking the responsive feature of the website.

As you can see in the attachment.

I have asked more advanced developers for help. I'll write back as soon as I'll get an answer.

Ok thank you if it helps you, i noticed that in tag category pages everything is normal.

You can see here

http://www.avmindirim.com/tag/3676-palm ... m-avm.html

I have asked more advanced developers for help. I'll write back as soon as I'll get an answer.

No solution yet?

Still waiting.

Please send me a PM with:
1. URL to your website
2. login and password of user with admin/super-admin privileges (please create one for me)
3. ftp data (host, user, password)
4. link to this thread

I sent.

Please send me a PM with:
1. URL to your website
2. login and password of user with admin/super-admin privileges (please create one for me)
3. ftp data (host, user, password)
4. link to this thread

Ok, here is a solution proposed by our devteam:
1. Remove previous overrides:

Code: Select all

section img {
    height: auto !important;
    max-width: 100% !important;
    width: 100%;
}
.blog.itemList img {
   height: auto !important;
   max-width: 100% !important;
   width: 100% !important;
}


(they are commented out in your code)
Now add this override:

Code: Select all

#gkMainbody .blog.itemList, #gkMainbody .blog-featured.itemList {
   width: 100%;
   table-layout: fixed;
   margin: 0;   
}
#gkMainbody {
   padding: 32px 0
}
section article {
   padding: 0 32px;
}


This is already done on your site so it should look fine.

Ok thank you very much

After changing override css there were some blank paddings at mobile and tablet view. And because of

Code: Select all

#gkMainbody {
   padding: 32px 0;
}

Some Modules sticked to the borders at home page and search page.

I've implemented your code with a module and it is now how i want, with your help.

Great work.

Regards.

Is there anything else I can help you with regarding this topic?

It's ok now thank you very much

Is there anything else I can help you with regarding this topic?