Picture and text zoom on smartphone

Hi,
Please try this css and check that it doesn’t cause issues on other pages. If it does we can adjust it so it works on this one page.

@media only screen and (max-width: 767px) { 
#top #main main.content {
padding-top: 0px !important;
}
#top #main .empty_title.title_container {
height: 40px !important;
}
}

Please see the screenshot in Private Content area.

Best regards,
Mike

Hi,
If I understand your request correctly, you want the breadcrumb items to have a 48px padding top & bottom for mobile so it can be clickable.
Unfortunately for mobile, this blows up the breadcrumbs to take over 330px in height, which is quite large. I was able to give it a compromise of 6px that will still fit in the same area and give it some space, if your breadcrumbs were less then 48px might be reasonable. In my experience, when I click on a group of links on my mobile device, my device zooms in a little to allow me to choose the link I want to click. But I’m using Android. I also, as a user, don’t look to breadcrumbs as a navagation tool, typically there are other links on a page that points to where I wish to go. So I submit that what you are seeing is not a error, but a suggestion. But this is up to you.
Please try this css for the 6px size on mobile:

@media only screen and (max-width: 767px) { 
.breadcrumb-trail a,.breadcrumb span {
margin-top: 6px !important;
margin-bottom: 6px !important;
}
}

Please compare it with this css for 48px:

@media only screen and (max-width: 767px) { 
.breadcrumb-trail a,.breadcrumb span {
margin-top: 48px !important;
margin-bottom: 48px !important;
}
.title_container {
min-height: 332px !important; 
}
}

Please use the url in the Private Content area to test with.
I know we are in different languages, so I hope you understand that I’m only trying to help :)

Best regards,
Mike

Hi,
I have not seen this before but my research finds that it only works for mobile Android devices The code you posted was broken, try using the code at the link above. But I also see that it is from 2016 so I don’t know if it still works, but I can’t test it on my desktop and it is outside of our support scope since it is not for the theme or website.
Perhaps this plugin would work better: Mobile Address Bar Changer

Best regards,
Mike

Hi,
If you use the “final code” on the page above, please ensure you are not adding the first line with the ?php
you would use this:

function address_mobile_address_bar() {
	$color = "#008509";
	//this is for Chrome, Firefox OS, Opera and Vivaldi
	echo '<meta name="theme-color" content="'.$color.'">';
	//Windows Phone **
	echo '<meta name="msapplication-navbutton-color" content="'.$color.'">';
	// iOS Safari
	echo '<meta name="apple-mobile-web-app-capable" content="yes">';
	echo '<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">';
}
add_action( 'wp_head', 'address_mobile_address_bar' );

Other than that it looks right and doesn’t cause an error on my localhost, but I’m unable to test beyond that. If this still doesn’t help try Googleing for alternatives.
Sorry that I couldn’t be of more assistance.

PS: Have you tried Upwork.com ?
I bet you could hire someone for $5 to do this.

Best regards,
Mike

Hi,

@Sachasilvestri, I see that the titles end with “undefined” I believe this is because the script was getting some info from the social app plugin at the bottom of each page, I believe it was the page title, but I don’t see it on this page, please try adding it.

Best regards,
Mike

Hi,
I believe you are saying that you tried adding it and now it is working.
That’s great. This thread is getting quite long now, perhaps we should close it now and if you have any other issues you can open a new thread?

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

Best regards,
Mike