Colour issues when resizing

User 2190578 Photo


Registered User
15 posts

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
Attachments:
User 187934 Photo


Senior Advisor
18,175 posts

link?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
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 personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 232214 Photo


COO
823 posts

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 classic holy grail layout in web design, not always easy to solve...but in this case it is solvable :cool:

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.
User 2190578 Photo


Registered User
15 posts

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
User 232214 Photo


COO
823 posts

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?

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.
User 2190578 Photo


Registered User
15 posts

Ah, sorry - you are right. I must have made a mistake when testing.
Case closed! Thanks for your help!

Br, AB
User 232214 Photo


COO
823 posts

Anders Børup wrote:
Ah, sorry - you are right. I must have made a mistake when testing.
Case closed! Thanks for your help!


Cool, glad we could help :P
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.