Hello Bruce Paine,

Thanks for reaching out and providing detailed context—it's great that you're keeping the site clean and user-friendly!

You're absolutely right that SP Page Builder Pro does offer responsive tools, but it's not always automatic in terms of fine-tuning layouts for different screen sizes. Here are a few suggestions and insights that might help streamline your workflow:

1. Responsive Controls Are Built In—But Need Some Manual Input: SP Page Builder provides responsive settings for each row, column, and addon. You can use the Device Switcher (icons at the top right of the frontend editor) to toggle between desktop, tablet, and mobile views. Adjust margins, paddings, font sizes, alignment, and visibility per device within each addon’s settings. This allows more control without needing to duplicate full layouts.

2. Tips to Simplify the Responsive Workflow: Start with mobile-first layout or at least make the base layout as flexible as possible (e.g., using % or auto width where possible). Use Flexbox settings within row/column structures to align content better across devices. Avoid absolute positioning unless really necessary, as it’s harder to manage responsively. After setting a good base on desktop, you’ll usually only need to tweak a few things for smaller screens—this gets quicker with experience.

3. Template Considerations: The Helix Ultimate template is generally responsive and well-maintained, but: if it feels restrictive, you could explore a lighter or more modern Helix-based template, which may come with better spacing defaults and cleaner breakpoints. Templates with fewer predefined styles can sometimes offer easier customization for responsive needs.

Final Thought: You don’t need to completely rework layouts for every device—just refine where needed. With some familiarity, it becomes quicker to build once and fine-tune across breakpoints.

If you’d like, share a screenshot or link to a page that’s giving you trouble on mobile—I’d be happy to take a closer look!

Best regards

Hello again - this is an update to say I've made further progress with the headers. I've managed to adjust the template settings without needing to write code. I'm using the top1 and top2 positions. For some reason top3 doesn't show up but I will experiment a bit more.

By the way, I have discovered 'modal popups' which has helped tidy up text clutter.

Another update - I have solved a lot of problems by choosing an alternative default header style 'Multi Rows'. Seeing a more condensed layout, I have stopped using top1 and top2 positions and simply used title position instead.

It would be nice if I could access the space between the Header and the Main Menu items. This is not possible with the chosen header style. Also I cannot display anything in the blank space left of the centered logo. For example, I would like to show a tagline that sums up the business.

One other very minor issue I noticed is when adding an icon to a Modal Pop-up button, there is no space betweent the icon and the button text. In the case of a standard button, the icon allows space before the text.

Sorry to add so many comments but maybe they are helpful.

This is following on from my question about responsive layouts.

I have been trying a few things with some success, but also more observations.

I work a lot with SP Page Builder site modules.

One significant problem is that the 'Device Switcher' you mentioned is not appearing in the Backend Editor nor the Frontend editor. However, the 'Device Switcher' does appear when I open the shaper_helixultimate template options.

The only way I can test different views is by either adjusting the window size in my desktop Browser, or use a separate phone or tablet.

I have noticed another problem which I will raise in a separate post.

It would be nice if I could access the space between the Header and the Main Menu items. This is not possible with the chosen header style.

You can use Custom Header. On predefined header style, customization is not possible.

One other very minor issue I noticed is when adding an icon to a Modal Pop-up button, there is no space betweent the icon and the button text.

Please use text margin to create space between icon and text. prnt.sc/1GTW_cE_Er7U

I am working with your responsive layout. For some reasons, your frontend editor does not load. Without frontend editor, you cannot make it responsive. So, I have to fix frontend editor first.

Thanks for providing these responses.

I've deliberately avoided creating a Custom Header. This is simply to avoid complication as well as the time and effort involved. It would be great if Joomshaper could further predefined header styles that allow access to the areas such as I mentioned. For now, the current header style is acceptable.

OK regarding the text margin. I will try again with the setting you recommended.

It will be a real achievement if you can fix the frontend editor and be able to see what it does. I did not realise it was needed for responsive layouts. The backend editor has some settings for this. What is the reason for having both editors? It seems pointless if one does more than the other. Why not have just one editor?

Apologies but I have not been able to find the options you refer to in the Modal Popul addon settings. There is only the option to change the icon's left or right position.

Please use text margin to create space between icon and text. prnt.sc/1GTW_cE_Er7U

Here are two screen grabs of the visible options.

Am I looking in the right place? Is this a difference between the backend and frontend editors?

It would be great if Joomshaper could further predefined header styles that allow access to the areas such as I mentioned. For now, the current header style is acceptable.

Sorry, it is not possible. Pre-defined header styles are for those who does not want to customize. On the custom header, you can customize the layout as per your need. It will be complicated if we give the pre-defined header customization option. It is not developed this way.

What is the reason for having both editors? It seems pointless if one does more than the other. Why not have just one editor?

Some users prefer backend editor. In SP Page Builder 4, we had intruced one frontend editor. But since then our users shared mixed reaction and demanded to bring back the backend editor. So, in SP Page Builder 5, we have kepts both editors. Frontend editor is very useful when working with responsive layouts because you can edit and see how it might look. Frontend editor as known as visual editor does this job perfectly. I have already fixed your frontend editor and will check the module today.

Ok thanks. I'm prepared to be converted to Frontend editor - if it works. You can understand my reluctance to switch because I have been using the Backend editor for some years. But if it is as you describe, easier to preview responsive layouts, then that is a good thing.

Thank you for fixing the frontend editor. I will look forward to trying it later on.

I changed my mind and decided to try the Frontend editor just now, from one of the site modules. It is still taking me to the home page as before. I cannot see any editing menus - just the home page. It is strange because it also shows the user 'Sign in' at the top right of the window. I have disabled Joomla user login. This shouldn't be visible at all.

The same happens when I open the Frontend editor from an article.

Thanks for confirming the addon bug. It is good to know that it is not just my imagination. OK I will update Custom CSS.

It worked perfectly, thank you again. :-)

Thanks for confirming the addon bug. It is good to know that it is not just my imagination. OK I will update Custom CSS.

It worked perfectly, thank you again. :-)

Also, please note the Login option was disabled but then enabled when I adjusted header options. I didn't realise it until just now.

You are welcome 😊

Thanks for accepting the answer.