I'm building a website using the Showit site builder and am getting this very frustrating bug where iOS makes the letters have wider spacing between them, causing some text boxes to overlap. It's correct on all other browsers and devices, but not iOS.
Scroll to 2nd section on here for an example (You'll need to view it on iOS and another device to see the difference.)
It's happening with a range of fonts, but mostly Canela and Red Hat Display.
I have a fairly basic knowledge of HTML and CSS so am not sure even how to start fixing it - but I can add CSS code to the builder if someone can help by finding a solution?
Thanks so much!
Related
I am just a writer, no knowledge of web programming. If you look at my page here: https://nataliaputilova.blogspot.com/2019/09/blog-post_50.html it looks normal.
But if you look at the screenshot from my phone (attached), it does not. What is the issue, how can I fix it? The same problem shows up on both iPhone and Android.
I know in the past it worked, but then I did some changes per How to reduce left margin on blogger that I think messed up the mobile view. I tried to undo them, but I was poking around a lot and I don't know what I changed exactly
Screenshot from iPhone:
(there's not even scrollbar at the bottom to move left-right, just this fixed partial view)
I tried to google if it's possible to customize the mobile version, but the results said for these modern themes it should work automatically. But the mobile version is not good, what can I do?
I'm trying to style a non-responsive site. It looks great on desktop. On iPhones, the content and text breaks and overlaps. I do not have a viewport set, so I assumed it would just look like the desktop version but "zoomed out" or "tiny"... I don't understand why this is happening. Please be gentle. I'm feeling pretty burnt out today ;)
Here is an example of my issue: Desktop VS iPhone Example
*Edit: ceejayoz answered this, for some reason I can't find the "answered" button.
Mobile browsers adjust text size to make it a bit more readable.
Unfortunately, it looks like you're using absolute positioning in spots, so this very helpful feature is blowing up a bit.
Putting -webkit-text-size-adjust: 100% in your CSS for those elements (or for the whole page, if you prefer) will prevent this automatic adjustment.
I have encountered the strangest problem I have ever encountered in my web development career, and I just cannot seem to solve it.
I developed a website: www.ktngroup.co.uk a few months back, all worked perfectly upon launch across all devices. Now it would seem as though the site has developed some form of issue limited only to ipad. The strange thing is, I cannot replicate it when using css user agents and screen sizes, which is strange becuase it looks like a css problem.
I cannot describe the issue very well, but it looks as though all the content (Except the header) is pulled off the site on ipad/not displayed. Also, when using adobe edge inspect; I see that none of my css rules are being applied to the elements.
Comparing the desktop version at 1024px vs the ipad landscape is the best way to discover the issue.
UPDATE: When I cancel the iPad fully loading the site (roughly the first two panels) the site functions perfects on those two panels – almost as if its loading something further down that breaks the site?
If anyone has any guidance, I truly could not thank you enough.
For those who may encounter the issue – it's what Jack Pattishall suggested. The iPad didn't seem to respect vh as a unit, and as a result my images were huge.
To fix this I added a media query to handle the handheld tablets with a set pixel width/height.
Hopefully this can be of use to someone
Im practicing how to create a responsive website using bootstrap. Everything was fine when i tested my site on Firefox and Chrome using the Resizer extension but when i tried to view it on Safari theres a very small but obvious discrepancy with the bottom padding in one of the boxes(the purple one with the greater than sign). Ill attached the pictures to show what i mean.
Firefox view using Resizer Extension
http://i168.photobucket.com/albums/u173/carlocarr/ScreenShot2013-11-01at52435PM_zps8da019a9.png
Safari view using Developer tools
http://i168.photobucket.com/albums/u173/carlocarr/ScreenShot2013-11-01at52455PM_zps587313c1.png
Is there any Safari Mobile specific CSS?? what should i do? help!
i heard stories that w3cSchool isn't the best resource (due to inaccuracies) but i feel this may be of some use to you. it seems that the image is being cropped but take a look at this and see your own CSS3 code to identify the issues, you may also have to consider using relative positioning as opposed to absolute.
http://www.w3schools.com/cssref/css3_browsersupport.asp
also, take into consideration that while some browsers may seem to "now" support the features of CSS3, you need to also check for to version compatibilities. You can set up your site to use specific CSS3 features depending on the versions.
I've checked other questions on here but I haven't found anything that will help me.
Since FireFox 4 was released I've been having an issue with the menu on my website.
www.ffxivinfo.com
As you can see, the menu is supposed to fit along the little graphic buttons so that each link is on the "button". In Chrome, IE8 (not checked 9) and FireFox 3.5 this looked perfect. However since FireFox 4 it has been displaying wrong.
It looks like it's a padding issue but I can't figure out where it is coming from. I have even removed the padding between each link so that they are close together (0 padding) yet the menu still stretches further to the right in FireFox 4+ than in other browsers.
I use the auto generated menus available at purecssmenu.com and I modified it to fit my own website.
Here is a link to just the nav code, I use a PHP include to insert it.
http://www.ffxivinfo.com/nav.php
And here is a link to the CSS for it.
http://www.ffxivinfo.com/navstyle.css
Basically I need the navigation to look the same in all browsers so that it fits into the graphic "buttons". I'm tempted to just scrap the current design and go with a simple gradient background and leave the menu wider in FireFox 4+ than other browsers but that's a bit defeatist.
Any help would be much appreciated. This is the first time a coding problem has sent me to a forum asking for help but I just can't figure this one out.
I believe the problem is not in your margins but due to the differences in text rendering between the browsers. In this case, Firefox is rendering the text slightly wider.
If I might suggest an alternative, rather than using an image background and hoping for pixel-perfect rendering (which is pretty unlikely given the diversity of browsers and operating systems out there) try styling the links themselves with background-color and border-radius.
I don't see the problem in FF6. However, I see you specify your font size in pt. pt is for print, not the web. Try changing that to px and see if that fixes your situation.
I might ignore the Firefox 4 issue.
FF is now on version 6.
Your issue does not appear in FF3.5 (the most widely used FF) or FF6, both of which have more browser share than FF4.
http://gs.statcounter.com/#browser_version-ww-monthly-201008-201108-bar