Style newsletter with CSS classes

Avatar

By Ahmed Fouad

updated 15 days ago

We've added some simple classes to style your newsletter using core Gutenberg blocks.

Important: These styling changes only affect your newsletter HTML. They will not show up on your website or blog. To style your site, you will have to make changes to your site's theme.

Columns breakpoint

If you don't want your columns to break into single columns on mobile, you can select the desired columns block and add custom css class “ngl-no-wrap” to the Advanced panel.



Adjust thickness of separator

To adjust the thickness of the Separator block, select the desired separator block and add custom css class “thickness-[pixel]” to the Advanced panel.


For example, if you want your separator to be 5 pixels thick, add "thickness-5". If you want your separator to be 10 pixels thick, add "thickness-10".


Logo image size on mobile

To control image size on mobile manually, you can give a class to the image you want. E.g. “my-mobile-image” and add it to the selected image’s custom CSS class.



Then in custom css (Go to Newsletters > Settings > Custom CSS) you can use something like:

@media only screen and (max-width:642px) { #template_inner img.my-mobile-image { max-width: 100px !important; } }


Keep image width

You can give the class ngl-keep-width to any image you want to keep its size even on mobile and not stretch to full screen width.

This is better approach than trying to set a custom class and width for each image separately.

Steps to use this feature are:

  1. Edit image block
  2. Add ngl-keep-width as a class inside Advanced CSS class name


Did this answer your question?