Docs

[SEVERO]

Hi there

Having a few issues trying to get the Info Bar modual to work with an image and still be responsive. It works fine with the Slide In module and Popup but doesn’t work well with the Info bar as it doesn’t close up the height when the browser window is reduced.

To give you an idea I have an image loaded into the head of my page: http://www.mad-daily.com but I’m very limited to what I can do and love the idea of the Info Bar.

Any help would be greatly appreciated as I have spent a lot of time trying to come up with a solution for this.

Thanks

[Christopher]

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[SEVERO]

Hi there

Attached is a screenshot. As you can see the banner/advert (Info Bar) at the top has unwanted space around it and as the browser window gets smaller the space around the ad increases.

However the advert below it is placed in the header and works well but I don’t have any settings like I do with the Info Bar.

ConvertPlug also has the Slide In and Popup module which work well (no unwanted space) but I don’t want the banner/advert covering the site which is why I’m wanting to use the Info Bar which sits above the site.

Hope this makes sense as I’m not sure how else I can explain it.

Cheers

[Lely]

Hello There,

Did you figure this out already? This is what I am seeing when I check:http://screencast-o-matic.com/watch/cDXfe4js9q
No more spacing. Please confirm.

[SEVERO]

Hi there

Because you wanted a screenshot that’s what I supplied as I could only make the Info Bar live for a few seconds.

What you’re seeing is the 2nd banner/advert in the screenshot.

Not sure where to go from here as I can’t make the Info Bar live looking like it does in the screenshot unless you were to replicate my issue your end using the same image.

Thanks

[Rad]

Hi there,

From your screenshots, what’s the correct the one on top or the bottom one? What I’m getting is the bottom one, and it’s responsive. What browser you’re getting the top one?

Thanks!

[SEVERO]

Depends what you mean by correct. In the screenshot, the top one is the ConvertPlug Info Bar (has all the functionality) and the 2nd one is code in the header (visually looks good but have no control over it).

I can only keep the ConvertPlug Info Bar live for a few seconds as I have people on my site constantly and looks terrible.

So when you view the site LIVE you see the code in the header.

The best way to replicate this is take the image source () and place this in the ConvertPlug Info Bar to see the issue.

Thanks

[Lely]

Hello There,

I did try to add the same image on infobar but then I can’t duplicate the issue you were having. See this:http://screencast-o-matic.com/watch/cDXQ6sj8KO. Do you have special settings?

[SEVERO]

I see you have padding around the image which shouldn’t be there and as you collapse the browser the padding top and bottom stays the same as the image gets smaller.

[Rue Nel]

Hello There,

The padding is because it is a blank info bar has a default padding. If you want to remove it, you can make use of this code:

.cp-blank-info-bar .cp-content-container,
.cp-info-bar .cp-ib-container {
  padding: 0 !important;
}

And since it is an image, the maximum and minimum width of the image will depend on its container. This is the reason why the image gets smaller as you resize the browser smaller. I would recommend that you do not use an image with the text in it. It is best that you use a custom content meaning a mixed of image and html elements like heading tag and p tag so that the text is readable no matter how wide or narrow the screen you are viewing it.

Hope this explains it.

[SEVERO]

Hi there,

I do want the image to be the same width as the container like the one currently on the site but for some reason that code isn’t working for me…

[Lely]

Hello There,

Please try updating above CSS to this:

.cp-blank-info-bar .cp-content-container, .cp-flex.cp-ib-container, .cp-info-bar-body {
    padding: 0 !important;
    width: auto !important;
}

See this:http://screencast-o-matic.com/watch/cDX6hkjPzu

Hope this helps.

[SEVERO]

Hi there, I must be doing something wrong because what I saw in the video is PERFECT but I’m not getting that.

Ok, so I’m putting my CSS in Advanced > Custom CSS within the Info Bar but I’m still getting all this padding underneath the image when the browser in collapsed.

Sorry about this, but are you able to send me a quick video from start to end?

Thanks

[Lely]

Hi There,

I can duplicate your issue. Please move the CSS on the theme customizer Appearance > Customize > Custom > CSS. Convertplug doesn’t accept !important on it’s Advance CSS textarea.

Hope this helps.

[SEVERO]

Hi there, getting the same results 🙁

[Author]

Posts