Skip to main content

Notifications

Announcements

No record found.

Customer Insights - Journeys forum
Suggested answer

Width of section vs width of column

Posted on by Microsoft Employee

Hoping someone can help me out with this. I have some HTML/CSS skills but I can't figure this out. 

I am building our new email design in Dynamics, but I can't find a way to make the section 100% wide, while the content inside (the column) is only 600px. If I set the email width to 600px, I can't spread the grey and orange background colors over the full width of the email. See below for clarification:

Image

I have tried to add some coding like:

        .outer {
            width: 600px !important;
            max-width: 600px;
        }

        .inner {
            width: 600px !important;
            max-width: 600px;
        }

        .imageWrapper {
            width: 600px !important;
            max-width: 600px;
        }

        .logo-image {
            width: 270px;
        }

        div div {
            background-color: transparent;
        }

        [data-layout="true"] {
            margin: 0 auto;
            max-width:
                /* @layout-max-width */
                100
                /* @layout-max-width */
            ;
        }

        @media screen and (max-width: 768px) {
            .outer {
                width: 100% !important;
                max-width: 600px;
            }

            .inner {
                width: 100% !important;
                max-width: 600px;
            }

            .imageWrapper {
                width: 100% !important;
                max-width: 600px;
            }
        }
But that doesn't work the way it should. In mobile, it is not 100% but 600px, and in MSO it is especially awful looking. 
PLEASE HELP! I'm breaking my brain over this.
Categories:
  • Suggested answer
    Aga M Profile Picture
    Aga M on at
    RE: Width of section vs width of column

    Hi E. Tijd,

    Full-width for emails is not possible yet. However, we are aware of the need of this capability and it is already in our backlog.
    To help us prioritize this functionality, please upvote this idea on the Ideas forum.

    Thank you,
    PM, Dynamics 365 Marketing

  • Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: Width of section vs width of column

    Sorry, I did not clarify that the screenshot was the design, not the template as I built it in Dynamics. So what you see in the above screenshot is what we WANT but don't yet have.

    When I pick the one-column template, and set the width to 600px, and then the background of a section to #efefef, I get what you see below. The area on the right (and on the left, too, of course) is now white, while we want that #efefef to stretch over the full width.

    pastedimage1657110304746v1.png

    When I set the template width, to 100, the content blocks also become 100%, which is also not what we want:

    pastedimage1657110480496v2.png

    I tried doing something in the code, like I said above, in the .inner and .outer classes, but that messed up the mobile design. 

    Would be great if anyone has the magic solution to this! I can't possibly be the only one with this issue.

  • Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: Width of section vs width of column

    Hi E. Tijd,

    Based on your screenshot, the color has over the full width of the email.

    Maybe you need provide new screenshots about it.

Helpful resources

Quick Links

Replay now available! Dynamics 365 Community Call (CRM Edition)

Catch up on the first D365 Community Call held on 7/10

Community Spotlight of the Month

Kudos to Saurav Dhyani!

Congratulations to the June Top 10 community leaders!

These stars go above and beyond . . .

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 288,420 Super User

#2
Martin Dráb Profile Picture

Martin Dráb 225,672 Super User

#3
nmaenpaa Profile Picture

nmaenpaa 101,148

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans