How do I change parts of the skin for mobile browsers only?
Hello,
I am looking to edit the default skin, to change the look on mobile devices only. Is there a way I can detect if the browser being used is desktop or mobile? Example: PHP Code:
|
Re: How do I change parts of the skin for mobile browsers only?
Can I use this inside a template file?
PHP Code:
|
Re: How do I change parts of the skin for mobile browsers only?
|
Re: How do I change parts of the skin for mobile browsers only?
Is it possible to move/remove <div> sections using CSS?
If so, using what code? |
Re: How do I change parts of the skin for mobile browsers only?
Sorry, I missed that you were using x-cart 5...
I don't have any experience with xc5... |
Re: How do I change parts of the skin for mobile browsers only?
Quote:
Yes, this is correct code. Quote:
Well, if CSS code can accomplish what you need, then you can do this. In order to register CSS code for mobile skin, you can use the condition mentioned earlier (if (\XLite\Core\Request::isMobileDevice())) in the method described here: http://kb.x-cart.com/display/XDD/Adding+CSS+and+JS+files |
Re: How do I change parts of the skin for mobile browsers only?
I'm not using mobile skin. I just want to modify the default responsive skin to look better on mobile devices.
I will even share the mods that I do if somebody is willing to help point me in the right direction. |
Re: How do I change parts of the skin for mobile browsers only?
Quote:
Also, I tried using that code inside the template files, and it didn't work. It just displayed the code on the screen. |
Re: How do I change parts of the skin for mobile browsers only?
Quote:
OK. Could you please explain what you are trying to achieve then? I need a bit more details in order to help. Tony. |
Re: How do I change parts of the skin for mobile browsers only?
Quote:
I need to edit the files: - skins/default/en/checkout/steps/shipping/parts/subsection.shipping.tpl - skins/default/en/checkout/steps/shipping/parts/subsection.payment.tpl But I need the changes I make to only display on mobile devices. I wish there was a "mobile override" skin area, kinda like "custom skin", but one that only works if being viewed from a mobile device. |
Re: How do I change parts of the skin for mobile browsers only?
What exactly do you want to change in these templates? These templates just contain inclusion of elements of certain view lists, so it is still quite unclear to me what exactly you are trying to achieve.
|
Re: How do I change parts of the skin for mobile browsers only?
I need to arrange the <div> parts to allow for better display on mobile devices. Right now it's split into left and right columns, and I need to change it to 1 column (but only for mobile devices).
|
Re: How do I change parts of the skin for mobile browsers only?
Can you point me in the right direction?
I don't think the media css will do what I need. |
Re: How do I change parts of the skin for mobile browsers only?
Quote:
You can set up the CSS rule like this: Code:
#sidebar-first { and it will achieve what you need. Surely, if you want to add this rule depending on the device's width, the code would be something like this: Code:
@media (max-width: 480px) { |
All times are GMT -8. The time now is 02:31 AM. |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.