Colour issues when resizing - Post ID...
The body of my email is grey.
The content area is white.
I have a constrained row with two colums. Both columns are white (in order to keep the content area white. The first column contains an image, the second contains text. Both columns have the same min-height, so that they both look white. However, when resizing to a smaller screen, because of the text in the second column, this column's height increases. That's fine. However, the first column continues to be its min-height, and that's why the body colour starts to show below = not good!
How to resolve? Please see the two screenshots included in this post for further explanation.
Br, AB
The content area is white.
I have a constrained row with two colums. Both columns are white (in order to keep the content area white. The first column contains an image, the second contains text. Both columns have the same min-height, so that they both look white. However, when resizing to a smaller screen, because of the text in the second column, this column's height increases. That's fine. However, the first column continues to be its min-height, and that's why the body colour starts to show below = not good!
How to resolve? Please see the two screenshots included in this post for further explanation.
Br, AB
link?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
A B wrote:
The body of my email is grey. The content area is white...when resizing to a smaller screen, because of the text in the second column, this column's height increases. That's fine. However, the first column continues to be its min-height, and that's why the body colour starts to show below = not good!
The body of my email is grey. The content area is white...when resizing to a smaller screen, because of the text in the second column, this column's height increases. That's fine. However, the first column continues to be its min-height, and that's why the body colour starts to show below = not good!
The classic holy grail layout in web design, not always easy to solve...but in this case it is solvable

Assuming the grey is applied to the body (and not a wide row) and you are not using a gutter There's none in your image), you can apply the white to a constraint row instead of the columns and everything will keep the same height.
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.
Thanks!
What exactly do you mean by applying white to a constraint row?
When applying background colours to a constraint row, the colour is applied to the areas to the left and the right of the main content area in the middle, right? So, that doesn't solve my problem? Unless you mean a constraint row with only one column (that can then be white), but I want a constraint row with two columns that are white - like they are now - only the background body colour shows when one of the columns become longer that the other when resizing to a smaller screen....
Br, AB
What exactly do you mean by applying white to a constraint row?
When applying background colours to a constraint row, the colour is applied to the areas to the left and the right of the main content area in the middle, right? So, that doesn't solve my problem? Unless you mean a constraint row with only one column (that can then be white), but I want a constraint row with two columns that are white - like they are now - only the background body colour shows when one of the columns become longer that the other when resizing to a smaller screen....
Br, AB
Anders Børup wrote:
Thanks!
When applying background colours to a constraint row, the colour is applied to the areas to the left and the right of the main content area in the middle, right?
Thanks!
When applying background colours to a constraint row, the colour is applied to the areas to the left and the right of the main content area in the middle, right?
You're on the right track here, it's just slightly different

Using a constraint row the color is not applied to the left and right of the main content area, which gives you exactly what you want

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.
Ah, sorry - you are right. I must have made a mistake when testing.
Case closed! Thanks for your help!
Br, AB
Case closed! Thanks for your help!
Br, AB
Anders Børup wrote:
Ah, sorry - you are right. I must have made a mistake when testing.
Case closed! Thanks for your help!
Ah, sorry - you are right. I must have made a mistake when testing.
Case closed! Thanks for your help!
Cool, glad we could help

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.
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.