Title: CSS Customization Last modified: April 13, 2021 --- # CSS Customization * Resolved [Paul Bursnall](https://wordpress.org/support/users/style960/) * (@style960) * [4 years, 12 months ago](https://wordpress.org/support/topic/css-customization-15/) * Hi, * Nice plugin, good to leave another shortcode behind! * I’m having problems applying the following css changes: * Theme font is not used – this plugin applies system stack, not the font set in the customizer. I’ve tried setting the correct font (Inter) with css, no effect. I’ve also set the font in typography settings in the blocks parent block – a GenerateBlock container, this has no effect either. * The event list is set to justify-content: center, which is fine but I need it span the available width of the container, not leave white space at the left and right. I also need that to happen when the screen size reduces and the columns drop 3 > 2 > 1. * And I need to increase the bottom margin of single events on mobile. * This plugin is very easy to set up, unfortunately much harder to customize. * Thanks for your help, Paul. * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcss-customization-15%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 5 replies - 1 through 5 (of 5 total) * Plugin Author [Jon Waldstein](https://wordpress.org/support/users/jonwaldstein/) * (@jonwaldstein) * [4 years, 12 months ago](https://wordpress.org/support/topic/css-customization-15/#post-14314910) * Hey [@style960](https://wordpress.org/support/users/style960/), * I have plans to make the plugin styling more customizable but nothing to report right now. I did however add css classnames to all the elements so folks can override the style themselves (with css knowledge). * Try adding some of these custom css styles and feel free to expand on them to fit your needs: * Theme font: * ``` .blocks-for-eventbrite-css-wrapper .event__single * { font-family: Inter !important; } ``` * Event List: * ``` .blocks-for-eventbrite-css-wrapper .event__single { max-width: none !important; flex: 1; } ``` * Margin Bottom: * ``` @media (max-width: 767px) { .blocks-for-eventbrite-css-wrapper .event__single { margin-bottom: 20px; } } ``` * Thread Starter [Paul Bursnall](https://wordpress.org/support/users/style960/) * (@style960) * [4 years, 12 months ago](https://wordpress.org/support/topic/css-customization-15/#post-14319385) * Hi Jon, * Thanks for your reply. Looking better now. * How can I have events span 3 on a single row from 768x upwards? * Thanks, Paul. * Plugin Author [Jon Waldstein](https://wordpress.org/support/users/jonwaldstein/) * (@jonwaldstein) * [4 years, 12 months ago](https://wordpress.org/support/topic/css-customization-15/#post-14319775) * Honestly not sure, I think you’re going to run into problems trying to make this layout work since each event card (when i first built it) was expected to have a certain width so that the featured image and event details don’t get blown out or too squished. I also wanted to make sure they _generally _ look good one you only have 1 or 2 events in a row. * The event grid is using css flex-box which these days is not the best at defining grid columns and rows. I will eventually switch this over to use css Grid since you can define grid details much easier. I think in its current state it would be better to stick with the default layout. * If you do want to continue hacking it, there is a css class name available for every element that you can keep overriding. You would probably need to find where the flexbox is set to wrap. * Thread Starter [Paul Bursnall](https://wordpress.org/support/users/style960/) * (@style960) * [4 years, 11 months ago](https://wordpress.org/support/topic/css-customization-15/#post-14326750) * I’ll have to read up on Flexbox – as it is right now, the 3rd event starts a new row between 768-1090px and the featured images is blown out. Doesn’t look good. Any idea when more styling options will be available? * Plugin Author [Jon Waldstein](https://wordpress.org/support/users/jonwaldstein/) * (@jonwaldstein) * [4 years, 11 months ago](https://wordpress.org/support/topic/css-customization-15/#post-14327971) * Yeah flexbox is not easy to use for grids. The “Event List” suggestion I made is setting `flex: 1` so that’s why the image is going to stretch. * If you want to keep trying to customize this for your specific grid needs you should look at CSS Grid instead of flexbox. Here is an example that will get you close. Beyond this you will need to learn how to use CSS Grid for your specific needs as this should just be used as a starting place (if need be). * CSS Grid: * ``` @media (min-width: 767px){ .event__list{ display: grid !important; grid-row-gap: 20px; grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); } } ``` * I don’t have a specific timeline for adding more styling options as I haven’t received many requests for it yet but I do plan on adding more features in the next few months or so when time permits. * Hope this helps and good luck with your styling! * Jon Viewing 5 replies - 1 through 5 (of 5 total) The topic ‘CSS Customization’ is closed to new replies. * ![](https://ps.w.org/blocks-for-eventbrite/assets/icon-128x128.jpeg?rev=2512996) * [Blocks for Eventbrite](https://wordpress.org/plugins/blocks-for-eventbrite/) * [Frequently Asked Questions](https://wordpress.org/plugins/blocks-for-eventbrite/#faq) * [Support Threads](https://wordpress.org/support/plugin/blocks-for-eventbrite/) * [Active Topics](https://wordpress.org/support/plugin/blocks-for-eventbrite/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/blocks-for-eventbrite/unresolved/) * [Reviews](https://wordpress.org/support/plugin/blocks-for-eventbrite/reviews/) * 5 replies * 2 participants * Last reply from: [Jon Waldstein](https://wordpress.org/support/users/jonwaldstein/) * Last activity: [4 years, 11 months ago](https://wordpress.org/support/topic/css-customization-15/#post-14327971) * Status: resolved