Dani Llewellyn

You are using a different plugin. This plugin is called a-z-listing but you are referencing one called az-index.

Removing the rule is one way to correct the issue, but there are others too.

You can also try to override the incorrect rule by setting:

.letter-section ul.columns li {
    width: initial;
}

Add this to your custom CSS and I think it will override the universal.css appropriately to set the list items back to their default size.

CSS rules are applied from top to bottom in sequence. The value initial in CSS means reset to “Browser default”. Any alterations to the width by any other CSS that is loaded before the rule with initial will be discarded and the value reset to its original browser default. Any CSS changing the width that comes after this rule will not be reset.

This is due to your override of the CSS in /wp-content/uploads/oxygen/css/universal.css.

You have a rule that reads as follows:

.letter-section ul.columns li {
    margin-bottom: 15px;
    width: 450px;
}

This forces the width of the list to 450px independent of how big the viewport is. You could try amending it slightly with this:

.letter-section ul.columns li {
    margin-bottom: 15px;
    width: 450px;
    max-width: calc(100vw - 60px);
}

Though a better choice would be to override the plugin’s inbuild styles which reference the following selectors with enforced widths:

• .letter-section ul.columns.max-1-columns Enforces max-width to the size of 15.6em to correlate with 1 column’s width set in the next selector. There are several of these counting up to .letter-section ul.columns.max-14-columns. The values are the number of columns multiplied by 15em and then 0.6em added on top for padding.
• .letter-section ul.columns Enforces the column-width to 15em.

Hi,

You can achieve this with the theme customiser’s “custom CSS” feature. You will want to add a rule similar to:

.letter-section ul.columns {
    column-width: 15em;
}

Change 15em with your preferred width for each column. The default is 15em so you could try something like 20em to begin with. The size of an em is relative to your font size, so it likely varies between sites.

Hi,

I just checked the link you posted, but can’t see the behaviour that you describe. Did you revert the page after you posted (to enable you to continue developing the site)?

The second image is similar to other people’s sites where they’ve put the shortcode into a page builder’s preformatted text area instead of a normal text area. This puts <pre> around the output which breaks the layout. Try checking whether your listing is wrapped inside a <pre> tag.

Hi,

For 503 errors, there is likely some information as to the nature of the error in your server’s error log. Could you see if you have access to such a log and post any lines from the time you try loading the page that results in the error?

Regarding the size of the list, this might be an issue. The plugin itself does not impose any artificial limits on the number of items in the list, but your server will impose memory and time-based limits. It could be that the size of your list is causing PHP to run out of memory or take too long to execute and gets killed because of one or other of these. If PHP is being killed because of either of these limits it would also be indicated in the error log.

I’ll mark this as post resolved then.

Please come back if you need any more input 🙂