Intermittent iOS 14 Safari text mangling - html

does anyone have a clue why I am having issues with iOS sometimes mangling some text on my web page. It seems to happens sometimes then rectifies itself and occurs for some iPhone users but not others.
Here is a screen shot of the mangled text:
Here is a screen shot of the normal text:
Here is some CSS on the containing HTML div that may shed some light on this?
.v-application .font-weight-light {
font-weight: 300!important;
}
* {
padding: 0;
margin: 0;
}
*, :after, :before {
background-repeat: no-repeat;
box-sizing: inherit;
}
user agent stylesheet
div {
display: block;
}
#media only screen and (min-width: 320px)
.slide-content.is-even, .slide-content.is-odd {
text-align: center;
}
.color-1 {
color: #fff;
}
<style>
.work[data-v-e3c177cc] {
font-size: clamp(18px,1.6vw,1.6em);
}
#media only screen and (max-width: 600px)
.contact, .work {
line-height: 1.3!important;
}
Any help appreciated?
Thanks

I am hoping I have solved this?
I was rendering some plain text via a JSON string in a Vue.js template using standard {{ [content] }} syntax.
I have now switched to using vhtml="[content]" instead. It seems to work for me but needs further testing on iOS devices.
Maybe it was a shadow DOM / JSON parsing / rendering delay issue?

Related

Why are my media queries not being recognized by my editor(VS Studio)?

I am new to web developing and I began making a webpage, however, I designed it for a desktop before mobile. Now I am trying to use media queries but my editor (VS studio) is not picking up on the media queries. When I write "# media screen and (max)"screenshot of code it does not give me the option to put in "max-width." I checked all my code and it is correct until there so I do not know why it is not working. I have attached screenshots and a codepen link. Any help is appreciated.
https://codepen.io/jayson-caguana/pen/BajWxZQ
/* FOOTER */
footer {
background: burlywood;
padding: 20px 20px;
font-size: 12px;
color: gray;
text-align: center;
}
#media screen and (max-width: 300px) {
.features {
background-color: blue;
}
}

Responsiveness doesn't work on "device mode" google chrome dev tools

I'm creating a website that is responsive when I resize the window. None of the responsiveness works when I toggle device mode even though I'm going below the breakpoints. I don't understand why it works in the normal browser when I trigger the break points but not in device mode. What am I doing wrong?
// style.css
html {
font-size: 62.5%;
}
#media (max-width: 75em) {
html {
font-size: 56.25%;
}
}
#media (max-width: 56.25em) {
html {
font-size: 50%;
}
}
#media (min-width: 112.5em) {
html {
font-size: 75%;
}
}
Thanks.
The mistake you made was by not adding only screen and. Try doing:
#media only screen and (max-width: ...) {}

How can i improve readability of my website on mobile?

The homepage/index.html seems fair enough to launch as-is for the time being. But when I look at it from chrome on mobile, all the lettering is too small - particularly in the navbar - and my parallax effect doesn't work on mobile either.
I tried making changes to the scale within the viewport, but I honestly just don't know what I'm doing. I would be so grateful if someone could possibly take a look at the website on mobile (and desktop too, if you'd like) and maybe make some suggestions on a quick cheap fix for making it more readable while maintaining its look of 'prettiness'. And if you know how to keep the parallax intact on mobile that would be amazing too!
Here are the links to the website, and to the code on github:
https://ido-weddingsandevents.herokuapp.com/index.html
https://github.com/if-true/i_do_weddings_and_events/blob/master/index.html
To make your navigation larger and your image titles on mobile you can try this CSS:
#media (max-width: 860px){
.navigation li a {
font-size: 80px;
}
.parallaxImage h2 {
font-size: 56px;
line-height: 94px;
}}
In Bootstrap you have to insert <div class="row">...</div> inside the class="container" . Better use a percentage in .navigation { width: 100%; max-width: 500px; } for mobile compatibility. Font-Awesome, PT Serif, and Delius Swash Caps are not used. Loading them is not good for performance.
If you are using #media, setup like this, for example
.navigation li a { font-size: 24px; }
#media (min-width: 768px) {
.navigation li a { font-size: 36px; }
}
#media (min-width: 992px) {
.navigation li a { font-size: 60px; }
}
#media (min-width: 1200px) {
.navigation li a { font-size: 72px; }
}
Important to use
<meta name="viewport" content="width=device-width, initial-scale=1">

Media queries in my css do not work

I have issues with my media queries. It seems like they do not work in either browser. I tried in Opera, Chrome, Firefox. This is the page http://amatalents.com/about-us.html and those are media-queries for main div section
#media screen and (min-width: 150) and (max-width: 400) {
.windows div {
width: 100%;
display: table-column;
}
.windows div a {
font-size: 10px;
color: green;
}
.windows {
background-color: red;
}
}
I also validated the css file and first time it did fine and only mentioned the css parser error reffering to media queries part of the file, but the second time it referred to media queries only without mentioning parser error.
I am lost...
Please help!
You are missing px.
#media screen and (min-width: 150px) and (max-width: 400px)

Media query isn't working for email

I'm trying to code a responsive design email-- I've combed through here and couldn't find anything that exactly helped. I'm really not seeing any part of my #media query coming through-- the images are staying at the size I coded in the #media query, and not resizing back in browser. The mobile style for the fonts I've coded also aren't sticking. Here's some of the code:
<style type"text/css">
body {background-color: #e5e5e5}
p {
font-size: 13px;
font-family: verdana;
line-height: 21px;
color:#4B5460;
}
a {
font-family: verdana;
font-weight: bold;
text-decoration: underline;
color: #4B5460;
}
.footer_link {
font-weight: normal;
text-decoration: none;
color:#0c5bba;
font-size: 11px;
}
#media screen and (max-width:480px) {
.graf_font {
font-size: 16px;}
}
.reg_button {
max-width:200px;
}
.mobile_hide {
display: none;
}
.chiclets {
max-width: 100px;
}
.snapshot {
max-width:75px;
}
}
</style>
Let me know if you need more code-- I'm a beginner with this, so I know I'm missing something glaring!
Thanks!
It looks like you have an extra closing bracket.
.graf_font {
font-size: 16px;} /* <-- remove this bracket */
}
Also check to make sure the email client your in even supports media queries.
https://litmus.com/help/email-clients/media-query-support/
Max-Width is not fully supported for email. I have found using percentages to be a useful alternative (e.g. width=80%). If you can make images take up a certain percentage of the screen or table cell on mobile images instead of being a particular pixel width it may be more successful. If you still aren't having success, try adding !important after your CSS.
Also, you'll want to style your text inline, as a lot of that will get stripped by different email clients.
I would also suggest that you check out https://litmus.com/community. It is a newly free source with a lot of up-to-date info on email design and people who know a lot more about email design than me.