Toogle Text Aligment

Hi Betheme Team,

is it possible to align the toogle text?

I wanna center the text.

Best regards,

Pixel

«1

Comments

  • 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.

    It is always a good idea to also attach a screenshot showing what you refer to.

    Thanks

  • edited February 13

    Hey Phil,

    I am quite good with javascript so I really wanna make those things work!

    since the Website is still unter maintance but I need your support for some questions (see beneath) so I added a user which you can access over: https://pixelcosplay.com/wp-admin/ to access https://pixelcosplay.com.



    So my questions would be the following:

    1: When you click on one section under "work portfolio" a image gallery with more pictures of this project opens. When I click on one of the pictures in the image gallery they open the full path of the media data but I would love to close the popup when I click on the picture and open the normal "slide show" of the image gallery instead. You can reproduce this behavior if the popup is included "on start" then it works except the closing of the popup window. How do I achieve this? ( I will leave the side showing you one popup at the start so you can see the partly wished behavior)


    2: Also the padding of some elements is too large and I can't change it. The right side of the About Me section, for example, seems quite off. How can I change this since if I set the padding from the wrap to 0 it still is there?


    3: I want to center the icon from the infobox since it seems also off when there are two lines:

    4: My Trailerbox doesn't work like in the Demo. I shows on Hover a white screen on the bottom of the picture:


    I really hope you can help me, thank you so much in advance!

    Best regards,

    Pixel

  • Please do not share your login credentials here on the forum, as others can see them.

    1)

    2) Open style options of the counter element, and change the container padding to zero.

    3) Try the following CSS code:

    .infobox ul li::before{
     top: 30%!important;
    }
    

    Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

    4) Edit the Trailer Box element, and in Style tab adjust the Content Background.

    Best regards

  • Sorry, I noticed that I sent an incomplete message.

    For the first point, try the following JS code:

    jQuery(document).on('click', '.mfn-popup-tmpl .gallery a', function() { jQuery(this).closest('.mfn-popup-tmpl').removeClass('mfn-popup-active mfn-popup-showed'); });
    

    Put it in Betheme -> Theme options -> Custom CSS & JS -> JS.


    Best regards

  • edited February 13

    Hey Phil,

    thank you so much for your cooperation.

    Could you use the login information? Since some problems are sadly not fixed (yet).

    1. What works is that a click closes the popup but if the popup opens from a click on a trailerbox for example, another click causes to open the media file directly and not the slide show. This is a crucial feature for me so how do I achieve the same behavior as if the popup opens on start.
    2. Thank you so much it helped :)
    3. Sadly only fixed the problem partly since now when the
    4. Fixed

  • Sadly the "feature list" Item looks a bit messed up in the "Tablet / Laptop" view so can I fix this with some Jquery code?

  • The login credentials you sent work, but we need admin rights to check what you mentioned.

    Please change this user privileges.


    Thanks

  • Hey there, changed the user role right now and trusting you tho!

    Weirdly point 3 didn't take my full questions so:

    Sadly only fixed the problem partly since now when the line is only 1 column tall its a not central anymore but a little bit more on the lower part. But I can work around it tbh the other points are more crucial rn.


    Best regards

  • edited February 14

    Sorry, but the account I have access to still does not have admin rights.

    Are you sure that you changed it?


    Best regards

  • Sorry it wasn't changed.

    You should have access now!

    Best regards!

  • Hey Phil does it work?

    +

  • 1) Instead of an Info Box element, please use a Heading and List element. With the list element, you have an option for icon alignment:

    So, with that, no CSS code is required.

    2) Instead of Feature List, use the Icon box element. The feature list can have a minimum of 2 columns for desktop, laptop, and tablet, and currently, it does not have enough space around it.

    3) We are checking the solution for the popup and gallery but are still working on it. When we find an appropriate solution, I will let you know.

    BTW can you please check if you do not have any cache enabled on your server? It could be the reason why the changes we made did not work.

    Best regards

  • We have managed to correct the gallery in the popup. Please check it out.


    Best regards

  • Hi Phil,

    Sadly I only have this JS Script in the Theme rn:

    jQuery(document).on('click', '.mfn-popup-tmpl .gallery a', function() { jQuery(this).closest('.mfn-popup-tmpl').removeClass('mfn-popup-active mfn-popup-showed'); });

    And it sadly doesn't fix the problem:

    When you click on a gallery on the popup it still opens the full path of the media file:

  • About the other issues:

    1: How can I achieve with a list the exact style (icon on the left but text still centered) ?

    2: Is there a way to have two Icon Boxes besides each other since I am facing the same issue with a weird display on some screen sizes or do I need to place them under each other. Since this I could also achieve with Feauture List Items ?

    3: Answered above

  • 1) There is no setting for that. It can be done only through a custom CSS.

    2) Yes, you must decrease Icon box element size to 1/2.

    3) I have recorded a video and placed it in your media library. Please check it out.

    Please also clear your cache because it might be the reason why you do not see our changes.


    Best regards

  • 1:Can you provide me with this css code?

    2: it sadly also looks cropped like the feature list

    3: I have cache disable on all pages for testing purpose but it still doesn't work :(

    Can you provide me with the JS Code?

  • 1) Here you go:

    .mfn-list .mfn-list-item .mfn-list-desc{
     flex-grow: 1;
     text-align: center;
    }
    

    2) I do not see icon boxes on your website. Did you add them?

    3) But as I showed you on the video I uploaded to your media library it is working properly.

    Please clear your browser cache, and recheck that.


    Best regards

  • 1) It would fix my mistake thank you so much!

    2) https://www.loom.com/share/87e0fe7f59ad44f98f7c9ca814e56525?sid=abae092d-bcda-42fa-a248-f63d48fa9c8a

    As you can see in some responsive views they still look quite cropped!

    3) Now its working, thank you! Seemed like my Browser Cache was off!

  • The icons are too big, and they do not have enough space on smaller resolutions.

    Also as I can see, you are using Icon Box Basic. Instead, I suggest using Icon Box as it has more customization options.


    Best regards

  • Hey there,

    I am using both but how is the recommend way to let the icons adjust their size on different screens?

    I have also Icon Boxes under the Icon Box Basic since I wanted to check if they look different!


    Best regards

  • Check the following Settings:

    Best regards

  • Hey there, It still looks cropped in the tablet/laptop view. I just need an element with a title, a description, and an icon. Is there any Icon which adapts more responsively.

    I wanna have them besides each other until they would get cropped so they change the layout to 1 element "per line".

    Best regards.

  • edited February 26

    To this CSS Code:

    .mfn-list .mfn-list-item .mfn-list-desc{....

    Is it possible to exclude one list from this behavior (via ID or so?).

    Best regards,

    Pixel

  • 1) You must adjust the view for the laptop and tablet view. Please see the following video tutorial:

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

    2) You must inspect the page source, select the list on which you do not want to use this CSS and add a unique class to this CSS like this:

    .column div:not(.mcb-column-inner-y9poexjcl) .mfn-list .mfn-list-item .mfn-list-desc{
     flex-grow: 1;
     text-align: center;
    }
    

    Best regards

  • Thank you,

    hopefully two last questions:

    1. Sometimes when leaving the image gallery from a popup, the mouse navigation is buggy (Video)
    2. Is it possible to let a row which is contained of two 1/2 elements switch to 1/1 already on tablet view not on mobile?

    Thanks in advance!

  • 1) Which video do you refer to?

    2) When you switch to tablet/mobile view, you will be able to adjust the size there.

    Best regards

  • I checked that on Firefox and Chrome, and it works correctly for me on both.

    Please clear your browser cache, and check if the problem persists. You can also check it in incognito mode.


    Best regards

  • I cleared the cash the problem still occurs also on mobile etc. Please check again.

    Further I have a Problem when I wanna add a muted video with revolution slider. Autoplay doesn't work on mobile devices even when I mute the video from the start regarding google chrome policies. Is there a workaround there?

Sign In or Register to comment.