The Divi Theme's blurb module offers a choice of two placements for the blurb icon / image: on top of the text, or to its left. The same placement is used on both desktop and mobile versions. If you'd prefer your left-positioned images and icons to switch to a top-positioned layout on mobiles, you can do so with the following jQuery code:
<script>
jQuery(function($){
if ($('body.et-fb').length) { return; }
var left_blurbs = $(".et_pb_blurb_position_left");
$(window).resize(function () {
db_update_blurb_icon_pos(left_blurbs);
});
db_update_blurb_icon_pos(left_blurbs);
});
function db_update_blurb_icon_pos(left_blurbs) {
if (db_browser_width() < 768) {
left_blurbs
.addClass('et_pb_blurb_position_top')
.removeClass('et_pb_blurb_position_left')
.find('.et_pb_blurb_content')
.css('display', 'block');
} else {
left_blurbs
.addClass('et_pb_blurb_position_left')
.removeClass('et_pb_blurb_position_top')
.find('.et_pb_blurb_content')
.css('display', 'table');
}
}
function db_browser_width() {
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
return width;
}
</script>Related Post: Adding JavaScript / jQuery to Divi.
0 Comments