Change Eventbrite iframe width

[Shea]

Hi,

I am trying to change the Eventbrite iframe width. I tried to follow the steps in this link https://theeventscalendar.com/knowledgebase/changing-the-height-of-the-eventbrite-tickets-iframe/ and adjusted the code to be:
add_filter('tribe_template_factory_debug', 'change_eb_iframe_width');

function change_eb_iframe_width($html) {
if (false === strpos($html, 'eventbrite-ticket-embed')) return $html;
return str_replace('style="100%', 'style="96%', $html);
}

I have also tried to target the CSS with classes and id’s and adding the !important tag to overwrite what is coming over, with no luck.


#ticket_information_wrapper .panel_628 {
width: 96% !important;
}

Any help is greatly appreciated. Thanks!

[Geoff]

Hi Shea,

Happy to help here! Would be willing to share a link to an example from the site you’re working on? I was able to change the form width using the tutorial but want to look at your site in case there’s something else to consider in the mix.

Thanks!
Geoff

[Shea]

This reply is private.

[Geoff]

Hi Shea,

Yeah, there are a ton of wrappers on that iframe object, so it can be tough to override the width without it being overwritten by the width of another parent element.

This seemed to do the trick when I was scoping out the site using DevTools:

.eventbrite-iframe {
width: 96% !important;
}

That should work given that it is the very top element in the cascade, even above the iframe itself. And, since all other widths are percentages, this will base all the other widths on this 96%.

Let me know if that works. 🙂

Cheers!
Geoff

[Shea]

Hi Geoff,

That worked, thanks so much for your help!

• This reply was modified 10 years, 2 months ago by Shea.

[Geoff]

My pleasure, happy to be of service! Feel free to let us know if any other questions pop up and we’ll be here to help. 🙂

Cheers,
Geoff

[Author]

Posts