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 3 weeks, 5 days ago by strucep. Reason: Additional information to the exact issue I was experiencing and additional testing
• This reply was modified 3 weeks, 5 days ago by strucep. Reason: More info on testing and results

I’m happy to hear that worked. I enjoy looking into other sites since it can help me solve problems that I may come across in my own work later. One thing you might be doing, but would be good to check, is that you are clearing your cache whenever you upload new files.

Good luck with your site!

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:

https://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.

Assistance is not necessary as I quickly moved to a different plugin that was working. I do not see how it could have been a conflict as I did not install, uninstall, activate or reactivate any plugins (besides the other map plugin which I deactivated before installing yours again) yet the issue seemed to be fixed.

I am positive it was this plugin. I reinstalled it to be sure and it still had my map ‘saved’, but in fact did not save my marker. The only part that saved was the title of the map. I tried it again today to see if I had the same issue, but I did not. When I save it almost goes to the same screen and switches quickly again to a screen I can use. I thought this seemed odd, but then I saw this plugin was updated earlier today. This leads me to believe that it was an issue that has now been fixed. I will not be changing my review since at the time that was how the plugin worked.

Hi Umesh,

It is working for me as well. Thank you for your help and for this plugin.

Strucep

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.

Hi Umesh,

Thanks for the reply. I saw there was an update this morning (April 15, 2015), but the issue still persists. While it doesn’t really keep me from doing my work, it is just a slight annoyance. I’ll keep updating the plugin as you work on it and let you know if there are any changes.

Thanks,
Strucep