I am using ✕ on my close button. In my chrome pc it displays the size that I wanted (font-size:20px) see the image below
However in my mobile I also use chrome but the size is smaller even they are the same page and I also check the view in desktop site but still the size is small see the image below
Js fiddle example https://jsfiddle.net/reginaldt/cag7870j/
codepen link: http://codepen.io/reginaldt/pen/yaJqyo
Any reason for this? Thanks.
UPDATE: I used samsung galaxy core prime on the mobile view to replicate the problem. But when I used samsung galaxy s6, it display the size properly.
Related
I'm experiencing a weird issue with the mobile responsive layout of a website.
The address is https://melec.vercel.app/
On desktop using dev tools > responsive, it works correctly, also on any android device you get the correct mobile experience but in iOS devices (tested on 2 iphones) the website renders incorrectly, it seems to have the double of the actual available screen width.
For reference I'm using tailwindcss, tailwindui and nextjs.
In this image you can see the scroll bar for horizontal movement.
Here you can see how I can freely move horizontally, this doesn't happen on dev tools or android devices.
Also when I press the mobile burger the whole layout shrinks a bit.
it is because the top part "flex-shrink-0 flex items-center".
I entered a "max-width: 100%;".
Sections of my site look a little different on Chrome Dev Tools simulating an iPhone 12 than an actual iPhone 12. Why is this? I've signed up for browserstack. Do you guys think they produce an accurate representation of a site on different devices? Do you recommend any others?
This is the site (iPhone 12) on Chrome Dev: https://snipboard.io/OpU8aj.jpg
Same site on my iPhone 12: https://snipboard.io/vl6b8f.jpg
Notice the type in relation to the red background?
I'm wondering too... This is the first time I've used %'s for my padding and margins. I usually use em, rem or px. Could using percentages have something to do with it? I do understand the the percentage is based on the parent element. But still... not sure if that has anything to do with it.
Thank you
I was having the same issue. I learned, and I'm sure most of you know this, any iPhone above an iPhone 8, that Apple's documented viewport size is not the actual pixel size (w x h) that displays a website or app. I discovered this after researching Apple dev docs. There is now a "safe area" leaving room for native device buttons on the top and bottom in portrait mode, or both sides in landscape mode. You subtract the area for these buttons from the manufactures documented viewport size to get the real displayed viewport or "safe area". Of course it will be different for every device.
I hope i'm not breaking any rules with the following. I used "what is my viewport" https://whatismyviewport.com/ Pull up this url in any device and it will show the actual width by height in px, of that device. This is the actual size your website or app will be displayed at.
I am now able to set new media queries using the above info instead of media queries based on the device manufacturer's documented viewport size. This solved the issues I was having.
I'm trying to build a responsive website for ipad and mobile as well.
This is the Link if you want to check it out.
Anyway, when I use the devTools in chrome for checking out the layouts on the Galaxy S5, then the landscape view is all good. When I check it on the actual device, then the height seems to be a bit less, and some parts of the website are actually cut out. Probably due to some parts of the device not being accounted for in the height.
Screenshot from the chrome dev tools, using the width and height of the S4 mini viewport when in landscape mode:
Screenshot from the actual device in landscape mode
So the questions are:
How do I actually use the devTools in Chrome to get a precise
representation?
Do I need to actually account for browser size in the #media (min-width: whatever px) query?
Is my question wrong from another perspective I haven't considered? Am I missing something?
The site in question.
I created a slider/header using Slider Revolution. I want the slider to display differently on mobile devices than on non-mobile devices (a video on non-mobile and a picture on mobile). This works perfectly until the user turns their phone sideways. This causes the slider to revert to the non-mobile version.
The simplest solution I could come up with was to make the mobile version of the slider display on tablets as well. However, I imagine this would result in the same issue if the tablet was turned sideways. Also, the client wants the desktop version to be displayed on tablets.
Please let me know if you have any solutions. Thank you!
Have you tried adjusting the cutoff points for the responsive transition? It may be that your phone in landscape mode is wider than the cutoff for tablets.
I don't know if this will work or if when the phone is in landscape it sends new resolution data to the server, but it seems worth a try.
I have a few questions about Bootstrap:
1) Implemented our application using bootstrap keeping in view the laptop and Desktop Display.
However now need to be viewed in all touch devices.
2) I've heard Bootstrap supports Responsive CSS supports in all devices(Touch and Non-Touch), however it is not supporting, sometime the layouts appears wierd and doesn't look good.
3) For ex: attaching a sample screen how it appears in normal view and Touch Device (Iphone 5), observed in Chrome Mobile & Tablet emulator.
Is there any good way, so that it looks feasible and compatible in both Touch and Non-Touch Devices.
Yes, if you use bootstrap classes correctly, there will be no broken view on any size screen. To test it, you can use FireFox CTRL + SHIFT + M (don't know combination on chrome, but there is that tool too)