WebSite X5Help Center

 
Dimitris Retzikas
Dimitris Retzikas
User

Responsive Design  en

Author: Dimitris Retzikas
Visited 2809, 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
11 ANSWERS - 1 CORRECT
Esahc ..
Esahc ..
Moderator

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?

Read more
Posted on the from Esahc ..
FABRE Danielle
FABRE Danielle
User

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

Read more
Posted on the from FABRE Danielle
Incomedia
Elisa B.
Incomedia

Hi Dimitris, 

please post the link to your website, so I can help you further. 

Kind regards

Read more
Posted on the from Elisa B.
Dimitris Retzikas
Dimitris Retzikas
User
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!

Read more
Posted on the from Dimitris Retzikas
Incomedia
Elisa B.
Incomedia

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.

Read more
Posted on the from Elisa B.
Dimitris Retzikas
Dimitris Retzikas
User
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?

Read more
Posted on the from Dimitris Retzikas
Incomedia
Elisa B.
Incomedia

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.

Read more
Posted on the from Elisa B.
Dimitris Retzikas
Dimitris Retzikas
User
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.

Read more
Posted on the from Dimitris Retzikas
Dimitris Retzikas
Dimitris Retzikas
User
Author

... I after deleted "<meta name="viewportcontent="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?

Read more
Posted on the from Dimitris Retzikas
Incomedia
Elisa B.
Incomedia

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.

Read more
Posted on the from Elisa B.
Dimitris Retzikas
Dimitris Retzikas
User
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="viewportcontent="width=989, initial-scale=1">

Now everything works just fine.

For anybody else facing this problem...

Read more
Posted on the from Dimitris Retzikas