Responsive Design
Author: Dimitris Retzikas
Visited 3073,
Followers 1,
Shared 0
Hello, I'm using Evo14 and I have the following problem with responsive desing:
I have defined the breakpoints at 960, 720 and 480 px.
Nevertheless on mobile devices that have screen resolutions similar to desktops' (most of new devices have), they load the above 960px version which was intended for desktop - a lot of scrolling.
Also, Google's tester for mobile friendly fails with the following message:
"Page is not mobile friendly This page can be difficult to use on a mobile deviceFix the following 3 issues Text too small to read Clickable elements too close together Viewport not set to "device-width"
Any idea or workaround will be appreciated.
Posted on the
Dimitris
Are you sure you haven't selected desktop site in error before uploading to the web?
If you have select Responsive Site you should also see a multi-coloured bar across the top of the preview browser, is that there?
Hi Dimitri,
This happened to me for a project.
For me, it was a problem with my redirection on my hosting which was through iframe.
Everything went OK when I did my redirection from a DNS.
It is your case?
Moreover, it's necessary to precise that it's always the breakpoint in 480 which is taken into account for a smartphone.
Regards,
Danielle
Hi Dimitris,
please post the link to your website, so I can help you further.
Kind regards
Author
Thanks for the ideas.
I have checked Responsive Design in Template.
I have not any iframe redirect.
The link is: www.gmc.gr
Thanks!
Hi Dimitris,
with the Evolution version you can only add 3 Breakpoints. I suggest your to give WebSite X5 Professional a try, which enables you to add up to 10 Breakpoint, thus allowing you to be more precise with the screensize. With the new demo you can export online, so you can test your project exhaustively.
https://www.websitex5.com/en/demo-professional.html
Thanks! Kind regards.
Author
I come back because I noticed the following:
In every page I have:
<meta name="viewport" content="width=device-width, initial-scale=1" />
and after:
<meta name="viewport" content="width=989, initial-scale=1">
Can it be the cause of my problem?
Hi Dimitris,
not really, as I mentioned before your issue is more due to the settings for the breakpoints. For example, if you set a maximum resolution for the higher breakpoint and your website is displayed on a screen whose resolution is bigger than the one you set, the lateral blank bars will be visible. As I was telling you, with the Professional version you can set the breakpoints more precisely.
Thanks! Kind regards.
Author
Dear Elisa B. Thanks for your comments.
I made one test: I set the breakpoints at
960, 800, 768 px. I uploaded it to an draft area and loaded it through a mobile with screen resolution of 720 pixels by 1280 pixels.
I opened it in portait mode and I expected the <768 version.
Instead it showed the >960 version.
Your can check here: http://www.gmc.gr/web/WebKamp2/index.html
Please help as this seems quite strange for me.
Author
... I after deleted "<meta name="viewport" content="width=989, initial-scale=1">" from HTML code in "index.html" and everything works like a charm!
I also run Google test and know it recognizes it as mobile friendly!
The problem is that I have to do it in every page. And again when I have to make any amendment and upload again.
Why this is automatically inserted into the code and how can I remove it?
Hello Dimitris,
unfortunately not, you should do this for every page, I am sorry about this.
Please let me know if I can help you further. Kind regards.
Author
Finally I figured it out!
I put the follwong html code (in the begining of the body):
<meta name="viewport" content="width=device-width, initial-scale=1" />
It is positioned right after :
<meta name="viewport" content="width=989, initial-scale=1">
Now everything works just fine.
For anybody else facing this problem...