I'm using wordpress and I have my own built table on some page.
This table is showing some info for mobile users and more info for desktop users (because of space).
I'm using css rule
media only screen and (max-device-width:
to show the correct info for mobile users (i'm using display: none to hide some parts).
Everything works great but, when I click on my mobile browser to view as desktop, it does show as desktop the whole website expect my table which remains the same as mobile (with hidden parts).
What can i do to recognize this situation?
Thanks
Related
I use media queries in my code and the website displays as it should on the mobile.
But when I go on ''desktop site'' in Chrome the website displays as it should display for devices with max width of 1000px, not as it should for a desktop. Why is that?
I would like that the user actually sees the full desktop site when clickig on ''desktop site'' mode.
Have anyone tried forcing desktop view to display on mobile devices (when one clicks the view desktop version on their browsers)?
I was thinking if it is possible to maintain normal mobile view for mobile and then force desktop view when the view desktop version is selected on mobile devices...
The 'View Desktop Version' button present in google chrome browsers works this way:
It changes the User-Agent header in the request to match those
sent by the desktop browsers.
It ignores the original viewport meta tag and applies the default
"min-width: 980px;" media query to the css thus putting the responsive
pages into their desktop layout.
So if your website is responsive then there is no need to do any extra work. It will automatically switch to the desktop layout when forced through 'View Desktop Version'.
//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.
I have testing site with eshop (I don't have permission to backend, just need to use or .
The website is there -> Click the link
You can see the blue banner in the middle between the products. I am using to show the banner on mobile too (by default they are invisible under 767px).
It works (if you use developer tools in Chrome or Mozilla), banners are showing, but if I load the site on mobile, banners are not visible and I don't know why.
Any ideas?
The default code is this:
#media (min-width: 767px){.banners-top,.banners-content,.banners-footer{display:block}
{.banners-top,.banners-content,.banners-footer{display: none}
I am using this code to show the banners on small screens:
#media (min-width: 200px){.banners-top,.banners-content,.banners-footer{display:block}
I already done it. If I inspect the site it says for the banner {display: block}.
On desktop, if I set up 400px, the banner shows up, but if I turn the mobile, it doesnt shop up.
See -> Desktop
Mobile
So I have a responsive site I'm working on, which displays fine when I'm viewing it on my computer. As I resize the browser in Chrome, IE, Safari..etc, the site responds to the media queries I've declared in the css document. However, when I'm viewing the site on an iPhone, iPad or any other mobile device, the media queries aren't being detected and it's showing the scaled down version of the desktop breakpoint. Additionally, i have a Chrome extension that detects media queries in sites, and it says there's no media queries detected on my site.
I do have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the head tag and my media query in my css looks like this.
#media screen and (max-width : 620px) {
ul.mainmenu {display:none;}
footer {height:140px;}
}
Mobile devices only seem to respond to "max-device-witdth" but not "max-width" And while that's fine for me to just duplicate the media queries with "max-device-width", the rest of the elements that aren't specified in the media query still displays as a scaled down desktop view. Any ideas?
Not really an answer to my question,but I figured out what was going on. The site is hosted on GoDaddy with a virtual domain name. so I'd been accessing it at vanityname.domain.com. When I hit that site on my phone, or on desktop, for some reason the HTML5 document is loading as a HTML 4 document. However, if I go to www.domain.com/vanityname, the site shows as a HTML5 document. Not sure at all the reasoning behind that, but would have saved me hours of frustration...