Skip to main content

Notifications

Announcements

No record found.

Community site session details

Community site session details

Session Id :
Customer experience | Sales, Customer Insights,...
Suggested answer

Width of section vs width of column

(0) ShareShare
ReportReport
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.
  • 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.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Vahid Ghafarpour – Community Spotlight

We are excited to recognize Vahid Ghafarpour as our February 2025 Community…

Tip: Become a User Group leader!

Join the ranks of valued community UG leaders

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 292,494 Super User 2025 Season 1

#2
Martin Dráb Profile Picture

Martin Dráb 231,305 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans