Custom branding CSS is not applying for registration page for screens <1920px width

API and Webhooks
#1

Description
I am using custom CSS (under the branding tab) to customize the registration page: Webinar Registration - Zoom

I am accessing the registration page through an approved vanity URL.
CSS works well for big screens (like FHD+ or 1920px width +) BUT it doesn’t work for devices with smaller screens.
As I see, the tag which embeds/generates with custom branding CSS for 1920px + screens is not embedded/generated for smaller screens.

I am not sure if this is a bug or if I do something wrong.

How To Reproduce (If applicable)

  1. Access url using a screen with a size >=1920px :
    You shouldn’t see any image as they are hidden with CSS in the tag.
    You can search (in dev tools) for the tag by for example “webinar_custome_logo2” CSS class.

  2. Access the same url using a screen with a size <1920px.
    You shouldn’t see that images now are visible and there is no tag with a custom branding CSS.

Screenshots (If applicable)
Screenshots are here: Zoom reg page branding CSS issue - Google Drive

I would appreciate any advice to solve the issue with applying custom branding CSS to a registration page for devices with small screens.

#2

Hey @WebinarSolutions,

Thank you for reaching out to the Zoom Developer Forum. Please send an email to our Customer Support Team as they will be able to assist you directly with this issue.

Thanks,
Max

#3

Hi Max. I have tried to contact the Customer Support team at the beginning. They told me they can’t help and that I should look for help at this forum :frowning:

It was ticket ID #9810335

#4

Hey @WebinarSolutions,

Thank you for the update. I’m sorry to hear that, I certainly don’t want to send you to them if they aren’t able to help. I’m happy to help however I can but for the most part, what is in the Zoom Portal, as well as custom CSS, is outside the scope of our support here.

That being said, I was able to reproduce this behavior when using the standard registration page so it looks like this is the expected behavior on smaller devices in order to ensure that all information fits on the page. If you would like this changed in a future release, I recommend reaching via our feedback form.

Sorry for the confusion there, I hope that helps!

Thanks,
Max

#5

Thank you for your feedback, Max. I appreciate your help.
It’s not understandable for me in case it is really normal behavior. In this case, the whole concept of custom branding is gone for devices with smaller screens… That’s a service we pay for as users in our plan. And now it looks like this service is not fully provided.

Is there any way you could think of to check if that’s for sure the correct behavior of custom branding CSS?

#6

Hey @WebinarSolutions,

Thank you for the update. I was able to confirm this is expected behavior by watching the .page_header.custom_logo div on the standard registration page. When first loading the page, we can see that this element is shown on the page:

image

After reducing the size of the page to a mobile device, we can see that the following CSS rule is applied to the div element:

image

As you can see, that rule hides the element with a built-in CSS rule. You can try to override this rule using your own display property with an !important directive in your rules to see if that allows you to display the logo.

Let me know if that helps.

Thanks,
Max

#7

Hi Max. Thank you for taking close look on the issue!
May I ask you whether you reloaded the page after resizing the browser to mobile width?
I am asking because when I reload the browser for mobile size screens or load through a mobile phone
I don’t even see divs with .page-header or .custom_logo classes anymore.
They are not even loaded for small screens.
I see different tags with different classes which load header and logo. And tag with all custom CSS is not loaded

#8

Hey @WebinarSolutions ,

Would you be able to share the CSS you are using so we can test the issue on our end?

Thanks,
Tommy

#9

Hi, sure

/* =============================== /
/ Header registration banner /
/ =============================== */
#webinar_register_container img.img-responsive {
display: none;
}
.mobile .webinar_custome_logo1, .ui-mobile-viewport .img-responsive {
display: none !important;
}

/* =============================== /
/ Header registration logo /
/ =============================== */
#webinar_register_container #webinar_register_form img.custom_image {
display: none;
}
.mobile .webinar_custome_logo2, .ui-mobile-viewport .custom_image {
display: none !important;
}

#10

Hey @WebinarSolutions,

Thank you for providing the CSS that you’re using. Initially, when testing this, I grabbed the CSS from your account and saw the same behavior on my end. I also tested with the registration URL that you provided.

I looked into this a bit further and was able to confirm some details.

  1. When loading from a mobile user agent, the page has a different formatting. the .page_header element doesn’t exist and is instead replaced with a .webinar_topic div that acts as a header and displays the Webinar title.

image

image
image493×846 21.2 KB

  1. I also saw that when resizing a desktop browser and refreshing the page, the .page_header element still existing on the page.

From here, I would try rolling back the CSS changes that you’ve made to get a good feel for how the page behaves by default. From there, you should be able to override the desktop and mobile styling in order to display the logo.

If not, you can also place it somewhere else on the page depending on what device and size the registration page is designed for.

I understand that this is a bit of a hassle when attempting custom branding. If you would like different behavior added, the best place to request it is via our feedback form. You can also submit a post in our #feature-requests category.

Let me know if you have any questions.

Thanks,
Max

#11

Hi Max. Thank you for your attention to this ticket.
I am a little confused because I see you are saying that “…page_header element doesn’t exist and is instead replaced with a .webinar_topic div…” so you don’t see the div but at the same time you see it “…and refreshing the page, the .page_header element still existing on the page.” :frowning:

I checked many times again and with other people and I still can confirm that on my registration pages on small screens there is no .page_header (=> .page-header ) as well as CSS style for this element.
I also checked again and again.

Anyway, I am looking for help first of all with hiding images on mobile screens. Maybe I could suggest you another approach to have a look at the issue.

May I ask you for one confirmation and one advice with CSS?

1 (confirmation). I added this CSS to test the behavior: .webinar_topic {outline: 5px solid red;}
Can you see an outline on the registration page? Webinar Registration - Zoom

2 (advice). What CSS would you recommend to hide images before (or above) the form?

Thank you again for your help

#12

Hey @WebinarSolutions,

My apologies for being unclear. When I said:

I meant that I was opening Chrome, entering the responsive testing tool and then refreshing the page. When doing this, I saw that there is no .page_header element created on the page. Instead, the header element starts with div.summary > div.webinar_topic

Conversely, if I open the page in a desktop browser, resize the browser and refresh the page, I see that the .page-header element is always in the DOM, just hidden on the page at a certain size.

No, when looking at your registration page, I don’t see a red outline. I do see a red outline when I apply that same CSS rule to the default registration page.

When you mention hiding images above the form, do you mean only on mobile devices? I see when accessing your registration form on a mobile device that the following images are displayed:

image
image477×853 74.5 KB

Thanks,
Max