Canvas Support

Portfolio images not displaying correctly

3 replies · opened Oct 12, 2016

HHOMEMAKERS_2015Oct 12, 2016

Hi there,

When I have used your measurements for the different size pics on the portfolio section, the images did not come out crystal clear, then when I tried to enlarge the sizes but still keep the same ratios, the layout becomes broken with images not lining up anymore.

When I inspect element, I see that there are inline styles, specifically a 'top' measurement (please find screengrab attached) but I cannot find these to edit them. I have looked on my op-section.html template. I have looked at the index.html file within the op-section folder and outside, but still no luck. I was going to adjust this 'top' element to refit the images together again accurately.

Please can you advise as I am now on day two and need to urgently complete this page. I need the images to still be crisp without breaking the layout, but when I use your measurements for each image I loose quality.

Here is my dev site:
http://www.homemakersmediagroup.co.za/ceilingboyz/one-page/op-section.html

Thanks for your time in advance
Colleen

SSemicolon WebSTAFFOct 14, 2016

Hello,

We have just checked out your Website and the issue appears to be with the Images Sizes and Ratios.

Additionally, The Inline Styles are added by the IsoTope Plugin based on the Best Possible Masonry Layout so there is nothing to worry about this. However, do make sure that you use the Correct Dimensions of the Images for them to display properly in the Mixed Masonry Layout. Here is an Example:

Default Image's Dimensions: 400px in Width and 300px in Height.

Large Image's Dimensions: 800px in Width and 600px in Height. Exactly double in size of the Default Image.

Wide Image's Dimensions: 800px in Width and 300px in Height. Notice that the Width is Double in size, however the Height is same.

Following this Rule should definitely fix the issue for you. Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

HHOMEMAKERS_2015Oct 14, 2016

Hi there,

Thank you for your feedback. I did try these measurements to begin with, but as I mentioned in my previous mailer, the images loose quality. My images are a lot more crisp and clear, but when I upload using your measurements they become less clear, namely 1-4.

I have attached the original pics so that you can see. Is there no way that I can get them to stay as better quality?

Thanks again for you assistance.

SSemicolon WebSTAFFOct 15, 2016

Hello,

Please consider using the following Dimensions for yous Images:

Default Image's Dimensions: 600px in Width and 450px in Height.

Large Image's Dimensions: 1200px in Width and 900px in Height. Exactly double in size of the Default Image.

Wide Image's Dimensions: 1200px in Width and 450px in Height. Notice that the Width is Double in size, however the Height is same.

This should definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard