Having problems with react router hash link on mobile.
On desktop its working great but on mobile its giving me an offset that it sometimes over 100vh away from my anchor tag.
This is where the links get set
<AnchorLink
to={`audio-demos/#${anchorTitle}`}
className={`item ${classItem}`}
style={{ backgroundImage: `url(${src})` }}
>
</AnchorLink>
This is where the id is set
return (
<>
<div className="spacer" id={id}></div>
<div className='demo-audio-container' >
<h2 >{title}</h2>
<div className='adverts-container'>
<div className='adverts-left'>
The site im developing is
https://ingrid-voice.netlify.app/
you can recreate the issue by opening devtools in chrome and going on iphone 5 or 7 for example. go to home page and click a link in the portfolio section. This takes you to audio page and an anchor link. On desktop works but on mobile anchor is not at top of screen.
Any ideas?
Thanks
I've managed to do a workaround by removing the animated hero image on mobile. Seems to have fixed the problem on my android but still seeing the problem on iphone 7.
Related
I am using Zurb Foundation 6. My reveal modal works great on the desktop and looks good for mobile devices in Chrome Dev Tools. But once I try it on an actual device, the modal opens off screen. The user has to swipe up to get to the modal. The problem is the user may not know they have to swipe up to get it. Is there any way to make the modal open on top of the content on ios devices. Any assistance is appreciated!
I have tested on iphone 12 and the Chrome dev tools.
Here is the code I have implemented with the css used to try to keep the modal on top.
<h3>Comments, Priority & Position</h3>
<p class='small'>Add or edit comments, priority or positions.</p>
<form action='' method='post'>
<p>Form content goes here</p>
<button class='close-button' data-close aria-label='Close modal' type='button'>
<span aria-hidden='true'>×</span>
</button>
<button type='submit' class='button tiny'>Save</button>
</form>
</div>"; ```
CSS
.reveal.full { top: 0 !important; }
I think I have solved the issue. The problem was I had the button for opening the modal inside a dropdown callout. Moving the button outside of the dropdown callout seems to have fixed the problem. Slightly different look than I was going for but problem solved.
I am working on my website at the moment. And I realized, when looking at the mobile site that one of my images stretches/changes it's aspect ratio. Keep in mind this is only on iPhones. I had a few friends look at the site, and only the people with iPhones had the image stretched like this.
This is the page on the browser
This is the page on my iPhone 11
<div class="col d-flex d-md-flex d-xl-flex justify-content-center align-items-md-center">
<img class="d-xl-flex align-items-xl-center" src="assets/img/headshot.jpg" style="max-width: 90%;">
</div>
I originally had height: auto; in there as well, and when trying to solve this issue I found an older post saying that could be the issue. Sadly it did not resolve it.
I know I can easily solve this problem with media queries, but there must be a reason why this happens only on iPhone. I also only have in body styling on this image, you can see it on the browser preview on the inspector.
If you would like to look at it yourself. The Website URL is https://www.robinalexander.at/about-me
Try to remove the classes d-xl-flex align-items-xl-center from img and give it a display: block. The parent div will keep the img in place
My website 5focusmanagement.com is not displaying completely on mobile. Only footer is displaying. May be error with HTML tags or CSS styling. Here I am attaching code. Please suggest me how can I display complete website when we open on mobile browsers. Thank you.
Please download the code here..
<div class="container hidden-phone">
You have a hidden-phone class that hides the content on mobile devices.
.hidden-phone {
display: none !important;
}
Remove this rule and the content will be displayed.
I'm using Kendo Mobile and am testing a modal view out. My goal is to have the height of the modal view auto resize to the contents within it.
Here is what I currently have:
<div id="mPopover" data-role="modalview" style="width: 95%; height: auto;">
<div data-role="content">
<ul data-role="listview">
<li>...</li>
.
.
.
</ul>
</div>
</div>
This works as expected on all the mobile browsers I've tested (Android 2.3 stock browser, Firefox, Dolphin)... except Opera Mobile. I know Opera isn't claimed to be fully supported, but does anyone have a clue as to why the inline height value isn't being respected the same in Opera Mobile? All I see with Opera Mobile is a very thin strip of a modal view.
I am using the latest Kendo UI Mobile, Jquery, and Opera Mobile browser for Android 2.3.
Thank you
Kendo UI Mobile doesn't claim any support of Opera Mobile - many things will be broken there. There are several reasons for this - flexbox (now supported in the latest Opera), the inability to remove the tap outline and the horrible CSS transitions/transforms performance.
Figured out a solid workaround that correctly sizes all modal views using JQuery:
$(window).bind("load", function () {
// kendo rendering fix for windows phone 8 and opera mobile
// correctly sizes all modal views
$("[data-role=\"modalview\"]").each(function() {
$(this).height($(this).height());
});
});
Call this before invoking the modal 'open' call:
$(".km-modalview-wrapper").height('auto');
Also you must set data-stretch="true" to the modalview.
I have a Wordpress multisite installation with these websites:
A portal: http://www.gprsoftware.nl which links to
http://www.gpradvies.nl
http://www.gprstedenbouw.nl
http://www.gprspecials.nl
http://www.gprgebouw.nl
http://www.gpronderhoud.nl
The problem occurs on all pages of gprgebouw.nl and gpradvies.nl but not on the other domains. Here is a screenshot of the homepage of gprgebouw.nl
What happens:
the right sidebar slides under the content area
the bar-graph icon image is increased in size
grey borders of the sidebar are extended to the top of the content area
Especially point 3 makes me believe that somehow the content area is not closed properly, but I cannot find this in the HTML source.
The weirdest part is that this only happens on the mentioned websites and not on the others although they share all of the Javascript and plugins and most of the CSS (only some colours are different).
Of course all is fine in browsers like Firefox.
Any ideas what is causing this?
I'm using selectivzr and modernizr for IE lte 8.
On http://www.gprgebouw.nl you have a missing closing div tag here:
<div class="aside-content">
<div class="textwidget">
...
<p><img alt="Justus van Effen" src="http://software.gprgebouw.nl/start/images/thumb4476.jpg"> <span class="stars rating30"></span></p>
<p>Bekijk meer projecten op www.gprprojecten.nl</p>
</div>
</div>