I am making a responsive site www.sandbox.mercomcorp.com and I am getting a parse error on wordpress in my css on my media query for iphone 5. I have no idea why
#media only screen and (device-height:568px) and (device-width:320px) and (-webkit-min-device pixel-ratio:2) and (orientation :landscape)
I guess it should be -webkit-min-device-pixel-ratio:2. You've got a space between device and pixel.
Related
Versions:
React: 18.2.0
NextJS: 12.2.0
Simple image asset is just refusing to load when is used inside <img /> tag with src attribute set to data:image/svg+xml;utf-8,[svg data here]
When I paste this url data:image/svg+xml;utf-8,[svg data here] directly in the browser everything loads fine as expected the source image is there and all other things. The next.config has all the required image configuration and in the code for the image currently we use normal <img /> tag. The asset loads fine when its not called like svg, e.g. src="https://external-api/image.jpeg" In the network tab the response for the image is 200 all the time, but the preview shows only the svg styles with the default placeholder for missing image.
If I paste the image in THIS online encoder the image is NOT loading (behaves like in my problem), but if I copy the encoded url from the page and paste it in new chrome tab the image loads w/o any problem.
Examples:
Source image
Svg code that goes in to the src
data:image/svg+xml;utf-8,%3Csvg viewBox='0 0 1044 1054' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg opacity='.7' filter='url(%23a)'%3E%3Cpath d='M309.796 414.322 190.497 535.433 467.98 803.76l119.299-121.111-277.483-268.327Z' fill='%23000'/%3E%3C/g%3E%3Cmask id='b' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='116' y='91' width='837' height='837'%3E%3Crect width='440' height='1000' rx='220' transform='matrix(-.70604 .70817 .70746 .70675 335.664 0)' fill='%23000'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath fill='url(%23c)' d='M109 84h850v850H109z'/%3E%3C/g%3E%3Crect width='294.223' height='822.461' rx='147.112' transform='matrix(-.70575 .70846 .70718 .70704 228.716 325)' fill='url(%23d)'/%3E%3Cdefs%3E%3Cpattern id='c' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23d'/%3E%3C/pattern%3E%3Cfilter id='a' x='.497' y='224.322' width='776.782' height='769.437' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='95' result='effect1_foregroundBlur_3332_33632'/%3E%3C/filter%3E%3Cimage id='d' width='1' height='1' xlink:href='https://fakeimg.pl/250x300/fff000/'/%3E%3C/defs%3E%3C/svg%3E
And how is renderd in the app
What was tried:
If the image is encoded in base64 works, but with huge performace drawbacks mainly on older IOS devices.
Next config option for dangerouslyAllowSVG doesn't change anything...
My system opreater is ubuntu18.04,and when i use two screens,and log in my account,it not showing my desktop,instead of the errorenter image description here
But when i shut down the second screen,it will be working with no problem.
sorry for my English...
I do try to write the Media Query for Samsung SM-J810F Galaxy J8 1480 x 720 .
I write on Media Query;
#media only screen and (device-width: 30.8125em)
and (device-height: 15em)
and (-webkit-min-device-pixel-ratio: 2)
and ( min--moz-device-pixel-ratio: 2)
and (orientation: landscape) {
Here how to show on Firefox
Here how to show on Chrome;
How to see, on Chrome to show the nav different..., also to come an Element which I will not display it, it displays on Chrome but not on Firefox...
Can please anyone explains my mistake, because display this element on Chrome.
very Thanks for your answer!
Your media query looks problematic to me because it includes webkit AND mozilla vendor prefixes, so I'm not sure if it will give the results you are expecting.
I have two suggestions you could try.
(1) Rewrite you media query as
#media
only screen and (device-width: 30.8125em)
and (device-height: 15em)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape),
only screen and (device-width: 30.8125em)
and (device-height: 15em)
and ( min--moz-device-pixel-ratio: 2)
and (orientation: landscape) {
or
(2) Use the more future proof dppx syntax
source https://developer.mozilla.org/en-US/docs/Web/CSS/#media/-webkit-device-pixel-ratio
#media
only screen and (device-width: 30.8125em)
and (device-height: 15em)
and (min-resolution: 2dppx)
and (orientation: landscape) {
Good luck, I hope one of these suggestions works for you!
I am trying to set background image in ionic 3. I put my image under sssest-image folder and I am getting an error:
Error
GET http://localhost:8100/image/Static-Line-Jump-in-the-sky.jpg 404
(Not Found)
Code
body
{
background-image: url('../../assest/image/Static-Line-Jump-in-the-sky.jpg');
}
sorry i got the solution
just give id to your tag ion-content anf then always set a parth through assest/image folder like this
#welcome
{
background-image: url('../assets/image/Static-Line-Jump-in-the-sky.jpg');
}
6I am trying to target android device and iphone 6 with media queries.
My android device is ZTE Blade Vec 4G. I think it has same resolution with galaxy s3. (1280x720)
However my android device use iPhone 6 media queries even I specified them separately
#media only screen and (min-device-width : 360px) and (min-device-width : 640px) and
(-webkit-device-pixel-ratio : 2) {
}
#media only screen and (min-device-width : 375px) and (max-device-width : 667px) and
(orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
}