Deb Troxel Vor 12 Jahren Thanks Nate! Your blogs are always packed with great info. Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Szymon Gołębiewski Vor 12 Jahren Nice article Nate. One question - does mobile theme works with all portlet or am I limited to just some of them? Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
wasim shaikh Vor 12 Jahren Thanks nate, nice article. Is there any YUI plugin availale for this? I want to use it in simple htmls.Thanks,Wasim Shaikh,http://microblog.wasimshaikh.com Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Nate Cavanaugh wasim shaikh Vor 12 Jahren @Szymon:In this case, it can work with any of them. Basically, it just depends on what portlets you'll style in which view. For some mobile devices, some portlets might make less sense (for instance, a flash portlet wouldn't work so well on most smart phones these days). But since its just CSS, the possibilities are pretty wide @wasim:Not yet, but I'll be pushing this one over to the YUI Gallery, so as soon as it's up, I can let you know Thanks all! Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Nate Cavanaugh wasim shaikh Vor 12 Jahren @Szymon:In this case, it can work with any of them. Basically, it just depends on what portlets you'll style in which view. For some mobile devices, some portlets might make less sense (for instance, a flash portlet wouldn't work so well on most smart phones these days). But since its just CSS, the possibilities are pretty wide @wasim:Not yet, but I'll be pushing this one over to the YUI Gallery, so as soon as it's up, I can let you know Thanks all! Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Jay Patel Vor 12 Jahren Nice article Nate..Thanks for sharing... Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Shagul Khajamohideen Vor 12 Jahren Thanks Nate. This is a great step. I guess Jorge and team are addressing the different content for different devices part. Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Jignesh Vachhani Vor 12 Jahren Very Nice Demo and Article Nate !!!! Thanks Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Gem E Vor 12 Jahren This is a great feature and I got it to work nicely on my liferay except that it isn't getting picked up on the iphone (haven't tried it on an ipad yet). I noticed the viewport demo doesn't work correctly on the iphone either (it's being treated as desktop size 960px) - do you know why this may be? Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Hossein Oloomi Vor 12 Jahren Dear Nate, <br>I want to use my own JavaScript calendar and date picker instead of aui-calendar and aui-datepicker all over Liferay. I want to replace my js files with those of aui, but clearly this will not work; what functions should my files have and what should they return? <br>Thanks in advance Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Suraj Bihari Vor 12 Jahren Thanks for providing this helpful tutorial on responsive layouts. Olaf tipped this during the developer course! Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Nagendra Kumar Busam Vor 12 Jahren Really gr8 stuff Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Ben Chapman Vor 12 Jahren Nate, Thanks very much for this; however, I must not be doing something quite right as it doesn't seem to have any effect on our pages. Where would I put the call to AUI().use('aui-viewport')? I've tried doing it in the script section of the page (Manage>Page>Script), but that does not result in generating the expected classes in the HTML. We are EE customers and I can see that AUI().use... is inserted in the source of the HTML, but that's it.Can you provide a pointer to further information? Many thanks and sorry for the very basic question! Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Nate Cavanaugh Ben Chapman Vor 12 Jahren Hi Ben,Thanks for reaching out. The only thing I can think of that would cause this not to work is perhaps the version of EE you have isn't the latest service pack? This component was included in a service pack, so it's not available in earlier ones.If you get in touch with your account rep, they can probably get you a patch that would include just the files you need for this feature.If you are on the latest service pack and it's still no go, you can either get in touch with support to help debug your specific case, or you can create a forum thread and paste the link here and I'll take a look at it and see if I can spot anything.Thanks Ben, Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Nate Cavanaugh Ben Chapman Vor 12 Jahren Hi Ben,Thanks for reaching out. The only thing I can think of that would cause this not to work is perhaps the version of EE you have isn't the latest service pack? This component was included in a service pack, so it's not available in earlier ones.If you get in touch with your account rep, they can probably get you a patch that would include just the files you need for this feature.If you are on the latest service pack and it's still no go, you can either get in touch with support to help debug your specific case, or you can create a forum thread and paste the link here and I'll take a look at it and see if I can spot anything.Thanks Ben, Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Dave Weitzel Vor 12 Jahren Has this been carried over to 6.1? I do not see anything in CE 6.1 GA1. If not can someone write a log about the mobile device rules and what they are how to use them and examples?Would prefer the view-port was there so we don't have to do much with more guidance on how to use in custom themes Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Steve C Groninga Vor 12 Jahren Nate this is really great stuff. Have you run into the following: works great on the desktop monitor (able to minimize browser window and the alternate css is used), but fails on an actual handheld device... ( iPhone, android, etc....) Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Nate Cavanaugh Steve C Groninga Vor 12 Jahren Hi Steve,I have run into an issue on Retina screens where the reported size wasn't being properly handled.In those cases, I had to set something like the following in the head of the document:<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />Let me know if that helps.Thanks, Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Nate Cavanaugh Nate Cavanaugh Vor 12 Jahren And Dave, yes this module is inside of 6.1 as well. As long as you call AUI().use('aui-viewport') in your theme, you should be good to go.HTH, Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Steve C Groninga Nate Cavanaugh Vor 12 Jahren Nate, Thanks for this tip! My initial tests seem to work perfectly! Now on to redesigning for these devices/smaller screens! Well Done! This certainly has a far reaching impact!Steve<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" /> Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Nate Cavanaugh Steve C Groninga Vor 12 Jahren Hi Steve,I have run into an issue on Retina screens where the reported size wasn't being properly handled.In those cases, I had to set something like the following in the head of the document:<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />Let me know if that helps.Thanks, Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Nate Cavanaugh Nate Cavanaugh Vor 12 Jahren And Dave, yes this module is inside of 6.1 as well. As long as you call AUI().use('aui-viewport') in your theme, you should be good to go.HTH, Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Steve C Groninga Nate Cavanaugh Vor 12 Jahren Nate, Thanks for this tip! My initial tests seem to work perfectly! Now on to redesigning for these devices/smaller screens! Well Done! This certainly has a far reaching impact!Steve<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" /> Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Nate Cavanaugh Nate Cavanaugh Vor 12 Jahren And Dave, yes this module is inside of 6.1 as well. As long as you call AUI().use('aui-viewport') in your theme, you should be good to go.HTH, Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Steve C Groninga Nate Cavanaugh Vor 12 Jahren Nate, Thanks for this tip! My initial tests seem to work perfectly! Now on to redesigning for these devices/smaller screens! Well Done! This certainly has a far reaching impact!Steve<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" /> Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Steve C Groninga Nate Cavanaugh Vor 12 Jahren Nate, Thanks for this tip! My initial tests seem to work perfectly! Now on to redesigning for these devices/smaller screens! Well Done! This certainly has a far reaching impact!Steve<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" /> Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
(Sie) Vor 11 Jahren [...] Here is exactly what you need: http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/liferay-com-mobile-sites-and-responsive-layouts Marcar como inapropiado Por favor, identifíquese para poder... [...] Read More Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
(Sie) Vor 11 Jahren [...] Here is exactly what you need: http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/liferay-com-mobile-sites-and-responsive-layouts Flag Please sign in to flag this as inappropriate. Mark as an... [...] Read More Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Md Mohiuddin Vor 11 Jahren Hi , We have been trying to build a mobile theme in Liferay using repsonsive web design.We have included the line : AUI().use('aui-viewport'); within script tags and also included : <meta name="viewport" content="target-densitydpi=160dpi, width=device-width, minimum-scale=1, maximum-scale=1"> within the <head> tags of portal_normal.vmThe theme is working fine on Android , Nokia ,Apple mobiles but gives issues on Blackberry (OS 4).We have tested it on firefox browser for BB 8520 and the problem is that the web site rendered as a full site on Blackberry Firefox and does not use responsive layout.The client's major requirement is that the mobile theme should open up on Blackberry.Any suggestions in this regard will be highly welcome.Need urgent help on this.Regards,Md. Mohiuddin Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Mathon Gijsbers van Wijk Md Mohiuddin Vor 11 Jahren Hi,What would I need to do to have my theme support a width of 240 px?Thanks, Mathon Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Md Mohiuddin Vor 11 Jahren Hi , We have been trying to build a mobile theme in Liferay using repsonsive web design.We have included the line : AUI().use('aui-viewport'); within script tags and also included : <meta name="viewport" content="target-densitydpi=160dpi, width=device-width, minimum-scale=1, maximum-scale=1"> within the <head> tags of portal_normal.vmThe theme is working fine on Android , Nokia ,Apple mobiles but gives issues on Blackberry (OS 4).We have tested it on firefox browser for BB 8520 and the problem is that the web site rendered as a full site on Blackberry Firefox and does not use responsive layout.The client's major requirement is that the mobile theme should open up on Blackberry.Any suggestions in this regard will be highly welcome.Need urgent help on this.Regards,Md. Mohiuddin Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Mathon Gijsbers van Wijk Md Mohiuddin Vor 11 Jahren Hi,What would I need to do to have my theme support a width of 240 px?Thanks, Mathon Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Mathon Gijsbers van Wijk Md Mohiuddin Vor 11 Jahren Hi,What would I need to do to have my theme support a width of 240 px?Thanks, Mathon Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Rui Maciel Vor 11 Jahren Hi, sorry for bothering but i don't know where to put the AUI().use('aui-viewport') declaration (i have already tried to put in a script inside a custom portlet but nothing happens). I just want my portal to adjust it size to the browser window. I have the liferay-portal-6.1.0-ce-ga1 version. Please can somebody help me? Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Nate Cavanaugh Rui Maciel Vor 11 Jahren Hi Rui,If you place it in your theme's main.js it should work.However, as mentioned above, what this does is add CSS classes to the HTML element. For the styling to actually change, you'll need to add CSS for those sizes to determine how it should look.I hope that helps Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Rui Maciel Nate Cavanaugh Vor 11 Jahren Many thanks!! I will try that =D Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Nate Cavanaugh Rui Maciel Vor 11 Jahren Hi Rui,If you place it in your theme's main.js it should work.However, as mentioned above, what this does is add CSS classes to the HTML element. For the styling to actually change, you'll need to add CSS for those sizes to determine how it should look.I hope that helps Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Rui Maciel Nate Cavanaugh Vor 11 Jahren Many thanks!! I will try that =D Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Rui Maciel Nate Cavanaugh Vor 11 Jahren Many thanks!! I will try that =D Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Rui Maciel Vor 11 Jahren Sorry to bother again Nate but in the forum, they told me that the classic theme from the liferay portal has already this feature. I have the liferay portal CE 6.1.0 version but in my case that's not true. Is there any theme with this feature that i could download? Many thanks Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Rui Maciel Rui Maciel Vor 11 Jahren Nate, I resolved my issue, i just change the custom.css file in the ROOT of the portal.in "wrapper" i change the min-width: 960px;tomin-width: 320px;Thanks for all! Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Rui Maciel Rui Maciel Vor 11 Jahren Nate, I resolved my issue, i just change the custom.css file in the ROOT of the portal.in "wrapper" i change the min-width: 960px;tomin-width: 320px;Thanks for all! Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Dave Weitzel Vor 11 Jahren I have found a BIG problem with responsive design with OOTB Liferay 6.1 GA1 not sure if in GA2.the WYSIWYG editor puts full style conditions for images - it sets height and width styles (generally a no no anyway). As these are at the element level they cannot be overridden by say aui-view-lt720 img {max-width:50%"} definitions in a css file.How can we get the WYSWYG to behave in a responsive friendly manner, otherwise we have to edit the source of all our content! Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Nate Cavanaugh Dave Weitzel Vor 11 Jahren Hi Dave,This is something on CKEditor's side. I'm not sure if there are any out there that are responsive friendly per-se, but if you ever find one, Liferay allows you to swap out the editor.However, there are a couple of different ways to handle this without changing the editor:1. In your CSS, setting max-width actually should be respected, because the inline style is being set to width, not to max-width. When I test that scenario, max-width works fine.However, the issue with it is that the height is still set, so it will squish the image.What you can do is:.aui-view-lt720 img { height: auto !important; max-width: 50%; }This should make it so that the inline style is overwritten, but the image proportions are still maintained.2. The other option you have is to discourage or not allow images to be embedded in the editor, and instead, add a field for the image into the structure.This is what we a lot for the Liferay.com website. Usually, there are blocks where we want a paragraph of text and some accompanying image or any number of those. We'll create a repeatable structure, and allow those to be uploaded.In the template then we have more control over how that image is displayed with the text for the different breakpoints.The easiest of these approaches is probably #1 as it requires the least amount of change, but #2 provides you with ultimate control.I hope that helps Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Subhash Pavuskar Nate Cavanaugh Vor 11 Jahren Great Work Nate Cavanaugh !! Useful Article !! Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Nate Cavanaugh Dave Weitzel Vor 11 Jahren Hi Dave,This is something on CKEditor's side. I'm not sure if there are any out there that are responsive friendly per-se, but if you ever find one, Liferay allows you to swap out the editor.However, there are a couple of different ways to handle this without changing the editor:1. In your CSS, setting max-width actually should be respected, because the inline style is being set to width, not to max-width. When I test that scenario, max-width works fine.However, the issue with it is that the height is still set, so it will squish the image.What you can do is:.aui-view-lt720 img { height: auto !important; max-width: 50%; }This should make it so that the inline style is overwritten, but the image proportions are still maintained.2. The other option you have is to discourage or not allow images to be embedded in the editor, and instead, add a field for the image into the structure.This is what we a lot for the Liferay.com website. Usually, there are blocks where we want a paragraph of text and some accompanying image or any number of those. We'll create a repeatable structure, and allow those to be uploaded.In the template then we have more control over how that image is displayed with the text for the different breakpoints.The easiest of these approaches is probably #1 as it requires the least amount of change, but #2 provides you with ultimate control.I hope that helps Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Subhash Pavuskar Nate Cavanaugh Vor 11 Jahren Great Work Nate Cavanaugh !! Useful Article !! Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Subhash Pavuskar Nate Cavanaugh Vor 11 Jahren Great Work Nate Cavanaugh !! Useful Article !! Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
M. Ahamed Maqbool Vor 11 Jahren This is a great feature.Could we get sample theme war file or in market place? its will help us.Thank's Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Jack Bakker M. Ahamed Maqbool Vor 11 Jahren where say for two levels of nav, I envisionfor browser: show nav as usual (on mouseover of navItemLevel1 show navItemLevel2s)for tablet portrait and less: show only navItemLevel1s where onclick/touch of navitem; go to targetted page where then only show navItemLevel2s (under the navItemLevel1 u just went to)possible ? do themes need to be jsp for this or can this be done with velocity ? Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Jack Bakker Jack Bakker Vor 11 Jahren this is cool ; http://codepen.io/JasonAGross/full/kEhHm#but not what I am thinking in my last comment as I question menus being too tall...I think I should be posting in forum not hijacking this wiki Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Jack Bakker M. Ahamed Maqbool Vor 11 Jahren where say for two levels of nav, I envisionfor browser: show nav as usual (on mouseover of navItemLevel1 show navItemLevel2s)for tablet portrait and less: show only navItemLevel1s where onclick/touch of navitem; go to targetted page where then only show navItemLevel2s (under the navItemLevel1 u just went to)possible ? do themes need to be jsp for this or can this be done with velocity ? Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Jack Bakker Jack Bakker Vor 11 Jahren this is cool ; http://codepen.io/JasonAGross/full/kEhHm#but not what I am thinking in my last comment as I question menus being too tall...I think I should be posting in forum not hijacking this wiki Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Jack Bakker Jack Bakker Vor 11 Jahren this is cool ; http://codepen.io/JasonAGross/full/kEhHm#but not what I am thinking in my last comment as I question menus being too tall...I think I should be posting in forum not hijacking this wiki Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Mario Grimaldi Vor 11 Jahren This is so cool!Thanks for your post and for this AUI module! Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Kushal Jayswal Vor 11 Jahren Hey Nate Cavanaugh,Impressive article!Is there any way we can use the same with less efforts, manually?-regards:Kushal Jayswalhttp://kutec.co.inhttp://teckstack.com Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Juan Antonio Girón Vor 10 Jahren Hi Nate, is it possible to create a responsive theme in Liferay 6.0.5 CE? Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Kushal Jayswal Juan Antonio Girón Vor 10 Jahren Yes. It's possible Juan.You need to overwrite some default Liferay CSS and all will work fine with @media query. Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Juan Antonio Girón Kushal Jayswal Vor 10 Jahren Thanks Kushal, could you give me an example or article on how to implement it?, Please. Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Kushal Jayswal Juan Antonio Girón Vor 10 Jahren Sorry I cannot let you know the site name.But I can share CSS.CSS:-------------------------------------------------/* common behaviour */.portlet-layout { display: table; width: 100%; }.portlet-column-first { padding-left: 0 !important; }.portlet-column-last { padding-right: 0 !important; }.portlet-column { padding: 0 1%; display: table-cell; vertical-align: top; }/* tablet behaviour */@media all and (min-width: 768px) and (max-width: 1024px) { .portlet-column { padding: 0 3% 0 0; display: table-cell; } .home .portlet-column { padding: 0 0 0 0; }}/* tablet behaviour - viewport change */@media all and (max-width: 767px) { .portlet-layout { display: block; } .portlet-column { display: block !important; padding: 0 !important; }}/* smartphone behaviour */@media all and (max-width : 480px) { .portlet-layout { display: block; } .portlet-column { display: block; padding: 0 !important; }} Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Juan Antonio Girón Kushal Jayswal Vor 10 Jahren Many thanks Kushal, I'll try it. Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Kushal Jayswal Juan Antonio Girón Vor 10 Jahren Yes. It's possible Juan.You need to overwrite some default Liferay CSS and all will work fine with @media query. Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Juan Antonio Girón Kushal Jayswal Vor 10 Jahren Thanks Kushal, could you give me an example or article on how to implement it?, Please. Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Kushal Jayswal Juan Antonio Girón Vor 10 Jahren Sorry I cannot let you know the site name.But I can share CSS.CSS:-------------------------------------------------/* common behaviour */.portlet-layout { display: table; width: 100%; }.portlet-column-first { padding-left: 0 !important; }.portlet-column-last { padding-right: 0 !important; }.portlet-column { padding: 0 1%; display: table-cell; vertical-align: top; }/* tablet behaviour */@media all and (min-width: 768px) and (max-width: 1024px) { .portlet-column { padding: 0 3% 0 0; display: table-cell; } .home .portlet-column { padding: 0 0 0 0; }}/* tablet behaviour - viewport change */@media all and (max-width: 767px) { .portlet-layout { display: block; } .portlet-column { display: block !important; padding: 0 !important; }}/* smartphone behaviour */@media all and (max-width : 480px) { .portlet-layout { display: block; } .portlet-column { display: block; padding: 0 !important; }} Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Juan Antonio Girón Kushal Jayswal Vor 10 Jahren Many thanks Kushal, I'll try it. Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Juan Antonio Girón Kushal Jayswal Vor 10 Jahren Thanks Kushal, could you give me an example or article on how to implement it?, Please. Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Kushal Jayswal Juan Antonio Girón Vor 10 Jahren Sorry I cannot let you know the site name.But I can share CSS.CSS:-------------------------------------------------/* common behaviour */.portlet-layout { display: table; width: 100%; }.portlet-column-first { padding-left: 0 !important; }.portlet-column-last { padding-right: 0 !important; }.portlet-column { padding: 0 1%; display: table-cell; vertical-align: top; }/* tablet behaviour */@media all and (min-width: 768px) and (max-width: 1024px) { .portlet-column { padding: 0 3% 0 0; display: table-cell; } .home .portlet-column { padding: 0 0 0 0; }}/* tablet behaviour - viewport change */@media all and (max-width: 767px) { .portlet-layout { display: block; } .portlet-column { display: block !important; padding: 0 !important; }}/* smartphone behaviour */@media all and (max-width : 480px) { .portlet-layout { display: block; } .portlet-column { display: block; padding: 0 !important; }} Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Juan Antonio Girón Kushal Jayswal Vor 10 Jahren Many thanks Kushal, I'll try it. Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Kushal Jayswal Juan Antonio Girón Vor 10 Jahren Sorry I cannot let you know the site name.But I can share CSS.CSS:-------------------------------------------------/* common behaviour */.portlet-layout { display: table; width: 100%; }.portlet-column-first { padding-left: 0 !important; }.portlet-column-last { padding-right: 0 !important; }.portlet-column { padding: 0 1%; display: table-cell; vertical-align: top; }/* tablet behaviour */@media all and (min-width: 768px) and (max-width: 1024px) { .portlet-column { padding: 0 3% 0 0; display: table-cell; } .home .portlet-column { padding: 0 0 0 0; }}/* tablet behaviour - viewport change */@media all and (max-width: 767px) { .portlet-layout { display: block; } .portlet-column { display: block !important; padding: 0 !important; }}/* smartphone behaviour */@media all and (max-width : 480px) { .portlet-layout { display: block; } .portlet-column { display: block; padding: 0 !important; }} Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen Juan Antonio Girón Kushal Jayswal Vor 10 Jahren Many thanks Kushal, I'll try it. Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
Juan Antonio Girón Kushal Jayswal Vor 10 Jahren Many thanks Kushal, I'll try it. Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen
JOBIN MATHEW Vor 9 Jahren Thanks Nate.. Melden Sie sich an, um auf diesen Beitrag zu antworten. Antworten als... Abbrechen