Website look broken on mobile

[Joanna]

Hello,

I would like to kindly ask you for help. I have checked my website on mobile (Samsung S5, Chrome browser) and few pages are broken. Could you please assist how can I fix it?

Screenshots attached with corresponding numbers.

1. About page – text does not have line height, letters overlap. Link: http://www.varrojoanna.com/
2. Portfolio page don’t show at all. Link: http://www.varrojoanna.com/portfolio/
3. About page – layout is broken. Link: http://www.varrojoanna.com/about/

Is it possible to set up custom page design for mobile view? For example if it doesn’t work so that I can set it to text or different, easier layout?

Thank you,

Joanna

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

I do not have an actual device, I am using an emulator: http://responsivechecker.net/device/galaxy-s5

The only error I see is no.3 which would require some custom CSS using media queries.

– Can you clear your device cache, then re-test 1 & 2?

Thanks.

[Joanna]

Yes that is correct. I have managed to fix myself the issue 1 and 2 already by changing the layout.

Issue 3, could you please help how to do that? How can I create a simple text version to be displayed on mobile instead of the complex that I have?

Also, I have found one more problem on mobile and it is that the anchor link “Services” is not click able. Any idea why?

Thank you for your time,

Joanna

[David Martin – Support]

Hi,

Depending on the complexity we can help you.

Please test your menu link as:

#services

And not:

Strategic Brand Identity Designer

Thanks.

[Joanna]

Wow, super! Now the anchor tag works on mobile too! Thank you very much.

So the last problem I see on the mobile is the about page.
Any ideas how could I resolve the layout issues?

Thank you,

Joanna

[Joanna]

Sorry, now that I am testing more, I can see that #services link does not work on the menu when switching from other pages. For example when I am on portfolio page and want to click on services the link does not work anymore with this fix.

[David Martin – Support]

Yes, for inner pages you set another menu which will use the full URL.

You set this alt menu within your desired page, Meta Options => Page Meta => Page Menu.

Thanks.

[Joanna]

Super, now all the links are working for the mobile. I have then only left the layout issue on about page.

Thank you,

Joanna

[David Martin – Support]

There is not an easy way to get that page to display correctly on mobile. I suggest you create a simplified mockup of what you are looking for.

Thanks.

[Joanna]

OK, and is it possible to keep the current look for web and set another look (simple text version) for mobile?

Thank you,

Joanna

[David Martin – Support]

Yes, you would need to use media queries to do this. Let us know a simplified layout of your page and we can certainly help you.

Thanks.

[Joanna]

Hi there, thank you! I have created a kind of mobile version of the page so when someone clicks About page on mobile I would like him to see: http://www.varrojoanna.com/about-mobile

Thank you,

Joanna

[David Martin – Support]

Hi,

I have you setup the CSS for this and added two Row assets to the page. One for desktop, one for mobile.

Please go here and re-size the page down: http://www.varrojoanna.com/about/

You will need to amend and copy the mobile only content but this will show you how to do it.

Thanks.

[Joanna]

Hi,

I am not sure what do you mean. Can’t we just set it somehow to show this page: http://www.varrojoanna.com/about-mobile when someone clicks on mobile on About page? I can see now I should edit this page:http://www.varrojoanna.com/about/ to achieve the mobile view? Or I can just copy to the 2 row view what I designed on this page: http://www.varrojoanna.com/about-mobile.

I would like to keep somehow the comparison view.

Thanks,

Jo

[David Martin – Support]

Hi Jo,

If you want to redirect mobile visitors to another page, you will need to look for a plugin to do this.

You only need to edit the mobile row for the about page, it’s right at the bottom – add in your own content there. There would not be enough screensize to have a comparison view.

Thanks.