Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save elicus/03b35033053872e4096b77bcf487dcba to your computer and use it in GitHub Desktop.
Save elicus/03b35033053872e4096b77bcf487dcba to your computer and use it in GitHub Desktop.
Default media and container width is 50%. The following CSS snippet will change the media container width to 1/4 and post content to 3/5.
@media screen and (min-width: 981px){
.et_pb_column_4_4 .et_pb_post_extra.el_dbe_full_width .post-media {
width: calc((100% - 120px)/ 4);
}
.et_pb_column_4_4 .et_pb_post_extra.el_dbe_full_width .post-content {
width: calc((100% - 120px)/ 4*3);
}
}
--------------
The following CSS snippet will change the media container width to 1/5 and content to 4/5. This layout is ideal for content with a large excerpt.
@media screen and (min-width: 981px){
.et_pb_column_4_4 .et_pb_post_extra.el_dbe_full_width .post-media {
width: calc((100% - 120px)/ 5);
}
.et_pb_column_4_4 .et_pb_post_extra.el_dbe_full_width .post-content {
width: calc((100% - 120px)/ 5*4);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment