right settings for mobile phone

Can you have a look at our site? The settings for a good responsive design are wrong for mobile phone, but i didn't change anything here. The blue screen is everywhere now and the articles are half visible...
See the atteched examples
Do you know what is wrong? The settings for I pad are ok

foto 4.PNG

http://www.eiken-grafmonument.nl

i can give you the admin username en password

Thank you in advance

I don't see this problem on your site anymore. Is it still there?

Hi!

The problem is still there. The grey/ blue part pushes the whole site to the left on mobile phones and only the half part of the text and images are visible. Maybe it's because of the size of the images and guidelines i placed, but the image and guideline size is not more than 580 pixels.

Maybe the problem is that I centered the text?

I hope you can help us. I can give the admin username and password if you want?

Thanks!

The first problem is with ornament images. Could you please add a css class to each of them named rwd?
Now Please edit: /templates/gk_creative/css/override.css and add at its end:

Code: Select all

img.rwd {max-width: 100%;}


Remember to enable "CSS override" in template settings - advanced section.

After that change some problems should disappear.

Ps. This is clearly Creativity template thing, not Creative... Moving to correct forum.

Hi Cyberek,

Thanks for your answer. I hope I understand you right

I changed the template settings override: on
I changed the override.css like this:

/*
#------------------------------------------------------------------------
# Creativity - May Joomla! template (for Joomla 2.5)
#
# Copyright (C) 2007-2013 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: http://www.gavick.com
# Support: [email protected]
*/

/* img.rwd {max-width: 100%;} */

Is this right?
And now the last thing.. (I don't understand, sorry). Do I have to change the name of my images?
You told me to add a css class to each of them named rwd. Where van I do this? In the name of my images? Can you give an example?

Thank you in advance!

Best regards.

Daphne

Code: Select all

/*
#------------------------------------------------------------------------
# Creativity - May Joomla! template (for Joomla 2.5)
#
# Copyright (C) 2007-2013 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: http://www.gavick.com
# Support: [email protected]
*/

img.rwd {max-width: 100%;}


The best way to add class is to edit an article/module with tinyMCE off (editor set to none).
You will see source code of module/article and see something like this:

Code: Select all

<img src="blahblahblah" alt="some alt tag" />


you need to add a class to each of the images so the code of image looks this way:

Code: Select all

<img class="rwd" src="blahblahblah" alt="some alt tag" />


I bet there is some simple way just to click the image, edit it and att the class, but the source code is the most obvious and readable way.

Hi Cyberek,

Thanks for your answer! The mobile phone works fine now, the images resize, Thanks!
I hope you can give me the code for resizing a table too?
Now in html I have this:

<div class="gkTeam col4 animate_queue" style="text-align: center;">
<table style="width: 550px;" align="center">
<tbody>
<tr>

Is it possible that this table resize to a responsive design for mobile phone? So that the whole table is on one telephone screen?
(see attachment)

And is it possible that a bigger text field resizes too? So that the whole text part is readable on one telephone screen, without scrolling? (see attachment 2)
Or is this only possible with a text part, visible like image?

Thank you in advance again!

Best regards

Daphne

With tables the design idea was to make them more readable on small screen - just with allowing of scrolling. Please post an url to a subpage where you have a table - I'll check what can be done.

I have deleted your post. This is a public forum. Posting all credentials is an invitation to being hacked.
Please change all your credentials first and them please send me a PM with:
1. URL to your website
2. login and password of user with login privileges (please create one for me)
3. link to this thread

Hi Cyberek,

I sent you a pm, thanks for your help in advance!

Actually its your content which has 550px width set inline - making it wider than the screen. You might want to try using css media-queries to create different table widths for different screen sizes. Still - on 320px screen size the table doesn't look good with added width.

Hi Cyberek,

Thanks for all your help. The site is ready now and we are very happy with this website!

There is only one last question... I hope you can help us with a solution for this little problem.
It's about the slideshow in the INTRO. I have no slideshow, because there is only one slide. I need only this image here.
When you enter the website on mobile phone, you are searching for the menu. When you start swiping down, everything is alright. But when you first swipe to the right in the beginning, you are drifting into a grey image and you can't go back to the website.

What can I do with this? Is it possible to place only a background image here and remove all the slides?
If this works, can you tell me where I can place this background image?

I hope you can help me with this last question...

In the attachments you will find the mobile phone screen with the grey image after swiping.

Thank you in advance.

Daphne

Please send me a PM with:
1. URL to your website
2. login and password of user with login privileges (please create one for me)
3. link to this thread

I have deleted previous pm.