[Ken]

I have my own custom svg icon font …

Is there a way to upload it and use it, via custom css or otherwise, with assets like the icon boxes?

I know this is not possible with Dante, I’m hoping it’s something that’s been added to cardinal?

[Ken]

Now that I’ve changed the page-builder.css file, does that mean I should be using a child theme?

[Ken]

Thanks Rui, that was indeed the problem.

If anyone else has the problem, I find this variation of the code works best for me

.spb_template_li {
width: 33%!important;
}

.custom-templates-nav .spb_templates_ul{
width:600px!important;
}

.pre-built-pages-nav .spb_templates_ul{
width:600px!important;
}

ul.dropdown-menu.spb_elements_ul {
    width: 750px;
}

[Ken]

I think you’re right about the plugin, although I think it’s the ‘tiny carouselhorizontal slider “plus” ‘ version.

However I couldn’t get it to work so I abandoned it. Just using Rev Slider for now and when I have time I’ll look for something more suitable.

[Ken]

Hi Rui,

I’ve added the code, and added a screen showing both the custom templates and asses dropdown.

1. Custom templates – the code narrowed the buttons, but they didn’t wrap so there is still no visibility of the bottom of the list. The nav bar is also wrapping funny because of the 500px width, but that is certainly something that I could live with if need be.

2. In the screenshot I’ve also pasted screens of the various dropdown assests – you’ll see in all of them that the bottom of the lists is cut off.

Attachments:

You must be logged in to view attached files.

[Ken]

Correct 🙂

[Ken]

This reply has been marked as private.

[Ken]

Probably a bit of a tall order, but hey 🙂

I work with two monitors.

It would be awesome to open up an existing page in page builder in one tab (browser window) on one monitor and another in a second tab (browser window) on the other and be able to drag page builder elements (complete with text, images etc) between the two.

Or a cut/copy and paste feature which amounts to the same thing.
I find using the duplicate function and then dragging it around can be a bit finicky sometimes, especially for larger elements. They don’t always drop where you want them to.

… you did ask for feature requests 😉

[Ken]

Thanks Ed, you nailed it 🙂

So my curiosity has got the better of me – what could the reason be that this doesn’t work correctly on my site without all this extra code? If it was a common challenge there would be a lot more support tickets about it, but I only found one other ticket with the same problem …

[Ken]

As I mentioned in the previous post, portrait works great, just as in your screenshot above. Fixes don’t apply to landscape.

[Ken]

Thanks Ed, almost there 🙂

That extra code you added sorts out the phone version.

Because my phone is a Note it’s got a pretty big screen, so when I turn it to landscape I think it goes onto the tablet grid. I don’t have a way to test this. In that landscape mode on my phone the code above no longer seems to apply. On a landscape phone that is especially problematic as it means that the header takes up a third to half of the available screen height.

My intuition tells me it must be because of the max width in this line of code:
@media only screen and (max-width: 479px) {

So I took a look at the bootstrap grids here
http://getbootstrap.com/css/#grid-options

correct me if I’m wrong here … but based on that assumption I changed the max width to:
@media only screen and (max-width: 768px) {

I don’t know if 768px is the right number because I couldn’t see where you got 479px from the bootstrap grid so it was kind of a guess 😀 But that did get the header to resize in phone landscape exactly as your code does in phone portrait. Awesome 🙂

However, there must be a logo resizing class for this tablet/phone landscape layout as well (and I don’t know what that is) because while increasing the max-width in your line of code corrects the header in landscape, it doesn’t affect the logo resizing in that landscape mode meaning the logo remains to big.

If you look at the last screenshot it means that of the 3 screenshots we have solved the left two (ignoring the driveatank.com screens) but the top right remains as it is in that screenshot.

[Ken]

Hi Ed,

Unfortunately the phones still look the same.
To make sure it wasn’t just my Note 3, I took some screens from an S3 and an iPhone last night as well … same issue with the height – see the attachment.

Attachments:

You must be logged in to view attached files.

[Ken]

Hi Ed,

Thanks for that 🙂

#header-sticky-wrapper.is-sticky, header.sticky-header.sticky-header-resized {
height: 70px !important;
}

The space you removed from this code means that desktop version is now functioning perfectly, and we can leave this piece alone now 🙂

You guys also provided this code to try and solve the mobile version ..

@media only screen and (max-width: 479px) {
#header-sticky-wrapper {
height: 70px !important;
}
}

Unfortunately that is not working.

I’ve attached a screenshot to show what I mean.
The header bar is way to big for the logo. This occurs on my desktop browser (firefox) and also on my mobile browser (chrome) – I’ve included the mobile screen shots.

I also included screenshots from the “drive a tank” website in your showcase section as an example of what the header should be doing.

Is it helpful to note that I’ve had this problem since I very first loaded the theme?

Thanks for your help.

Regards,
Ken

Attachments:

You must be logged in to view attached files.

[Ken]

This reply has been marked as private.

[Ken]

I’ve noticed that the problem is not there when one first populates the accordion titles, but I have had it occur when changing accordion titles later on.