Skip to content

Instantly share code, notes, and snippets.

@elicus
Created July 27, 2018 12:18
Show Gist options
  • Save elicus/1f3088e42a7f7837c034cb33874b0287 to your computer and use it in GitHub Desktop.
Save elicus/1f3088e42a7f7837c034cb33874b0287 to your computer and use it in GitHub Desktop.
How to adjust width of media and content container in Full width Layout of Divi Blog Extras Plugin
Option 1: This option uses one third of available width for image and two third for the content area. (default is 50%)
@media screen and (min-width: 981px){
.et_pb_column_3_4 .et_pb_post_extra.el_dbe_full_width .post-media{
width: calc((100% - 120px) / 3);
}
.et_pb_column_3_4 .et_pb_post_extra.el_dbe_full_width .post-content{
width: calc((100% - 120px) / 3 * 2);
}
}
Option 2: This option uses one fourth of available width for image and three fourth with for the content area. (default is 50%). This snippet also reduced the column with of date section by 50px which is adjusted in media and content.
@media screen and (min-width: 981px){
.et_pb_column_3_4 .et_pb_post_extra.el_dbe_full_width .post-date{
width: 50px;
}
.et_pb_column_3_4 .et_pb_post_extra.el_dbe_full_width .post-media{
width: calc((100% - 120px) / 4);
}
.et_pb_column_3_4 .et_pb_post_extra.el_dbe_full_width .post-content{
width: calc((100% - 70px) / 4 * 3);
}
}
The above 2 snippets are based on 3/4 column with of Divi builder. If to be used with full column width, the .et_pb_column_3_4 class can be removed from the snippet above.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment