Images getting cut off in Portfolio

Support
#1

Hi,

I don’t know if this a Safari thing but I recently switched laptops and today is the first time I’ve tried to make a modification to a Portfolio Item using Safari instead of Chrome.

The issue I’m having is with this url:

https://vaportours.com/portfolio-item/jamaica-joels/

As you can see from the screenshot the image of Snoop Dogg next to my logo should appear as it does in the Layout Builder but it’s getting cut off. This was simply a replacement of an image which was working just fine and now this is happening.

Thoughts?

Thanks,
Dave

snoop-vapordave
snoop-vapordave3584×2240 754 KB

#2

Hey Dave,

I see you’ve set Snoop Dogg’s photo as a Section Background. Your Section is empty though so nothing is holding the space. In the builder, what’s holding the empty section’s space is the drop area. As soon as you drop an element in there, the drop area will disappear and you’ll get the same display both in the frontend and in the preview.

If you don’t wish to put an element in there, set the Section’s Top Padding to 53.6% to start and the Bottom Padding to 0 like in the screenshot below.

image

You can adjust the Top Padding percentage depending on the aspect ratio you like.

Hope that helps.

#3

Hi, thanks for sharing. I understand about the element being empty, and my first solution was to add an element (within the column that was within the row) and then add an image to that element. When I did that, it brought up the background section as the only way to add an image. Is there another way to add an image via the element route that doesn’t automatically make you use a background layer to insert the image?

Thanks!
Dave

#4

Hi Dave,

There is an Image element that you can use in these cases.

  • Start by removing that background image.
  • Locate the Image element in the library and drag it into the column. You should see a small gray box as a placeholder.
  • Inspect the image by clicking that small gray box, or by finding it on the outline tab and using the magnifying glass icon
  • Use the Image element controls to open the media library and assign the image you want

This will give you an image that shows everything proportionally.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.