I don’t know about you but just about every site I build with Divi I end up setting my header full-width as it the style I tend to like but the issue for me is that there no option in Divi to do same with the footer.

Today I’m going to show you in a very short tutorial because it pretty simple to do, so let’s get down to the CSS to have a full-width footer.

Let’s first make the bottom bar with our copyright in it full-width

[et_pb_dmb_code_snippet title=”CSS Snippet” style=”androidstudio” linenums=”on” usetabwidth=”off” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_css_codesnippet_heading=”background:#d76000;||padding-right:3%;||padding-left:3%;||padding-top:1%;||padding-bottom:1%;||border-top-left-radius: 5px;||border-top-right-radius: 5px;||” header_font=”|on||on|” header_font_size=”18px” header_text_color=”#fcfcfc” custom_css_codesnippet_codearea=”border-bottom-right-radius:5px;||border-bottom-left-radius:5px;”]I2Zvb3Rlci1ib3R0b20gLmNvbnRhaW5lcnsKbWFyZ2luLXJpZ2h0OiAyLjc3MyU7IAptYXJnaW4tbGVmdDogMi43NzMlOyAKd2lkdGg6OTQuNDU0JSFpbXBvcnRhbnQ7Cm1heC13aWR0aDogOTQuNDU0JTsKfQ==[/et_pb_dmb_code_snippet]

Now let’s make the main footer area full-width, I am assuming you would like this section to be full width as well.

[et_pb_dmb_code_snippet title=”CSS Snippet” style=”androidstudio” linenums=”on” usetabwidth=”off” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_css_codesnippet_heading=”background:#d76000;||padding-right:3%;||padding-left:3%;||padding-top:1%;||padding-bottom:1%;||border-top-left-radius: 5px;||border-top-right-radius: 5px;||” header_font=”|on||on|” header_font_size=”18px” header_text_color=”#fcfcfc” custom_css_codesnippet_codearea=”border-bottom-right-radius:5px;||border-bottom-left-radius:5px;”]I21haW4tZm9vdGVyIC5jb250YWluZXJ7Cm1hcmdpbi1yaWdodDogMi43NzMlOyAKbWFyZ2luLWxlZnQ6IDIuNzczJTsgCndpZHRoOjk0LjQ1NCUhaW1wb3J0YW50OwptYXgtd2lkdGg6IDk0LjQ1NCU7Cn0=[/et_pb_dmb_code_snippet]

if you made both your footer sections full-width then maybe replace the previous two line of code with just this one line of CSS.

[et_pb_dmb_code_snippet title=”CSS Snippet” style=”androidstudio” linenums=”on” usetabwidth=”off” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_css_codesnippet_heading=”background:#d76000;||padding-right:3%;||padding-left:3%;||padding-top:1%;||padding-bottom:1%;||border-top-left-radius: 5px;||border-top-right-radius: 5px;||” header_font=”|on||on|” header_font_size=”18px” header_text_color=”#fcfcfc” custom_css_codesnippet_codearea=”border-bottom-right-radius:5px;||border-bottom-left-radius:5px;”]I2Zvb3Rlci1ib3R0b20gLmNvbnRhaW5lciwgI21haW4tZm9vdGVyIC5jb250YWluZXJ7Cm1hcmdpbi1yaWdodDogMi43NzMlOyAKbWFyZ2luLWxlZnQ6IDIuNzczJTsgCndpZHRoOjk0LjQ1NCUhaW1wb3J0YW50OwptYXgtd2lkdGg6IDk0LjQ1NCU7Cn0K[/et_pb_dmb_code_snippet]

Some your widget might overlap due to the width not being very wide by default so we will add the following to line to make our widgets take up their full-width of it column.

[et_pb_dmb_code_snippet title=”CSS Snippet” style=”androidstudio” linenums=”on” usetabwidth=”off” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_css_codesnippet_heading=”background:#d76000;||padding-right:3%;||padding-left:3%;||padding-top:1%;||padding-bottom:1%;||border-top-left-radius: 5px;||border-top-right-radius: 5px;||” header_font=”|on||on|” header_font_size=”18px” header_text_color=”#fcfcfc” custom_css_codesnippet_codearea=”border-bottom-right-radius:5px;||border-bottom-left-radius:5px;”]I21haW4tZm9vdGVyIC5md2lkZ2V0LmV0X3BiX3dpZGdldCB7CndpZHRoOiAxMDAlIWltcG9ydGFudDsKbWF4LXdpZHRoOiAxMDAlIWltcG9ydGFudDsKfQ==[/et_pb_dmb_code_snippet]