Created
July 27, 2018 12:18
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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