Change dimensions of messages modal popup

The messages modal has a unique ID for each listing. And it uses the same class as other popups (like login, forgot password, etc).

I would like to expand the size of the messages popup to allow more space on the screen to type a message.

How can I select just the messages modal using CSS?

Hi,

Please try to use .hp-modal.fancybox-content, but it can require further customization.

Ok, I haven’t fully tested this cross-browser, cross-device… but I think this code works

.single-hp_listing .hp-modal:not(#user_login_modal), 
.single-hp_vendor .hp-modal:not(#user_login_modal) {
	width: 700px;
}

Because the messages button only shows up on the individual listing page or the host/vendor’s profile page, I selected those 2 pages

Then I narrowed the CSS selection to the popup modal

But because a non-logged-in user would first see a login popup modal when trying to message a user, I used the :not selector to not allow the resizing on the login modal (which luckily has a unique CSS ID)

As an added bonus, this code also expands the size of the “Report Listing” popup modal to allow the user to input a lengthier message if necessary.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.