How Can We Help?
Search for answers or browse our knowledge base.
Adjust the width of media and content in Full-Width layout using CSS
Option 1: This option uses one-third of the available width for the 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 the available width for the image and three fourth width 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.