I have a problem with a Website that I am building:
The design works perfectly on any device, especially on tablets and smartphones. It also works perfectly in Chrome Developer Tools -devices simulator.
However, when I reduce the size of the screen in a desktop to a similar size of a tablet or smartphone the design looks broken. The text is not respecting the z-index and it is visible over the active menu.
What could be the problem? Does anybody have the same problem?
use class of bootstrap for multiple layout
If u use mobile use class of class="col-sm-12" etc.
If you reload the page after you resize it on a desktop screen, is the design still broken?
Related
Screen Size unchanged on Mobile
Briefly explaining this, I have a Chat App that works well on a desktop view but when we go into mobile it seems that the device simply mimics the size of the desktop screen (ie: on my Oneplus 6 the <html> tag is around 4000x2000px). I'm quite new to HTML mobile scaling so forgive me if the wording for this isn't to par with what's expected.
Continuing, on my desktop if I manually change Chrome's window size my webpage scales perfectly while on my mobile device it's huge as said in the previous line. Would using the #media tag in css help specifically for this? If so, how?
One last thing, if I zoom in manually on my mobile it obviously looks perfect as it's meant to fit the new tall aspect ratios. Which is ultimately what I wish to do, just need to keep the website scaled perfectly like on the second picture (picture B).Image B
//Initial situation - What I have and what I want
I am using WordPress version 5.1.1 with the Elementor Page Builder Plugin version 2.5.8 and I want to make a responsive website looking good on both desktop and mobile, tablet as well.
So I have a section with two columns within the row where below is the same system for 2 more times on desktop view. When it comes to mobile, I want a different adjustment.
so the trick I use is, I duplicate the widget and align the elements within the second section and set the first one to hide on mobile and the second to hide on desktop and tablet. So far so good, it seems all working.
//The problem - What doesn't work and needs to be fixed
As I told above, the system I use seems to be working, on mobile it only shows the second section, on desktop only the first. Tested on 100% size in the windows display settings and zoom in the browser and separate browsers.
BUT When it comes to 125% in the windows display settings and I split the page via the windows function to half of the screen, it shows both sections which either doesn't look good and really isn't what I want and need. It only happens with Google Chrome browser, all others "decide" which device it's using at the moment, only chrome shows on 125% AND half screen at the same time both sections.
What can I do / How can I fix this issue?
Edge eg. sets on the half screen to tablet while Chrome is still in Desktop.
MAybe it has something to do with Madia breakpoints? Can I change them in WP-Settings?
Thanks in advance and best regards!
Edit: Pictures to show what it kinda looks like:
This is the standard desktop view of this section
This is the standard tablet view of the second section
This is how it looks in Google Chrome 125% Windows 100% Browser Zoom Half Screen
Don't have any manual media queries, they're all standard. Works with all on 100% Windows resolution, only on 125% Google Chrome it's weird.
Here is the result when i reducing browther width to 740px. No scrollbar;
Same width but in chrome device toolbar
Now scrollbar appears.
This happened because i'm using negative right margins in some blocks, but i also using
body { overflow-x: hidden }
to prevent scroll. It works perfect until i turn on chrome device toolbar. What is the reason of this behavior? Should i don't use negative margins?
I was having a similar issue, and found an answer that may help you here.
For me the issue was the Media queries I was using looked like this:
#media only screen and (max-device-width: 600px) {...}
The -device- part of the selector, ensures your CSS is only being applied to mobile devices. Consequentially, the chrome device toolbar is used specifically to test CSS on mobile devices, which is probably why you are seeing the css applied properly there, but not when you resize your browser window on its own.
Try removing -device- from your media queries to instead look like this:
#media only screen and (max-width: 600px) {...}
Which should apply your CSS changes on both mobile devices and desktop.
Also make sure you have the following code in your HTML header, to ensure the viewport is configured properly:
<meta content="initial-scale=1.0, width=device-width" name="viewport">
Hope this helps!
chrome tool is for mobile device testing. it actually display mostly same in mobile device. without chrome tool it will display for desktop browser compatibility.chrome tool
so chrome tool actually gives the view mostly same as mobile device.
for mobile view testing it's better to use chrome tool for responsive mode.
chrome tool uses User Agent.
The User Agent Type, or Device Type, setting let's you change the type of the device. Possible values are:
Mobile
Desktop
Desktop with touch
I'm currently trying to use CSS media queries to optimise my website for mobile view, and am using Google Chrome with an extension to resize the viewport on my desktop to adjust my content for mobile.
The problem I'm having is when i'm designing and changing on my laptop at the mobile phone resolution, everything works fine (see first picture) but when I actually load the website on my mobile, I'm not getting the same view as what I'm getting from the laptop (see second picture).
I've used
<meta name="viewport" content="width=device-width, initial-scale=1">
to set my width for mobile
I know the font is different because it's a third party i've installed onto my laptop so thats not the problem.
Just wondering if theres any easier way of actually creating responsive views for mobile such as using applications like Phonegap or if anyone can give me tips on how to properly create responsive content for mobile.
Thanks in advance
EDIT:
The second picture is larger because it was as a screenshot from my mobile phone, the screen sizes aren't different.
I suggest watching the New Boston's Responsive Web Design Playlist:
He will teach you the important basic concept of a responsive design using percentage and also creating your own custom menu or button in a responsive mobile version(that makes it almost like a mobile app in a browser).
https://www.youtube.com/watch?v=yWgl3xXVlHI&list=PL6gx4Cwl9DGBaTsb1nse1UU48d_q7glGT
You should consider using bootstrap. It is a mobile first front-end framework for faster and easier web development
http://getbootstrap.com
#John Appleseed
use the Inspector
"Toggle device mode" or "Ctrl + Shift + M"
time you try your web site
and not just resize the page
I don't know your CSS but have a look at this
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I'm having an issue with background-size: cover on mobile devices (tested on mobile safari and android).
There are times in which the height of my webpage changes when the user expands a more info box. Whenever that happens on mobile the background image actually zooms in. On desktop it does not.
I worked around this issue by adding a "scrollable" layer in the CSS, but this introduced more issues.
Any suggestions on how to fix this, or is the "scrollable" layer my only option?
I believe that the mobile browsers are simply adjusting the background to be what it would look like if the site initially loaded at the "expanded" size, however, on desktop it does not do this.
Using responsive design might help you to get rid of these issues, the method is design for developer who creating a website for both desktop and mobile device.
I will give out an example:
In your CSS you have:
#media screen and (max-width: 700px) {
.hide {
display:none;
}}
In your PHP/HTML you have
<p class="hide"> tester 1234 </p>
These will let your display your text when the screen size is bigger than 700px, disappear if smaller than 700px.
I think you should be able to do some modify for you codes by now, hope this help.
Reference : http://www.w3schools.com/cssref/css3_pr_mediaquery.asp