strucep

edit: After further testing, creating a new theme, simply adding the layout contentSize and wideSize settings seems to have added the alignment options. However, in my original theme I had already had those, so I am unsure as to why it was previously not appearing.

I’m teaching myself how to build FSE themes currently and was having a similar issue with images only being able to be left, right, or center aligned. None of the solutions here added the additional wide and full width options. I found the solution in the TwentyTwentyFive theme.

With the layout contentSize and wideSize set in theme.json, you need this line under settings:

“useRootPaddingAwareAlignments”: true

For example:

{
    "version": 3,
    "settings": {
      "layout": {
        "contentSize": "645px",
        "wideSize": "1340px"
      },
      "useRootPaddingAwareAlignments": true
    }
}

As soon as I added that line, the options appeared and styled correctly in the editor and on the frontend. However, when I remove the line to test if that was in fact the solution, the options are still present so YMMV.

• This reply was modified 1 year, 3 months ago by strucep. Reason: Additional information to the exact issue I was experiencing and additional testing
• This reply was modified 1 year, 3 months ago by strucep. Reason: More info on testing and results

Hello,

I apologize for snooping, but I saw your issue and decided to see if another set of eyes looking at it would help. I will let you know I am not involved with this plugin so you really have no reason to trust what I say. That being said I believe I have found your issue and an easy way to fix it.

On the page with the menu styled how you want the id on the unordered list is “menu-produkter-2” while on the other page the id on the unordered list is “menu-produkter-4”.

Here is a screenshot of looking at it with Google Chrome’s Dev Tools:

http://i.imgur.com/v5bJQnf.png

The two highlighted lines is what I am referring to.

I also see that you are using a child theme with a custom style sheet. In this style sheet you have references to “menu-produkter-2”. Doing a quick find (ctrl+f on pc, cmd+f on mac) will show you have 13 different places this is referenced. Changing all of these to “menu-produkter-4” will give you the style you are looking for.

Since I do not know how the id is being applied to the unordered list I cannot guarantee this is a permanent fix, but it at least shows why the styles are not being applied on that page.

Hi Catchy,

I’m am also still learning WordPress, but I may be able to help you a little bit. In order to see js errors you will need to open your error console in your browser. This will be different depending on what browser you are using:

Chrome – Go to View->Developer->JavaScript Console

FireFox – Go to Tools->Web Developer->Web Console (you may also have to click js to activate it for JavaScript once the window is open)

Safari – Go to Develop->Show Error Console (If there is no ‘Develop’ on the menu bar, go to the Preferences for Safari, got the advanced tab, and check ‘Show Develop menu in menu bar’)

If you are on Internet Explorer do a quick google search for ‘javascript console ie ‘ as I am on a Mac and can’t check IE at the moment.

All these logs will show you the same thing as what is shown in the screenshot above from Umesh. Which is that jQuery is undefined. This means that the JQuery JavaScript library is not being loaded. It also appears that there is a variable called ‘FB’ that is not defined, but I don’t know if thats affecting the images.