Changing image size and responsive content alignment in the Divi Blurb Module

I’m using the popular Divi monster theme on a client site right now and I wanted to change the behaviour of the Blurb Module where you can combine an image or icon with a headline and some text.

While the module sections allow you to change the position of the image, it does not let you change the size of it – if you are using an image of your own instead of the provided icon font.

The following code changes the size of the image:

.et_pb_blurb_position_left .et_pb_main_blurb_image {
    width: 120px; /*put desired image width here+/
}

So far, so nice. The problem then was that the text content next to the image stayed inline even on mobile, which rendered the column really narrow. Therefore, I gave the image its own line and made the content items stack on top of each other with the following CSS, using the breakpoints provided here by Elegant Themes. I also removed the padding to the left of the text container as to have it align nicely with the side of the image.

/*** Applying styles only to screens up to 767px width ***/
@media all and (max-width: 767px) {

.et_pb_blurb_position_left .et_pb_main_blurb_image {
    display: block!important;
    width: 100%;
}

.et_pb_blurb_position_left .et_pb_blurb_container {
    padding-left: 0!important;
}
}