//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.
Related
I'm a novice at HTML and CSS and I launched a simple responsive website with only one page, but then I managed to add a couple of pages more to it after a few days. Everything looks good on desktop and when I make it smaller to 350px width via developer tools, it actually looks good as it should and all responsive.
Link: https://transporte.capital/
However, when I enter it from my mobile phone it looks horrible as CSS becomes almost inexistent. The logo becomes a link with underlines, the tweet widget is still there (I disabled it via display: none; in media queries because it takes too long to load), the social media section is distorted, all images are huge, and so on.
Is there something wrong with my mobile phone? I tried to look for cache in Site Settings - Data Stored in Chrome, but there was nothing for my website there.
Now I tried the Opera browser and the website looks good as it should. What should I do to make it update on Chrome? And will it update as it should the next time I make changes to it? Thank you!
screenshot 1
screenshot 2
I could see the page properly in my Android mobile Chrome browser. Please clear cookies once and ensure the zoom in is not enabled. Attached is my screenshot. Screen size: 393x719px
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
I have been trying to make a responsive website for mobile devices . I have found two ways to test responsive design:
By resizing the window
Using Google Chrome developer's tools
In both of them I get a different view. Which one gives me the right view, as I use font-size and padding in 'em'.
Resizing browser window is not Responsive. While developing Responsive applications the easiest, but yet not perfect, way is using Chrome's Developer tools. Even that may give you different results, because mobile device screens are using not just width/height but also dpi. So 320 iphone6s screen is not going to be perfect match for 320px resized browser or equivalent android device.
Go for chrome developer tools. It's a great way of checking responsiveness. It comes with dimensions of popular mobile and tablet devices. So you can check for a variety of device at once.
Simply resizing the browser is not a right way of checking responsiveness.
Recently I built a page that works fine with both the ways you mentioned. You can check it here.
Let me know if you need any help.
I would say Chrome Dev Tools is the best bet for a local snapshot.
However, if you have access to one or more mobile devices you may want to launch the site on Heroku or another production environment and view it from the actual device.
An iPhone 6 for example, I find Chrome does not take into account the address bar or bottom nav in safari so things can be slightly off from the Chrome Dev view of iPhone 6.
I'm working on a one-page-project that uses fullpage.js to create scrollable, viewport-filling secions. It's pretty straight-forward, on each slide there is one picture and some text. On devices with bigger viewports, I want the picture to float to the left and the text to appear at it's right side. For smaller viewports, I've added a media query that makes the picture fill the viewport width (width:96vw) and removed the float property (float:none; clear:both;). When I test this in any browser on my PC by reducing the size of the browser window, it works just fine, if the window's width reaches 800px (the condition in the media query is (max-width:800px)), the text jumps below the picture and the picture enlarges to the width of the browser window. The jsfiddle I created works as intended as well:
http://jsfiddle.net/GinSan/ehco10dh/
However, I've uploaded the project to my website and opened it on my android phone, and neither the Firefox nor the Chrome app seem to recognize the media query. It applies the float instead, which looks terrible in portrait orientation ... I've tried adding some more style-rules in the media query, none of which seem to be recognized by the mobile browsers.
I've stared at my media query for like half an hour, but I can't find any mistake. Can you? Or could this be related to the fullpage.js library? Or what else might be the problem? According to caniuse.com, media queries are supported by both android apps.
I would post a link for you to check out the problem yourself, but I'm not sure if I'm allowed to. Am I?
Is there any way to make a preview of our template in other monitors like 14 or 15 inch monitors ?
Is there any simulator program ? I want to check that there is no horizontal scroll on screen when my web site opens .
This is a pretty quick way to test a bunch of different device viewports
http://www.benjaminkeen.com/misc/bricss/
Best of all - You can define your own viewport sizes.
I want to check that there is no horizontal scroll on screen when my web site opens .
There are several browser plugins that will simulate a resolution change by resizing the browser window. Window Resizer is one for Firefox.
Other than that, you can change your monitor's resolution to test what a site looks like on other screens. (What counts is the screen resolution, not monitor size.)
ResizeMyBrowser is my go-to for this - I just keep it open in one tab and whatever I'm working on in another, and it's easy to see all the options 'live'.
Another solution for testing your site on different resolutions is Sizer
No problems with resizing all modern browsers (32 and 64bit Windows), even their 64bit versions.
Firefox now has a native developer feature that supports resizing the viewport: Open the Firefox command line with Shift + F2, then type "resize on". Now you have a frame within the former viewport that can be shifted to the extents of your desire. You can also call a certain viewport size by entering "resize to ".