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.
Related
I have a website http://basement-recordings.com/ built with wordpress and I have a problem with the background image: on iOs, on some of the pages (for example Entertainment & Events) the background image looks blurry, unclear. This happens on both Chrome and Safari.
I have looked for a solution but I cannot seem to find anything. Can anyone please help me?
iOS has an issue preventing background-position: fixed from being used with background-size: cover
See http://caniuse.com/#search=background-attach *Known Issues and
Background size on iOS
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.
I'm trying to implement a very simple video as a banner on a website using html5 tags. I just need it to be full width and responsive, which appears to work perfectly in Chrome and Firefox, but not Safari.
Here is a simplified version taken from a more complex wordpress page using exactly the same markup and the same happens.
http://noisilyfestival.com/video-test.html
I've set the video background to red, see in Safari there are huge gaps at the top and bottom whereas in Firefox and Chrome it sits flush.
Can't figure out for the life of me what's going on here! I've set the video to display:block which fixes the few pixel gap at the bottom but cannot resolve this. Thanks in advance!
I removed display:block; from #homepage-video and Safari looked just fine.
It was pointed out to me that on resizing the browser width the issue would correct itself. Therefore the intrinsic ratio technique is the most efficient way to ensure this works cross browser...
http://alistapart.com/article/creating-intrinsic-ratios-for-video
Works as it should now on all browsers I've tested it on.
I don't understand why some images and styles are working on IE8 and others aren't in the same page of the same website!
http://www.chrissteeleperkins.com/
The homepage is fine but the images in the footer are missing in the whole website.
If you go to other pages of the website, sometimes the css style looks to be missing.
This weird behaviour seems to appear on IE8 - Windows 7.
Any help or suggestions?
Thank you,
Giorgio
The homepage is fine but the images in the footer are missing in the whole website.
Seems, that problem is with float: left in <li> elements. Try fixing size of blocks or make elements inline;
The problem is compatibility of your css/javascript with upper versions of IE, This should help you out.
Above is just a work around better way would be to fix your css and javascript/jquery to take care of compatibility issues.
I built my second responsive site and I'm having an issue with scrolling on mobile. I've only checked a blackberry z10 so far but I've checked more than one of them. I've checked it on web inspect through the phones browser and I've also deleted each element and still no scrolling. Maybe someone can see what I'm obviously missing. Thanks in advance.
Remove float: left; on mobile screen for .movies. Then the height of the <body> tag will be calculated correctly.