Testimonials on mobile

edited July 2020 in Theme support
Hello,

We are using the default built in testimonials page element from BeTheme for our website.

We have a problem on mobile. The name of the person is under the dots. - https://imgur.com/a/8pdWKS1

Is it possible to remove the dots or to move them down so it doesn't get below the name?

Website link - https://heraclinics.com/

Comments

  • Hello,
    Please use this CSS code:

    @media (max-width:786px){blockquote{
    margin-bottom:0px !important;
    }

    .testimonials_slider.single-photo .slider_pager{
    margin-top:60px !important;
    }

    .slick-dots{
    bottom:-60px !important;
    }}
    Thanks
  • Thank you for the solution! Everything is perfect!

    I have a couple more bugs that we need to fix:
    1. Can the blogpost layout be different? I want the Published by, tags, categories and all posts elements to be under the post. 1st should be the image. 

    2. My website logo is not centered on mobile. How can I fix that? It is centered in the BeTheme Header builder admin panel.

    I'm attaching both screenshots in a single imgur link - https://imgur.com/a/4akV0h0
  • 1) That will be not possible, because it has to be changed in the html structure - with only css code I cannot make such things.

    2) Using headers from Theme Options, you can do that only with the "Stack Center" header type.
    thanks
  • 1) I'm pretty sure it can be done with css order (https://developer.mozilla.org/en-US/docs/Web/CSS/order) but I'm not sure on which element to set it and what is the main container so I can set display: flex; to it.

    2) Can you please provide me with a guide or atleast a screenshot of the option. I cannot find it.
  • 1) The order css parameter is made for 'display:flex' parameter which is kinda new.
    We usually use the 'display:block', and this parameter 'order' will not work.
    If you would like to not to touch the HTML code, you can try to create a JS code which will move your html element in DOM tree.

    2) Theme Options > Header & Subheader > Header

    thanks
  • 1) Alright, will leave it as it is for now.

    2) This menu is not active for me, since we are using the BeTheme Header Builder plugin. The bug is appearing exclusively on mobile. On desktop the logo is arranged to the left, but on mobile it should be in the exact center.

    You can check the settings here - https://imgur.com/a/qAdsjUY 
  • 2) Well, while you are using the Header Builder plugin, you have to push the logo to the container on the center, right now its in the left.

    Thanks
  • 2) The logo is aligned in the center in the admin panel - https://prnt.sc/tl69au but it is not centering the logo in the website.

    One more thing:
    3) The menu pages on the bottom are unclickable. When you try to click them the phone navigation buttons appear. The page cannot be scrolled further so the buttons are unusable on mobile. - https://prnt.sc/tl6b20 How can we fix that? Can we change the line height of these texts so they stack closer to each other and stop leaving the viewport?
  • edited July 2020
    2) The width of the columns are calculated by the javascript and it looks like the icon have bigger width than menu and it's not centered - it's looks like a bug, we'll fix it in next update.
    What we can suggest for now is to change the layout a little bit, or use this CSS code:
    .mhb-menu .mhb-item-inner{height:100% !important;}
    .mhb-menu .mobile-menu-toggle{position:relative !important;}}

    3) You can only do two things to achieve that:
    a) Decrease the amount of the menu items by inserting them in other submenus.
    b) Decrease the line height of all of the elements using custom css code (+ in the muffin header builder decrease the font size a little bit)

    I do not see any other solution to this problem.
    Thanks
  • edited July 2020
    2) This CSS is centering the logo, but moving the menu button out of the screen. I tried removing the code but the centering and the new problem remains. Tried adding the menu button again but it's still out of the viewport. Please let me know how to get the menu button back to the screen, it's more important than having the logo centered at this point, as it is the website's main navigation. The problem is appearing on just a few pages - home, contacts and probably some more. On the other half of the pages, the menu is looking as previously - not centered, but the menu button is in the viewport. https://prnt.sc/tmh5fj

    3) Decreasing the font-size helped with the current problem. Thanks.
  • 2) I added this code once more and it does not makes the problem as you described.
    Can you add the code into your CSS codes and give me a look how it behaves?

    When I apply the code in the style editor from the browser, it all looks fine.
    Also, which browser do you use?
    Thanks
  • edited July 2020
    2) I added the code once again and the bug is appearing again. The browser I use on my mobile phone is Google Chrome - the device is Samsung Galaxy S10

    Will leave the code running so you can check it out. Please check multiple pages as it doesn't run on some of them for some reason.

    Also:
    4) We agreed that we can't move the blog post navigation down, but can I make it invisible?
    I tried removing it with the following CSS:
    .column .one .post-nav .minimal {
    display: none;
    }

    .column .one .post-header {
    display: none;
    }

    In the Chrome Developer tools it so hiding them, but when I deploy the code to the website - nothing happens.

    Link to the webpage where you can check the elements: 
    https://heraclinics.com/blog/uncategorized/website-na-medicinski-centar-hera/

    Elements to remove: https://prnt.sc/tnus5i
  • 2) I tested it on Galaxy S10 - Chrome browser and I do not see it either.
    Do you have any tips how to recreate that issue?

    4) To remove informations about the post, please use this CSS
    body.single-post .post-header{
    display:none !important;
    }

    About the square, please go to the Theme Options > Blog, Portfolio & Shop > General
    and turn on the "Hide Header Arrows" option on the top.

    Thanks
  • Hello,

    2) I'm not exactly sure how it got bugged. It was fine the first day after deploying the CSS, but on the next day it was bugged as in the screenshot. When I remove the code - the menu button goes down to normal, but when I use the code it goes up again by itself.

    4) I have removed the square from Theme options but the provided CSS code does nothing about the information. 

    Additional question - Can I make the feautured image appear as a static one? I want it to be full width or atleast full size of the image. The zoom option is not needed. Can we make it atleast the width of the content and not zoomable? If we fix that, the information panel shouldn't be a problem as I've moved it to the top and it doesn't take up that much space anymore.
  • 2) Do you have any auto optimize, cache or minify plugins?
    If so, please disable them because they could make this kind of issue. (cache issue)

    4) Sorry, I've added additional closing bracket in the CSS code, please remove it:
    I've already edited the code to be proper.

    5) Will the "Intro Header" be good? - this is the only way to make the image on top to be full width:
    To enable it, please edit the single post and change the template in the "Page Options" to "Intro Header" and upload the image for "Header" on the same page.

    thanks
  • The layout for the blog is ok now, I've removed the info and square buttons and added the image from the builder

    The problem with the menu navigation button on mobile is still existent after removing the bracket. I've deleted the cache from the website. Also, I tried it on another smartphones - on Samsung Galaxy S9 the problem appears. On Samsung Galaxy J5 2017 the header is ok. 

    Is it possible that the bug comes from the height set on the header and the current positioning from the CSS? It's currently set to 80 - I think the positioning attaches the item to its parent container, hence top of the header, which is out of the viewport. Can we add (top: 40;) for example and fix it? Please check the screenshot attached - https://prnt.sc/tpc9le
  • Well, you just have too many items in your menu, you have to insert them in another submenus, this should solve the problem.

    I've created the CSS code, which will help with it, but the menu will look more ugly.

    @media (max-width:768px){
    .mhb-menu .menu li ul li a{
    padding:0px 10px 0px 10px !important;
    font-size:10px !important;
    }
    }
    thanks
  • The code doesn't change anything about the menu on smartphone. It is still bugged on multiple mobile devices:
    - Samsung Galaxy S10
    - Samsung Glaxyy S9
    - iPhone X
    - Samsung Galaxy Note 10
    - Samsung Galaxy J5 2017
    And probably more.
  • I tested it on S10 and my CSS code works, it's already provided in the CSS code.

    This code made your menu items smaller to make them fit, and as you can see it's not behind the screen anymore.
    Or did I misunderstand you with the problem? If so, I'm really sorry about that and please, explain me the problem once more.
    Thanks
  • Probably I didn't explain it right. Excuse me about that.

    Please check the provided screenshot - https://prnt.sc/trnhvt

    The menu button is leaving the viewport when we add the CSS that centers the logo. (You can find the CSS a little bit higher in this thread, on July 20th)

    I will remove the CSS that is decreasing the font-size of the menu items as we got it fixed a few days ago by decreasing the font-size from the BeTheme Header Builder admin menu.
  • But, I tested it with the code and without it (July 20th) and it does not look like your screenshot.
    I tested it on iPhone X (Safari, Firefox), iPhone 11 (Safari, Chrome), Samsung S10 (firefox, chrome)

    Do you have any steps to make it look like on your screenshot or it appear by the default, while the website is loaded?
    Also, which browser do you use and on which page does it happen?
    Thanks
  • It appears by default when the website is loaded and is bugged on every single page.

    Most of the browsers that I've used to test it are Chrome. The only different ones are for the:
    Samsung Galaxy Note 10 - Samsung Internet
    iPhone X - Safari
    All other devices, listed above are using Chrome
  • I'm really sorry, but I do not see that problem, can you clear the cache on the browsers on these devices?

    We even tested it on couple of mobile devices (iphones 11) and it works perfectly for all of us.
    Sorry, but we are not sure how to recreate that problem :(
    Greetings
Sign In or Register to comment.