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.
Related
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
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.
I am trying to embed this iTunes button that I am putting on a site, but it seems to automatically alight left. Where and how in this code would I make the button center itself? Please see the example code below. Thanks!
Here's a quick fix if you have access to the css you could easily do this with flex box.
Wrap your anchor tag:
<div class="itunes">
</div>
add this css:
.itunes {
display:flex;
justify-content:center;
}
jsFiddle
Although adding inline-styles is frowned upon..., if your in a pinch this will work as well. Please don't do this unless you must:
<div style="display:flex;justify-content:center;">
</div>
note: flex box works on most browsers.
I am building one single website for both mobile and desktop.I am using the Fixed position for the header to satisfy the navigation requirement(like scroll spy).It is working fine in desktop version.When i try to browse the same in mobile version,since i made the min-width:850px; the content is not showing up properly in the mobile.Because of the fixed position i cannot able to drag to the header also.
I have found that http://www.visualstudio.com/en-us/downloads this MS website follow the same, when i minimize the website i am having the same problem.But when i load that page in mobile , the webpage loads in complete zom out mode,but mine zoom in and fits the page to the mobile browser.I wounder there must be some trick to make the page zoom out completely, so that while loading in the mobile it wont break.
If anyone have any idea, pls share. I have made a simple fidle to demonstrate my problem.
http://jsfiddle.net/rg46D/6/
<div style="position: fixed; height: 70px; background-color: lightcoral;width:100%;min-width:950px">
P.S: i cant change the minimum width of the page.
Try removing the min-width and place some padding on the navigation container instead:
<div class="header" style="position: fixed; background-color: lightcoral;width:100%;">
Home
Links
About
Link1
Link2
LInk3
</div>
Then the CSS:
.header {
padding-bottom: 20px;
}
http://jsfiddle.net/rg46D/7/
Nice learning for me.I found the problem by myself.If you are not following the responsive design and having some of fixed width , never use this tag.
<meta name="viewport" content="width=device-width" />
I have removed it , it is working just like desktop in mobile..
My footer isn't aligned at the center on pages without a sidebar. On pages with a sidebar, the alignment is perfectly fine. Why is this happening? Can anyone help please?
Here's a link to the site I'm working on: http://www.thesuperwomanlifestyle.com/
The home page has no sidebar so the footer isn't aligned at the center. If you check other pages that have a sidebar, the alignment is alright.
Please help!
Fix your code errors, like the missing closing </p> and </div> tags. Those errors will throw the footer out of alignment. See [Invalid] Markup Validation of thesuperwomanlifestyle.com - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code. Find the source in index.php and footer.php, but that depends on your theme. Start fixing the code errors and revalidate.
And fix the BOM file type of your header.php and index.php files, as per the warning in the validation report. Change them to unicode no BOM.
I have checked your code by using view source page for both home page and inner pages. I found that in home page the is inside and in inner pages the is outside .
So check your PHP template file for inner pages and close the div of "insidewrap" after footer's div.
Hope it solves your problem.
There are several reasons, in your footer you have diferent code in the diferent sections, and there are a image than not loads. Due to you use IDs for the DIVs, should be a good solution make the DIVs floating in the CSS code.
<div id='footer_left'>
<img src='http://www.christiflynn.com/wp-content/uploads/2014/03/Take-the-Lead3.jpg' />
</div>
<div id='footer_optin'>
<script type="text/javascript" src="//www1.moon-ray.com/v2.4/include/formEditor/genbootstrap.php?method=iframe&uid=p2c9303f30&version=1"></script>
</div>
#footer_left, footer_optin {
float:left;
width: 10em;
}
You might need to create another footer-page.php template. Then, rearrange another footer. Call the footer template by using get_footer('page');
Of course, when creating this, you will need to create a new template for footer so you can move it to the left.
If it's possible, we'd like to see your code for footer and the page code, please, so we can solve the problem.