Design inconsistencies - Layout -...

User 1656825 Photo


Registered User
37 posts

Hello CoffeeCup adviser / customer service!

I'm finding design Inconsistencies in the Layout section.

Please, I am grateful to study the image I added.

When I choose to use "one row with one column" or "one row with two columns", the layout preserves the same width of piexeles that I established (838). Everything is OK.

However, when I choose to use "3 or more columns in a row", the layout design reduce the length of the rows "in the right side" but not in the left side.

This reduction increases as I choose more than 3 columns (see the image attached).

If I want to use - in the right column - a "column background with the same color of the background of the mail body", no one would notice the difference.

But if the color of the column "is different" from the color of the background of the mail body, the difference in size will be noted and this isn't very elegant.

I wanted to use a row with 3 columns, but I had to withdraw, because the right column shows the difference in size.

Please, it is necessary to fix this, as for obvious reasons there are serious limitations of design.

It is impossible to use more than two columns with background colors differences, between the columns and the background of the mail body.

I appreciate comments from CoffeeCup, please

Best regards

Attachments:
User 1656825 Photo


Registered User
37 posts

I forgot...

Using or not using "a gutter grid", nothing change...
User 232214 Photo


COO
827 posts

Good find! This is a pixel rendering bug in webkit based browsers that has existed a while on the web now. It is not an issue with RED :cool: In non-webkit based browsers / email clients everything will line up.

To also make everything line up in webkit based rendering engines simply always use a layout width that is divisible by 12, and all will be good. See for example:

http://bob.coffeecup.com/storage/tutorial-images/forums/pixel-rendering.png
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 1656825 Photo


Registered User
37 posts

Thanks, Bob

Excuse me if I insist is a RED issue.

If I try to do in a "blank" file - like you did it - everything is OK, but if I try to do that in a existing file, nothing works.

Look at the new attachment. I tryed "over your default file". Can be in the begining or at the end of the file. Anyway, the issue is there...

If I need to do something to avoid this issue, please teach me, because I am unable to choice more than 2 columns in the middle of my design, without this issue.

Thanks

User 232214 Photo


COO
827 posts

No worries, there might be a slight oversight or something and I am sure we can solve it. If you open a support ticket and attach the file I will take a look at it and post it back with the fix.

Thanks,
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 1656825 Photo


Registered User
37 posts

Thanks, Bob

I did it on My Suport Room - New Topic
User 1656825 Photo


Registered User
37 posts

Thanks, Bob

Scott explain me how to fix. It is fine for me!

Great support, CoffeeCup!

User 2190578 Photo


Registered User
21 posts

Could you perhaps share the solution?
User 1656825 Photo


Registered User
37 posts

Hello Anders!

Excuse the delay... I was traveling...

This is the Scott answer:

Hey Mario

Thanks for the file. As Bob mentioned, this is a pixel rendering bug in webkit based browsers that has existed a while on the web now. There is an easy fix though. To fix this, under the Grid settings, make sure the width is always divisible by 12. So if you change it from 620 to 624, everything will line up correctly.

That is what Bob was describing and if you look at his screenshot in the forums, the Grid Width is set to 612 which is divisible by 12

So, Anders, I am using 840 grid: 840 divisible by 12 is 70 exactly. The width must be divisible exactly by 12. This is it!

This fix solves any inconsistencies in Layout between rows and columns.

Best regards!


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.