Having a really weird issue with this section on the contact and home page...
http://tecnoempaque.com.do/contacto/
Only on phones the phone number text doesn't show up. It does in dev tools when i select different devices. I have an iphone (safari)
I just asked my friend to go to the site on her phone that has chrome. Seems to work. Maybe it's CSS comparability with safari? But the classes should be identical.. It's a popular theme so would've guessed this wouldn't be an issue.
Safari can be a little wonky if you add
.fusion-content-boxes .content-container{-webkit-appearance: none;}
It should resolve any issue with Safari i did notice you had some data-animation attributes in the parent tags. I've had issues with Animations loading correctly in Safari when its a pre-built theme.
Related
I have CSS that isn't working on any browsers on my smartphone (Galaxy S7 with Oreo). This is an example line of the code;
div[data-quickedit-field-id="node/859/body/en/full"] th{background-color: #81CFD6;}
Here's some background; this site has other code that works on my phone, this code works on desktop, I've checked the W3C Schools website and the Mozilla Developer website (as well as a few others) and I haven't been able to find any information on this, so I'm wondering if there's any reason the data attributes wouldn't work on smartphones.
Only use quickedit for users that have access to in-place editing else when a testbot checks as an anonymous user it generates an error. Try to avoid the code unless it is necessary.
Attribute selectors should work in all the modern mobile browsers. Checked that with your attribute and value and it is working good in my mobile (I've checked in Motorolla One Power and Redmi Note 7 Pro using chrome browser).
Here is the link to check in mobile: http://naasu.me/su-fixes/css/are-css-data-attributes-available-on-mobile-browsers/
If this is still not working for you, try using contains selector by adding * with the attribute([attribute*=value]).
Days of Internet research and worsening frustration lead me here. I cannot figure this out. Perhaps a wiser person can help.
Using web developer tools, every site page displays fine in every tested browser. However, when I check on an actual iPad and iPhone, no page displays correctly. What's wrong is that none of the CSS in style.css is executing on the iPad / iPhone.
I am using bootstrap, which it sees, but it does not see my style sheet (css/style.css). I have tested too many things to list, including absolute versus relative URLs, and rearranging the link tags in the header.
I tested inline and head-embedded styles and both work. But this is unacceptable to me.
I removed all code from the footer, leaving one div with a class from the external stylesheet, and that did not work. The iPad is blind to it.
I cannot debug the iPad from the iPad (I know Safari has instructions for this), but I have other bootstrap sites I coded that work fine and comparing them I cannot see what I am doing differently now.
I re-booted my iPad many times in case it was a cache issue.
I left out code in this question because I do not know what code to show. I can provide code or URLs or anything else if that helps. The pages are published.
I appreciate any assistance. Thank you.
In the new version of Safari there is a new "Responsive Design Mode". You can switch between Safari, Internet Explorer (7,8,9,10) and Firefox. Is it actually running Windows Internet Explorer 7 if I click it?
On a page with icons it changed the positioning of the icon when I changed to IE 7.
It would be pretty helpful if they would actually emulate IE...
Edit:
The same website, on the left with safari selected and on the right site with IE 7.
Image: http://imgur.com/ZLTlzDQ
Image 2: http://imgur.com/XJIHaL1
In this WWDC 2015 video, it is stated that setting the user agent in the responsive design mode sets the UA string only; nothing more. No emulation or whatsoever. Besides, making IE work on OS X would require both tremendous effort and collaboration of Microsoft and Apple. I don't think it will ever happen, especially not for an extension for a non-profit software.
I know this answer doesn't explain your screenshots but I can not comment more on that without seeing the code, yet my 2 cents would be on the css prefixes. Safari might be ignoring / applying them according to the user-agent and that would explain the difference. IE conditional tags would be another possibility that comes to mind.
I'm using the glyphicons pro library for my website and I noticed that on my MBP Retina, they show up as hi-res on Chrome, but not FF (even though FF says it's up-to-date). Here are a couple of screenshots (first one is FF):
Any idea what's going on?
You might be using a Web accelerator addon in Firefox that could cause this pixelation. Try disabling that plugin and see if it works.
If thats not the case then your Firefox may be running in 256 color mode, for details see Website colors are wrong.
Another possibility - check the properties of the shortcut you use to load Firefox (right-click, then Properties). Under the Compatibility tab, make sure nothing is selected.
or Maybe your screen res changes in FireFox, see this
Can you guys point out what I am doing wrong on with the navigation on this site? It works fine on webkit, but not firefox!
http://datatables.dyndns-web.com/
vs intended
The NAV-tag isn't a block-element by default in current versions of Presto, Trident and Gecko. Only WebKit has a default stylesheet for HTML5-elements included already. You should use a basic-/reset-CSS to format all HTML5-elements.
See: http://html5doctor.com/html-5-reset-stylesheet/
BTW, if someones asking for an image, you should upload an image of the desired result, not one of the broken view…