Images not scaling properly

Support
#1

Hi,
I’ve added images to the page: http://www.mobileod.s6.fcomet.com/wpmobile/x/#/content/40, but can’t seem to get them to scale to the size I want. Very large images appear very small (see section 2), small images appear large (see section 3).

How can I make the images of the page look like the image sizes in this page?
www.evaforcolp.com

In section 2, I want the image to fill all of the right part of the row. In section 3, I want the images to be smaller icons and fill up the right side of the row, but only aligned to the end.

Thanks so much,
Alon

#2

Hey Alon,

Section 2. Move or drag your image to the right column and your text to the left. Add width:100% in the Image element’s Style field.

Section 3. The Image element does not scale on desktop. It will only scale down on mobile. With that said, you should use uniform sized images like your small image which has a width of 100px. That is also recommended for performance reasons. Your sample site uses more or less 150 x 150px images. That setup would be the same in X and Pro.

To move your image, simply drag it to the right column and your text to the left.

To align, go to the Column settings and choose a Text Align position.

Thanks.

#3

Thanks!
I’m sorry for the confusion, what I meant about the images is that I want them to stay on the left side (stay on the left column), but fill up the right side of the column from top to bottom in section 3, and the majority of the column in section two - from the top of “introducing the EVA 3.0” until the bottom of the second text section (the white text in smaller size font), excluding the part of the row/column where the black button is placed. How can I do that?

When I set the width to 100% in the image in the left column of section 2 it doesn’t fill to the top, and didn’t fill across the whole column as well. Why?

Aside from that, I can’t seem to get the margin between the first and second elements in the right column in section two to be smaller. I’ve tried adding MAN and PAN to the class in every part (row, column and element) but nothing works. Can you help?
Attached a screen shot.

Thanks!

#4

Hey there,

Your image has a lot of padding naturally. Please remove that in a photo editing software so it will align with the headline.

The only way to separate the button is to put it in a separate row.

The space in the second column comes from the paragraph’s margin. Apply the man class to it. If you don’t see the

tag, chances are, it’s added by WordPress. To fix that, simply wrap your text with a

tag with the class of man.

Thanks.

#5

Thanks! How can I wrap text with a tag with the class of man?

#6

Hello There,

Thanks for updating in! The man class can only be applied to the text element. If you want to specifically wrap the p tag, you can make use of this code:

<p class="man"><span color="#fff">Meet the</span><br><span color="#fff">EVA System 3.0</span></p>

Hope this helps. Please let us know how it goes.