Solved SP Page Builder

More breakpoints or other solution?

Asked by Frank 1 year ago Last activity 11 months ago

Hello, ic am working on a page, which is extremly difficult to handle - as i have 5 colums with vidoes next to each other. As the Headlines are different long, some have just 0 line, some two or tree lines of text.
So i stared to harmonisize this by setting of the headline bottom margin.

So with the given resolutions in builders front end editing, all seems to be fine.

But - oh no - if the custoer has a view on this, he can see those different movings.

As i read in other postings, this is a real problem, to find a setting which works on all screens.

But it does not.

So my question - is my setting wrong? Or should i set up a different setting of used elements to get a perfect solution?
Currently i use the headlin setting inside the video addon. Is it possible, to set a fixed height of the headline block?
The margin after the headline setting is not working on the different screens ...

Is it a better way to place the headline in a different text addon - ? Or do you have another suggestion what is working?

Additional: When are you developing the usage of vertical shorts videos also in the popupaddon?

Thank you
And best regards
Frank

Accepted answer

Marked as the solution

Ofi Khan Staff

11 months ago

Just checking in to see if you have feedback on the provided solution. If the answer resolved your query, you can mark it as accepted to close the post and guide others with similar questions. You’ll find a button to accept answers below each comment.

If you need further assistance, feel free to let us know!

10 more replies

Ofi Khan Staff

1 year ago

Hello Frank,

Thank you for reaching out to our technical support forum. I’m sorry to hear about the trouble you’re experiencing. Rest assured, I will look into this issue for you and work to resolve it as quickly as possible.

If you could kindly provide any additional information like the design mockup, it would greatly help me investigate and address it more efficiently. Please share your administrator access here to check the issue. Use the Hidden Content box to share the credentials. Make sure that you have a full site backup before sharing.

I will check and try to get the layout look good.

Best regards

Frank Asked this

1 year ago

Hello,
thank you very mucht for your support.
I think, there is no design mockup needed ... i want, that the videos itself will be in the same position in one row, exept the number of lines the headlone has.

If the headlone is short (just one row) i have st up the align below to push the video more down.
Same on versions with headlines with two lines or more - i have adjusted the number-setting in algn bottim below the headline.

In the settings for the different screens (on frontend editor) all is fine. But if you open the page in a different browser and start mobing it smaller, you see the mess immedeately, that the videos are not alighned in horizontal position ...

And the mess is, that the customer has different ipads or for example a smart tv ---
Sadly i am not able to add screenshots here ...

Thank you very much

Ofi Khan Staff

1 year ago

Please share some screenshots of your issue to understand it better. Take a screenshot and share via any platform. For example: Lightshot or Imgur

Frank Asked this

1 year ago

Hello Ofi,

thank you for the opportunity, to find a better solution.
As described, additional on different browsers i get different distances between the headline and the video.

Another idea was to add the text addon, use only the headline ... but the result is the same ...

Any idea for a better way to publish these videos and headlines in a perfect horizontal alignement?
Please watch the video!

Thank you!

Ofi Khan Staff

1 year ago

I have figured out a way. I have removed all top and bottom padding and margin from the Heading and Video addons. Then I have used this CSS on the page CSS options.

.addon-root-heading,
.addon-root-video .sppb-addon-title{
  height: 100px;
}

Please check this page: (link in the hidden content). I have exported the data from your article and imported on this page to work on the issue.

If you want, then you can use Heading addon or you can use Video Title. You have to determine the necessary height (in my example, it is 100px) to show the longest title. Please watch the screencast and apply the changes. I have not checked responsive layout. I think you will be able to do it on your own. Let me know if you need any further help on this.

Screencast video:

https://files.fm/u/y5535mdjpq

Frank Asked this

1 year ago

Hello Ofi,
thank you very much - this is a good point for starting a solution - as we had this idea formerly ... but i hoped to get it with the getting things.

BUT WE FOUND A BIG FAIL IN YOUR SYSTEM!!!

I added the next classes for the breakpoints in your new test-page as it works as expected.

Now i copied this complete css lines into the live page - but it will not take any affect. Tested many different settings, ---- no chance, no effect.

You need to know, that the live page is not a Page created in the component itself ... it is a joomla content item, which is set to be a builder page. From there i started working with the builder and so far all was ok.

But the css was not working.

Now i exported the page ... created a new page inside builder component and imported the file ... now all is working.

FACT: Fail in your system is that if the page is inside a content item, additional css is not working ...!!!!

Now my question:
Is it a bug or a feature?

I have some other pages, where i never work in the builders pages - i always work in content items - basic joomla functionality - and save them as builder-pages ... basicly it works - but no csss.

..... and i remember that sometime i wanted to add css but it took no effect also ...

So is this a fail and you will fix it with a next update?
Or is there any reason, NOT to work inside joomla content items ...?

I would prefer to work like this as it is a better overview over all content items of a page - no matter if it is basic joomla content with tiny mce editor - or builder ... both should work withoud any hassle next to each otner.

I think this was your plan to develop - but currently we found this fail here.

ADDITIONAL: In frontend editor in builder also css is not showing effect!

Please let me know shortly!

Thank you

Ofi Khan Staff

1 year ago

I have checked the original article. The CSS is working fine. The only issue I have noticed that it does not reflect on the frontend editor. I will talk about the issue with the developer team.

Ofi Khan Staff

1 year ago

It was my silly mistake. The CSS code does not work on the frontend editor because of the class name. I have used one class name which is only used in site preview. If you use this code, then it will be shown both on preview and frontend editor.

Please use this CSS to
Template Options -> Custom Code -> Custom CSS

.sppb-addon-video .sppb-addon-title{
  height: 100px;
}

Frank Asked this

11 months ago

Hello Ofi, thank you for coming back to this - but i remeber, that all was finde - so i did not havy any more question.
Best regards
Frank

Ofi Khan Staff

11 months ago

You are welcome 😊

Thank you for your feedback.