My Solution to Responsive Display on Tablet 768X1024


Author Message
100Serious

Posted: 1/8/2015
Quote message 

Referring to Artisteer 4.3, Joomal! 3.3
Ok, many of us have faced this challenge where our responsive Joomla! website turns a mess on tablet with screen size : 768 by 1024. But we also find that the same website looks great on smart mobile phones which have smaller screen size than the tablet.

So, maybe you want to disable the responsive mode on the table while maintaining responsive mode on phones and the rest of other devices. But on a second thought, how about if you get the tablet display your website just as the phone does?

The follow is a simple solution that will force your tablet to display the way the phone does. (It will look like a phone with larger screen)


1. Go to Joomla back end (administration area)
2. Go to Extension Manager >>Template Manager
3. Look on your right hand side upward and click on "Templates"
4. Now, click on your Artisteer template to open its files
5. Click on CSS then "template.responsive.css"
6. Look through the codes down to line 433

From Line 433 to line 443, this is the code you will see:

@media all and (max-width: 768px)
{
#artx-resp, #nits-resp-t { display: block; }
#artx-resp-m { display: none; }
}

@media all and (max-width: 480px)
{
#artx-resp, #nits-resp-m { display: block; }
#artx-resp-t { display: none; }
}


NOTE: artx in the code above is your CSS prefix so if in your code, you have something like this: #man-resp, don't change it to #artx-resp. Leave it like that.

Ok, let's finish the job. Replace the above code with this code:

@media all and (max-width: 768px)
{
#artx-resp, #nits-resp-t { display: none; }
#artx-resp-m { display: block; }
}

@media all and (max-width: 768px)
{
#artx-resp, #nits-resp-m { display: block; }
#artx-resp-t { display: none; }
}

NOTE: Once again, don't just copy this. Replace artx with your CSS prefix.

Now save your changes and open your site on a tablet to see the new look. If you don't have tablet, please I am kind. Get a plane ticket, come. I will gladly let mine to you.

SORRY: Don't ask me for explanation. I just did little reasoning, then try and error and it worked for me. I do not guarantee perfect solution. You may even have better idea.

CREDIT: To Gyroman who gave the idea on another person's problem here
http://www.artisteer.com/Default.aspx?forum_id=20&p=forum_new_post

GREETINGS: TO jrgweb, who has given me solution to any problem I have posted here

If you don't have

 
trazdum

Posted: 7/3/2015
Quote message 

Great!!!!! Thank you ;)
 
Vaggelis

Posted: 7/10/2015
Quote message 

My CSS includes:
===============================
@media (min-width: 1200px)
{
#weblb-resp-desktop { display: block; }
}

@media (min-width: 980px) and (max-width: 1199px)
{
#weblb-resp-tablet-landscape { display: block; }
}

@media (min-width: 768px) and (max-width: 979px)
{
#weblb-resp-tablet-portrait { display: block; }
}

@media (min-width: 480px) and (max-width: 767px)
{
#weblb-resp-phone-landscape { display: block; }
}
===============================

What have I exactly to modify in order to DISABLE responsiveness to tablets?

Thanks!