More Breakpoints Or Other Solution? - Question | JoomShaper
SP Page Builder 6 is Here! Learn More →

More Breakpoints Or Other Solution?

Frank

Frank

SP Page Builder 3 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

0
8 Answers
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 3 months ago #199123

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

0
Frank
Frank
Accepted Answer
3 months ago #199127

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

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 3 months ago #199156

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

0
Frank
Frank
Accepted Answer
2 months ago #199807

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!

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 months ago #200066

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:

files.fm/u/y5535mdjpq

0
Frank
Frank
Accepted Answer
2 months ago #200165

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

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 months ago #200272

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.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 months ago #200688

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;
}
0