On this website, there are many full width parallax images which display on desktop. However when viewed from a mobile device, such as an iPhone 6 - Safari / Firefox, they're nowhere to be seen? How can this be fixed?
background-attachment: fixed on section.parallax_section_holder, is causing the issue for you. Reset the css property in media query may the fix the problem for you.
If you don't require parallax effect on small screen you reset it to background-attachment: initial.
This might help you, have a read.
Note: Its always a good practice to post your code or Jsfiddle.
Related
I'm very new to HTML/CSS and trying to practice by making some basic sites.
The desktop version of my site looks good, and when I inspect it in Chrome the mobile version looks good, but when I actually use a mobile device, the images aren't stretching to resize for the viewport. By trying to fix it I keep breaking it further, so I'd really appreciate some help.
I tried to search for this problem but the solutions I found told me to use background-size: cover which is what I'm already doing. I tried to change the body to body {width: 100vw; height: 100vh;} and also the advice here about taking out the height: 90vh and leaving background cover and width, but that reduced it to the size of the div line, which is too small. I feel that this solution here with media queries is close but I can't figure it out.
Here is the repo and here is the GitHub page where you can view it. Thank you in advance!
Desktop:
Inspector:
Mobile:
try to put background-position:center center;
anyway be careful with a fixed background, it causes huge problems with mobile devices performance
I'm having an issue with background-size: cover on mobile devices (tested on mobile safari and android).
There are times in which the height of my webpage changes when the user expands a more info box. Whenever that happens on mobile the background image actually zooms in. On desktop it does not.
I worked around this issue by adding a "scrollable" layer in the CSS, but this introduced more issues.
Any suggestions on how to fix this, or is the "scrollable" layer my only option?
I believe that the mobile browsers are simply adjusting the background to be what it would look like if the site initially loaded at the "expanded" size, however, on desktop it does not do this.
Using responsive design might help you to get rid of these issues, the method is design for developer who creating a website for both desktop and mobile device.
I will give out an example:
In your CSS you have:
#media screen and (max-width: 700px) {
.hide {
display:none;
}}
In your PHP/HTML you have
<p class="hide"> tester 1234 </p>
These will let your display your text when the screen size is bigger than 700px, disappear if smaller than 700px.
I think you should be able to do some modify for you codes by now, hope this help.
Reference : http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
This is the link to the website I am doing HTML/CSS of
http://test33-jg-us-mb-en.apsww.net/index.php/ex-team-22/jewelry-affiliate-program
on every mobile browser it works fine but in firefox mobile the background image in tabs do not show how it is in actual and also the alignment on Join now button is not correct. Can anyone please help me out with that how I can fix the background issue and how I can use exceptions for firefox mobile to set the join now alignment. Thanks in advance
The site is static for both pc and mobile resolution both.
Regards,
IMMAD
Help us reproduce the background-image error.
For the Join Now alignment, add style margin: 0px auto; before your margin-bottom style.
I wrote a website but I have a bug in it, when I resize my browser my website resizes with it. I have noticed this in Firefox (10.0.2), Chrome (16.0.912.77) and opera (11.60). I tested some other websites omgubuntu webupd8 and when I resize Firefox it still looks good (it doesn't resize with the web-browser). I would love to post images but I need 10 reputation for that.
Using CSS, apply a width (such as 1000px) to your <body> and add margin: 0 auto; to centre the content. You'll have to bring the width of your navigation links down and re-position the ads, but this will stop your site from 'resizing' with your browser.
I strongly suggest using a good CSS Framework. Two good options are:
http://960.gs/
http://blueprintcss.org/
They provide you a fixed width layout as well as an easy way to divide the column into grids.
We have developed a small control that is always meant to be at the bottom of the screen on out site. However when I view the site on the ipad the control does not stick to the bottom it floats in the middle.
Whats the deal with fixed position on the ipad? Is it not possible?
Does the ipad use safari mobile?
I think you should read this.
Since iOS 5.0, position:fixed is also implemented on the iPad: http://caniuse.com/css-fixed, though there are other problems, see Disable scrolling when changing focus form elements ipad web app .
Fixed header/footers for mobile devices are tricky. Using fixed positioning doesn't work as explained in the article posted to this thread by Knu.
I've found two solutions that should provide some relief. One is with jquery mobile and the other is iScroll. Both allow for fixed footer/headers.
My problem is that I'm having a hard time combing the fixed scrolling with other effects in the iPad. I hope this helps.