[Resolved] Images added via Toolset Types are not responsive.

[Author]

Posts

[Anonymous]

Hello. My site has Toolset Types installed. Using Toolset Types, I have a "Post Field Group" defined which contains two images, and I have used a Toolset Types shortcode to add these images to my home page (screenshots: hidden link). But these images do not seem to be fully responsive--they do not behave well as the screen width decreases. They display without issue on my 1900 px wide screen. But as the screen width decreases, the images first begin to overlap, then their aspect ratios become completely distorted (screenshots here: hidden link). Here is the page in-question: hidden link. Why is this occurring, and how can I resolve it?

Thanks in advance.

[Luo Yang]

Dear Carl,

First Types shortcode can not output responsive image, in your case, the responsive image is defined by your theme CSS file:
hidden link, line 18:

img.alignright {
    float: right; 
    display: block; 
    padding: 0 0 20px 20px;
}

You can remove it, and test again, see screenshot image-responsive.JPG

[Anonymous]

Thanks for your reply. But I'm a little unclear by your statements.

>> First Types shortcode can not output responsive image

Are you saying that any image added to the page via Toolset Types will not be responsive? I don't think that is the case. I say that because that same page (hidden link) contains three additional images added by a Toolset Types 'post field group' (see attached screenshots)--these three images are indeed responsive as expected.

>> in your case, the responsive image is defined by your theme CSS file:
hidden link?
ver=1502453421, line 18:
You can remove it, and test again, see screenshot image-responsive.JPG

I tried commenting out that line, but the issue was still present. I tried changing float from 'right' to 'none,' but that only alleviated the overlap issue--it did not alleviate the stretching issue at low screen widths.

I'm a bit unclear about the CSS applied to images added via Toolset Types. Shouldn't Toolset Types completely define the CSS applied to each image added via Toolset Types?

Thanks,

Carl

[Luo Yang]

I means this:
Types plugin can output image URL and image HTML code, but it won't apply CSS style to the images, it is your theme who apply the CSS style to the images,

For your question:
-it did not alleviate the stretching issue at low screen widths.

This is defined by your theme file:
hidden link
line 21:

@media only screen and (max-width: 1000px)
.ale-one-half, .articles img, .information .wrapper .block .flcol-3 {
    width: 100%;
}

If I disable it, I see the screenshot image-responsive2.JPG, I suggest you contact your theme author for it.

[Anonymous]

OK thanks for that. I see that now. I will continue to work on the CSS myself to resolve the stretching issue.

One related issue I seem to have with those same two images though is a very slight vertical offset--the two images are not on the same line (see attached screenshot hh-ts-banner-offset). I've looked at the HTML code of the page, and you can see there is a line break (<BR>) after the first image (see attached screenshot hh-ts-banner-offset.html). But I don't see this line break in the WordPress editor (see attached screenshot hh-ts-banner-offset-editor). Am I correct that this line break is the cause of the vertical offset of the images? If so, what is causing this line break, and how do I remove it? If you want me to open a new ticket for this, I can--just let me know.

Thanks,

Carl

[Luo Yang]

There is a CSS name in the left image "alignleft", and there is another CSS class name in the right image: "alignright",
CSS class "alignright"：
padding: 0 0 20px 20px;

I suggest you add same CSS code to "alignleft", for example, add below codes into your theme/style.css:

img.alignleft{
padding: 0 0 20px 20px;
}

[Anonymous]

Thanks for the reply.

>> I suggest you add same CSS code to "alignleft", for example, add below codes into your theme/style.css:

I tried that, but it did not resolve the issue (see my dev site here: hidden link). I also tried removing the padding completely from both images, but that also did not work.

You don't think the issue is due to the extra line break (`<BR>`) between the images?

Thanks,

Carl

[Luo Yang]

This is a new question, please create new thread for the new question, that will help other users to find the answers.

[Anonymous]

OK I will do so. Thanks for your help.