You will notice that in Bloom there is an option you can check in the display settings to hide the form on mobile but there isn’t one that lets you hide the form on desktop. You may have a site set up where you want the form to slide in on desktop but not on mobile (as it would take the whole screen) and you may want the form on mobile to do something different like slide up when people scroll to the bottom of the page but you do not want this mobile form showing up on desktop as that would be two forms sliding in.
The code to hide the mobile version of the form on desktop is going to be different depending on which order the form is. What you are going to want to do is create the form you want to show in mobile (but hide on desktop) and then load the page. Right click the page and select Inspect.
You are going to want to hover over the Bloom code. This can be done by selecting the arrow in the top left or the inspector window and clicking on the form. Once you have clicked on it you need to hover over the code to the furthest indent up that will still only display a box around the Bloom email form.
Once you have found et_bloom_optin_1 (it may be any number) you will want to put the following code in the Custom CSS of the DIVI Theme Options (or in your child theme’s CSS).
/* hide mobile Bloom email form on desktop */
@media screen and (min-width: 768px) {
.et_bloom_optin_1.et_bloom_visible
{
visibility:hidden !important;
}
}
Now the form should hide on desktop. So now you can have separate Bloom forms for desktop and mobile as you may want to have drastically different design and usability cases for each.
