Testimonials on mobile

visionsys · July 2020

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/

Pablo · July 2020

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

visionsys · July 2020

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

Pablo · July 2020

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

visionsys · July 2020

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.

Pablo · July 2020

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

https://prnt.sc/tjkec7

thanks

visionsys · July 2020

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

Pablo · July 2020

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.

https://prnt.sc/tl3461

Thanks

visionsys · July 2020

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?

Pablo · 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

visionsys · 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.

Pablo · July 2020

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

visionsys · 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

Pablo · July 2020

2) I tested it on Galaxy S10 - Chrome browser and I do not see it either.

https://prnt.sc/tnvaul

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

visionsys · July 2020

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.

Pablo · July 2020

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:

https://prnt.sc/tp5ap7

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:

https://themes.muffingroup.com/be/theme/single-post-2/

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

visionsys · July 2020

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

Pablo · July 2020

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

visionsys · July 2020

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.

Pablo · July 2020

I tested it on S10 and my CSS code works, it's already provided in the CSS code.

https://prnt.sc/tr7khe

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

visionsys · July 2020

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.

Pablo · July 2020

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

visionsys · August 2020

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

Pablo · August 2020

I'm really sorry, but I do not see that problem, can you clear the cache on the browsers on these devices?

https://prnt.sc/tt41et

https://prnt.sc/tt42gq

https://prnt.sc/tt43nk

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

Testimonials on mobile

Comments