[Orlando Mergal]

Hi:

I use your Catche Presponsive Pro theme on three of my sites. As far as I know WordPress 4.4 and subsequent versions has offered “responsive images”. Is that something that is supposed to work automatically or is it something that I have to activate somewhere.

Take for example my main site: http://www.accuratecommunications.com/ . The images of “yours truly” that appears at the top is 200 pixels wide. On a computer it looks fine but on my iPhone 5 it looks huge.

Isn’t it supposed to resize on the phone?

[Mahesh]

@accucomm: I checked your site but didn’t see image of “yours truly”. Let me know further.

Regards,
Mahesha

[Orlando Mergal]

Yours truly is me: Orlando Mergal. My photo is on the front page of http://www.accuratecommunications.com/ . It is 200px wide on a computer. It also takes up 200px wide on a smartphone. Isn’t it supposed to shrink on a smartphone?

[Mahesh]

@accucomm: Sorry for the late reply. Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:

@media screen and (max-width: 480px) {
    #attachment_5579 {
        width: 50% !important;
    }
}

Regards,
Mahesh

[Orlando Mergal]

It wuuuuuuurks!!! Thank you very much!

[Orlando Mergal]

Stop the presses!!! I used the CSS code that you suggested on my main site http://www.accuratecommunications.com and it worked like a charm. However, I used the same code on my podcast site http://www.hablandodetecnología.com (which also uses Catch Responsive Pro) and it doesn’t do a thing.

Any idea why?

[Orlando Mergal]

I think I understand what’s going on here. The CSS code is only affecting the image called #attachment_5579.

If that’s the case, would there be a way of affecting all the images that start with #attachment_ ?

I’m not an expert on CSS, so maybe my suggestion is stupid, but what I would like to happen is that all my images would adjust when viewed from a smartphone.

[Mahesh]

@accucomm: Please use the following CSS:

@media screen and (max-width: 480px) {
    #attachment_3978 {
        width: 50% !important;
    }
}

Regards,
Mahesh

[Orlando Mergal]

Once again, I think we are not understanding each other.

This new code would only affect attachment_3978. I want something that will affect all the images on the site.

[Mahesh]

@accucomm: For similar attachment images all over your site, you can use the following CSS:

@media screen and (max-width: 480px) {
    .wp-caption {
        width: 50% !important;
    }
}

Let me know further.

Regards,
Mahesh

[Orlando Mergal]

Better, but still not there.

Take this page from site: http://www.accuratecommunications.com/e-book-publishing/ . It’s the perfect example.

The image at the top (aligned left) and at the bottom (aligned right) do not resize. The ones in the middle do.

The CSS that you suggested works when the image has a caption only. I tried the following iterations and they didn’t work:

@media screen and (max-width: 480px) {
.wp-image {
width: 50% !important;
}
}

@media screen and (max-width: 480px) {
.alignleft size-full wp-image {
width: 50% !important;
}
}

It should be obvious by now that I know nothing about CSS!!!

[Mahesh]

@accucomm: Please add the following CSS:

@media screen and (max-width: 480px) {
    img.alignleft, 
    img.alignright, 
    img.aligncenter{
        width: 50% !important;
    }
}

Hope this helps.

Regards,
Mahesh

[Author]

Posts