How Can We Help?

Search for answers or browse our knowledge base.

< All Topics
Print

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.

Previous Remove border radius from category in Block Extended layout
Next Change pagination URL to numbers