Problem loading website on mobile phones.

[gluaiseach]

My website is www.templederryns.ie. My problem is I cant get my template to display properly on mobile devices. I tried contacting the template provider many times but to no avail. I dont want to change my template as it fits us perfectly .Is there some setting to help or can it be linked to an app? I developed the device but I am no web developer so help is hugely appreciated.

[effrit]

ok, got it.
try edit index.php of template. search for meta name="viewport" and make it like

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1.0">

if not helped, u need @media rule in css file

Code: Select all

@media screen and (max-width: 800px) {  
.span-6, .span-3, .col, #leftbar-w, #rightbar-w{width:98% !important;}  
}

[Per Yngve Berg]

Code: Select all

<div id="rightbar-w" class="col span_3 clr">

It's "span3", not "span_3". The change will make the sidebar responsive and positioned below on small screens.

[effrit]

@Per Yngve Berg, no, because it's just similar naming - this is not bootstrap site, so changes in class name just will broke it.

i also named them wrong, so correct code will be

Code: Select all

@media screen and (max-width: 800px) {
.span_6, .span_3, .col, #leftbar-w, #rightbar-w{width:98% !important;}  
}

[Per Yngve Berg]

Bootstrap is loaded.

[effrit]

loaded, but site designed not for bootstrap
so simple renaming just make desktop site look like one-column mobile version.

[Webdongle]

... I dont want to change my template as it fits us perfectly ....

How can you say

fits us perfectly

When it doesn't display correctly on mobile phones? Your time might be better to spend your time finding a Template that works the way you want it to?

[effrit]

firstly check index.php in template folder for meta string.
second - paste css code

Code: Select all

@media screen and (max-width: 800px) {
.span_6, .span_3, .col, #leftbar-w, #rightbar-w{width:98% !important;}  
}

in
/templates/school/css/styles.css

[gluaiseach]

firstly check index.php in template folder for meta string.
second - paste css code

Code: Select all

@media screen and (max-width: 800px) {
.span_6, .span_3, .col, #leftbar-w, #rightbar-w{width:98% !important;}  
}

in
/templates/school/css/styles.css

Thank you so in my index.php i found the line

<meta name="viewport" content="width=device-width" />

Do I replace everything that comes after viewport ?

Apologies for my ignorance. Do I also have to replace it in the styles.css ?

[gluaiseach]

firstly check index.php in template folder for meta string.
second - paste css code

Code: Select all

@media screen and (max-width: 800px) {
.span_6, .span_3, .col, #leftbar-w, #rightbar-w{width:98% !important;}  
}

in
/templates/school/css/styles.css

Thank you so in my index.php i found the line

<meta name="viewport" content="width=device-width" />

Do I replace everything that comes after viewport ?

Apologies for my ignorance. Do I also have to replace it in the styles.css ?

Okay I have added that to the style sheet. Now the menu on the right seems fine but the menu on the left doesn't work. I haven't changed the index.php yet.

[effrit]

u must change index.php first.
and if it doesn't work - then add css.

try replace meta string completely to my example

[gluaiseach]

u must change index.php first.
and if it doesn't work - then add css.

try replace meta string completely to my example

That worked perfectly. Thank you so much. My school is indebted to you for your help.

[effrit]

this is good, but seems like u tried to insert css code into index.php also.
so it's shown on the top of the site.
delete this part.