Change the Blurb Module Icon / Image Placement on Mobiles

This post may contain referral links which may earn a commission for this site

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>

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *