Images aligning issues using page builder

[DenisK]

Morning Bill,

I am including product like images on my home page that will link and take folks to the latest posts.

I am running into Alignment issues using different widgets from Page Builder I was hoping maybe you can in the right directions:

1. I tried Page builder Image widget, tried regular Editor, Hero Image option and none of them seem to line up my images properly. ( My images are the same for height 700px ). Please see attached image.

2. Then I tried “Site Origin Carousel Post” What that does is stretching my images, I guess because by default the are in the “landscaping mode” and it makes them look very blurry. Sample Image Attached.

Why do you think this is happening and what would you recommend?

Thank you very much.

Attachments:

1. 

   Screen-Shot-2016-04-21-at-9.11.31-AM.png
   

2. 

   Screen-Shot-2016-04-21-at-9.38.45-AM.png
   

[Bill Robbins]

This reply has been marked as private.

[Bill Robbins]

Hey Denis,

If you just need to line up three images that are the same size with or without links, here’s how I would do it.

Create a row with three columns in it. Add a visual editor widget to each column. In each of those insert an image. If they are already resized, then insert the full sized image and set the alignment to none. Since the row/columns take care of the layout, we don’t need the image to float one way or another.

That’s how I would approach just adding three simple images with or without links to a row.

Bill

[DenisK]

That is the part I don’t understand ) All three images same height 700 px,however they all look different once I upload them. If nothing else I will find another way. The page builder is a nice tool but still needs some figuring out and getting used to.

Thank you.

Attachments:

1. 

   Screen-Shot-2016-04-21-at-2.51.53-PM.png
   

[Bill Robbins]

Hi Denis,

To keep things uniform, make sure they have the same height and width. Here are the sizes of the images in that row:

The girl with pink hair is width=”494″ height=”700″
The black blazer is width=”447″ height=”700″
The flared jeans is width=”494″ height=”744″

The width being wider than the column is will cause the image to be scaled down by the browser. So an image that is wider than another one of the same height may end up shorter on the front end because it is so wide. Does that make sense?

To keep them all the same size on the front end, make sure to upload the same size image; not just height, but also width.

Bill

[DenisK]

Thank you much Bill.

Have a good evening.

[Author]

Posts