Pricing Box Item

depperformance

Hi there,

I need to put the pricing box item similar to this:

(On hover, its the design of the right)

Can you help me? This is what i've got right now:

So i need to put the "€" at the same size of the price, remove the decoration and put some phrase above the price and put an icon before the itens of the list. And then change de colors when hover.

Thanks!

Phil

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

depperformance

I need this done before going live. It is possible to share with you guys a user?

Phil

Sure, please send us the WordPress dashboard access privately through the contact form, which is on the right side at https://themeforest.net/user/muffingroup#contact.

Notice!

Please attach a link to this forum discussion.

Sending incorrect or incomplete data will result in a longer response time.

Therefore, please ensure that the data you send are complete and correct.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

depperformance

Sent! Thanks

Phil

1) To set the background on hover head to the Advanced -> Background tab:

2) To move the currency to the same level as number, use the following CSS code:

.pricing-box .plan-header .price sup.currency{
 top: 0!important;
}

Please add it to Betheme -> Theme Options -> Custom CSS & JS -> CSS.

3) To remove the decoration line go to the Style tab of the element and set its width to zero:

4) I can see that you already handled putting a phrase before the price.

5) To put an icon before the list, use HTML like this:

You can find a list of icons here:

https://muffingroup.com/betheme/elements/icons/

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

depperformance

Hi| It's not exactly the same, but it's close enough to work. Thank you!

Another question:

- On the “aparelhos dentários” page, you can see this module where the images don't appear on the desktop and appear very small on other devices. I want it to cover everything, please.

Phil

You have a padding assigned to your images that is too big and makes the image inside invisible:

Also I suggest using the height value and border radius in the style tab:

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

depperformance

It works at desktop version but see what happens at laptop, tablet and mobile:

LAPTOP

TABLET

MOBILE

Thanks for your help!

Phil

So you must adjust it also for other breakpoints.

https://support.muffingroup.com/video-tutorials/responsive-editing-in-bebuilder/

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

depperformance

Thanks!

depperformance

Another question, please, i need that when the person is at one page, that this same page looks "selected" at menu. With some color and bold. How can i do that? Thanks

Phil

For the color, edit the header template and set the menu item color for the active state:

To make it bold, use the following CSS code:

.mfn-header-tmpl .mfn-header-menu > li.current-menu-item > a.mfn-menu-link{
 font-weight: bold!important;
}

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next