how to make site mobile friendly
Moderator: General Support Moderators
Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
-
- Joomla! Enthusiast
- Posts: 150
- Joined: Fri May 22, 2015 7:16 pm
how to make site mobile friendly
I have a demo site, what will eventually go live when completed, for our group and I am not sure how to make it mobile friendly.
The site is on Joomla 3 and is using the Protostar template that came built-in.
When I access the site on my smartphone I get the actual image below. The mobile menu displays but the text on the main screen, which is in a table, gets cutoff on the right.
I tried google mobile friendly test, Responsive Deign Testing, and Screenfly to see what it looks like as I am making modifications. However, these sites display the incorrect image below. This does not match the real smartphone rendering of the site.
Any idea why the emulation does not match the real phone site?
What is the easiest method of making this site mobile?
Thanks
The site is on Joomla 3 and is using the Protostar template that came built-in.
When I access the site on my smartphone I get the actual image below. The mobile menu displays but the text on the main screen, which is in a table, gets cutoff on the right.
I tried google mobile friendly test, Responsive Deign Testing, and Screenfly to see what it looks like as I am making modifications. However, these sites display the incorrect image below. This does not match the real smartphone rendering of the site.
Any idea why the emulation does not match the real phone site?
What is the easiest method of making this site mobile?
Thanks
You do not have the required permissions to view the files attached to this post.
- Webdongle
- Joomla! Master
- Posts: 44150
- Joined: Sat Apr 05, 2008 9:58 pm
Re: how to make site mobile friendly
'Web Developer' addon for Firefox gives(among other things) an accurate rendering of various device sizes.
What Menu Item type is your default menu item ?
What Menu Item type is your default menu item ?
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
-
- Joomla! Explorer
- Posts: 306
- Joined: Fri Apr 17, 2015 5:40 pm
- Contact:
Re: how to make site mobile friendly
Depends on your setup. Are you using CSS or LESS for your stylesheets?
If LESS then you will have some file called responsive.less or mobile.less in 'templates/less' folder.
If you're using CSS then more than likely you will have some media queries further down the template.css file that look like this:
@media (max-width: 767px) {
// some CSS code here...
}
To make it responsive you would need to apply CSS code for each device width.
For best results set your element widths as a percentage rather than in pixels. That way it will scale down more seamlessly.
If LESS then you will have some file called responsive.less or mobile.less in 'templates/less' folder.
If you're using CSS then more than likely you will have some media queries further down the template.css file that look like this:
@media (max-width: 767px) {
// some CSS code here...
}
To make it responsive you would need to apply CSS code for each device width.
For best results set your element widths as a percentage rather than in pixels. That way it will scale down more seamlessly.
Joomla Help and Resources: www.joomla-shark.com
-
- Joomla! Enthusiast
- Posts: 150
- Joined: Fri May 22, 2015 7:16 pm
Re: how to make site mobile friendly
The template came with Joomla. But I looked at the template files and there is a CSS folder and files and there is also a LESS folder.
-
- Joomla! Explorer
- Posts: 306
- Joined: Fri Apr 17, 2015 5:40 pm
- Contact:
Re: how to make site mobile friendly
Yes, but in your Template Manager, when you click into your template, it will tell you if you are using CSS or LESS.
Based on that, read my first post to see what you need to do to edit either the CSS or LESS file, and also Webdongle rightly suggested that you can use your browser's Web Developer tool to test your changes before applying them to your CSS or LESS file.
Based on that, read my first post to see what you need to do to edit either the CSS or LESS file, and also Webdongle rightly suggested that you can use your browser's Web Developer tool to test your changes before applying them to your CSS or LESS file.
Joomla Help and Resources: www.joomla-shark.com
-
- Joomla! Enthusiast
- Posts: 150
- Joined: Fri May 22, 2015 7:16 pm
Re: how to make site mobile friendly
If I click on the template, either for Edit Style, or Customize Template, I do not see where it shows CSS or LESS.
Isn't there an easier way to make this work other than editing the template?
It is supposed to be responsive and seems to work well with anything other than tables.
What I need to do is on the home page:
have one full width intro article
then a three column layout below
Isn't there an easier way to make this work other than editing the template?
It is supposed to be responsive and seems to work well with anything other than tables.
What I need to do is on the home page:
have one full width intro article
then a three column layout below
-
- Joomla! Explorer
- Posts: 306
- Joined: Fri Apr 17, 2015 5:40 pm
- Contact:
Re: how to make site mobile friendly
Tables don't work very well with responsive design.
Try putting your content in DIVs instead.
Try putting your content in DIVs instead.
Joomla Help and Resources: www.joomla-shark.com
- Webdongle
- Joomla! Master
- Posts: 44150
- Joined: Sat Apr 05, 2008 9:58 pm
Re: how to make site mobile friendly
What Menu Item type is your default menu item ?
It looks like it is displaying a table that you created
It looks like it is displaying a table that you created
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
-
- Joomla! Enthusiast
- Posts: 150
- Joined: Fri May 22, 2015 7:16 pm
Re: how to make site mobile friendly
Ah, ha. What is a DIV?JoomIa-Shark wrote:Tables don't work very well with responsive design.
Try putting your content in DIVs instead.
-
- Joomla! Enthusiast
- Posts: 150
- Joined: Fri May 22, 2015 7:16 pm
Re: how to make site mobile friendly
You are right. That was the only way I knew how to create the three columns, by using a tableWebdongle wrote:What Menu Item type is your default menu item ?
It looks like it is displaying a table that you created
Is there a more efficient way, one that will work with a responsive template?
- Webdongle
- Joomla! Master
- Posts: 44150
- Joined: Sat Apr 05, 2008 9:58 pm
Re: how to make site mobile friendly
http://forum.joomla.org/viewtopic.php?f ... 0#p3296565
Or
You can put a a custom class in <div class="row">
e.g.
<div class="row myclass">
to addThat will push the divs closer together
Search google for
bootstrap2 span grid
Or
Code: Select all
<div class="row">
<div class="span4"> </div>
<div class="span4"> </div>
<div class="span4"> </div>
</div>
e.g.
<div class="row myclass">
to add
Code: Select all
.myclass {
padding: 0 20px 0 20px;
}
Search google for
bootstrap2 span grid
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
-
- Joomla! Enthusiast
- Posts: 150
- Joined: Fri May 22, 2015 7:16 pm
Re: how to make site mobile friendly
This is way over my experience with html
Here is a link to a concept. Can we create something like this in Joomla?
https://www.dropbox.com/s/eo9r1nbprihkk14/test.jpg?dl=0
Here is a link to a concept. Can we create something like this in Joomla?
https://www.dropbox.com/s/eo9r1nbprihkk14/test.jpg?dl=0
- Webdongle
- Joomla! Master
- Posts: 44150
- Joined: Sat Apr 05, 2008 9:58 pm
Re: how to make site mobile friendly
Yes it is ... if you cant structure the divs when creating an Article then http://extensions.joomla.org/category/a ... -a-content
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
-
- Joomla! Enthusiast
- Posts: 150
- Joined: Fri May 22, 2015 7:16 pm
Re: how to make site mobile friendly
I looked at many of these extensions and I did not see one what will allow me to easily create the content I mentioned
- Per Yngve Berg
- Joomla! Master
- Posts: 31062
- Joined: Mon Oct 27, 2008 9:27 pm
- Location: Romerike, Norway
Re: how to make site mobile friendly
You should return to start and rethink your approach. Having all that information in a static article makes no sense. Maintaining it will be a nightmare.
For the events, use this extension: http://extensions.joomla.org/extensions ... ts/jevents
The component will take care of showing your events and remove past events. It has a "Latest Events" Module you can publish in a module position.
For the news, use the "Latest News" Module that shows articles from a category.
For the events, use this extension: http://extensions.joomla.org/extensions ... ts/jevents
The component will take care of showing your events and remove past events. It has a "Latest Events" Module you can publish in a module position.
For the news, use the "Latest News" Module that shows articles from a category.
-
- Joomla! Enthusiast
- Posts: 150
- Joined: Fri May 22, 2015 7:16 pm
Re: how to make site mobile friendly
The looks great. The maintenance is not a problem because most of it never changes. The center column will never change. The right, news, column does not change that often. But I like the "latest news" module you mentioned. With that we could actually make that section more dynamic and useful.
Is the "latest news" built-in or do I have to get it from the extensions web page?
But I agree with you, the events, i.e. calendar, will change often. I will try out the extension you mentioned.
Is there a way to create that kind of layout on the home page with these modules?
Is the "latest news" built-in or do I have to get it from the extensions web page?
But I agree with you, the events, i.e. calendar, will change often. I will try out the extension you mentioned.
Is there a way to create that kind of layout on the home page with these modules?
- Webdongle
- Joomla! Master
- Posts: 44150
- Joined: Sat Apr 05, 2008 9:58 pm
Re: how to make site mobile friendly
Just point the default menu item to it.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
- Per Yngve Berg
- Joomla! Master
- Posts: 31062
- Joined: Mon Oct 27, 2008 9:27 pm
- Location: Romerike, Norway
Re: how to make site mobile friendly
This is how I would have created it:
1) Create Category called "News"
2) Enter the text from the middle table cell into the Description of the Category.
3) Write articles for the News category
4) Create a Menu Item of type Category Blog Layout, point it to the "News" Category and set Description to Show.
5) Install the JEvents Extension
6) Publish the Latest Events Module in Position-7 or 8.
1) Create Category called "News"
2) Enter the text from the middle table cell into the Description of the Category.
3) Write articles for the News category
4) Create a Menu Item of type Category Blog Layout, point it to the "News" Category and set Description to Show.
5) Install the JEvents Extension
6) Publish the Latest Events Module in Position-7 or 8.
-
- Joomla! Apprentice
- Posts: 5
- Joined: Sun May 24, 2015 8:03 am
- Contact:
Re: how to make site mobile friendly
Interested to know if you captured before and after google web metrics once you made the mobile improvement.
thanks
thanks
- Webdongle
- Joomla! Master
- Posts: 44150
- Joined: Sat Apr 05, 2008 9:58 pm
Re: how to make site mobile friendly
Or create 3 separate Articles and use a menu item Featured or Category blog. You can experiment 0 or 1 leading items.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
-
- Joomla! Enthusiast
- Posts: 150
- Joined: Fri May 22, 2015 7:16 pm
Re: how to make site mobile friendly
I did not have time to do a google check after making the changes. I am doing so much experimenting I figured I would test it after big changes and see what the mobile site doesmarjan_ormond wrote:Interested to know if you captured before and after google web metrics once you made the mobile improvement.
thanks
-
- Joomla! Enthusiast
- Posts: 150
- Joined: Fri May 22, 2015 7:16 pm
Re: how to make site mobile friendly
I am getting closer. Although I haven't figured out the effect of the intro articles, articles and columns on the home page yet. I have not had time to experiment with the events module yet.
I was able to get the basic layout that I wanted, Two rows with
(1) full width intro article
(2) News and Events on same row
The key to getting mobile to work so far was installing the mobile joomla extension. It needs some tweaking though because there is to much space between articles.
Here is what I have so far: https://jscwrt.demojoomla.com/index.php
Few issues though. It seems that whatever text I add it has a transparent background. The only way I can get the text to look like what I want with a color background and border is to put it in a table
I was able to get the basic layout that I wanted, Two rows with
(1) full width intro article
(2) News and Events on same row
The key to getting mobile to work so far was installing the mobile joomla extension. It needs some tweaking though because there is to much space between articles.
Here is what I have so far: https://jscwrt.demojoomla.com/index.php
Few issues though. It seems that whatever text I add it has a transparent background. The only way I can get the text to look like what I want with a color background and border is to put it in a table
- Webdongle
- Joomla! Master
- Posts: 44150
- Joined: Sat Apr 05, 2008 9:58 pm
Re: how to make site mobile friendly
Just add a background-color to the div. Use Firefox with Firebug to see which css to edit
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
-
- Joomla! Enthusiast
- Posts: 150
- Joined: Fri May 22, 2015 7:16 pm
Re: how to make site mobile friendly
I added a background color attribute to the css but it changed everything related to that template. But I was able to edit the html for that article and made the same change. That worked.Webdongle wrote:Just add a background-color to the div. Use Firefox with Firebug to see which css to edit
However, I do not like the look of the text that way. It looks much better in a table. But there may be locations where I want to use this
Thanks
- Webdongle
- Joomla! Master
- Posts: 44150
- Joined: Sat Apr 05, 2008 9:58 pm
Re: how to make site mobile friendly
div.thisclass {
background-color: red;
}
Only applies to divs with class="thatclass" ... there are other ways to single out divs.
Also
<div class="thatclass">
<div class="thisclass"> </div>
</div>
try
.thatclass thisclass {
}
Also see https://docs.joomla.org/Page_Class_Suffix
background-color: red;
}
Only applies to divs with class="thatclass" ... there are other ways to single out divs.
http://stackoverflow.com/questions/3772 ... wo-classes<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>
...
* {
color: black;
}
.foo.bar {
color: red;
}
Output on supported browsers is:
<div class="foo">Hello Foo</div> <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div> <!-- Not selected, black text [3] -->
Also
<div class="thatclass">
<div class="thisclass"> </div>
</div>
try
.thatclass thisclass {
}
Also see https://docs.joomla.org/Page_Class_Suffix
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
- Webdongle
- Joomla! Master
- Posts: 44150
- Joined: Sat Apr 05, 2008 9:58 pm
Re: how to make site mobile friendly
For those who are unable to edit css or add classes ten extensions are the answer. But it is preferable to edit the images correctly. With JCE editor it's easy to add the img-responsive class to an image
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
-
- Joomla! Enthusiast
- Posts: 150
- Joined: Fri May 22, 2015 7:16 pm
Re: how to make site mobile friendly
I just installed JCE today and will experiment with that.
I really like the Mobile Joomla extension. It looks good on both my smartphone and on the iPad. Only thing is that it puts more space between articles than I like.
I really like the Mobile Joomla extension. It looks good on both my smartphone and on the iPad. Only thing is that it puts more space between articles than I like.
- Webdongle
- Joomla! Master
- Posts: 44150
- Joined: Sat Apr 05, 2008 9:58 pm
Re: how to make site mobile friendly
The css of 3rd party extensions can be overridden ... they need a line of code in the Templates index.php for the css override to be recognised.
https://docs.joomla.org/Understanding_Output_OverridesSupporting Media Files Override
For this example we have a module called mod_test, this module have a CSS file installed at:
/media/mod_test/css/mystyle.css
That file should be inserted using the following functions and parameters:
JHtml::stylesheet('mod_test/mystyle.css', false, true, false);
Note that the 3rd parameter (true) is the one that makes the Joomla API to look for an override file inside your current template folder.
The override file must be placed as follow at your current template folder:
/templates/my_template/css/mod_test/mystyle.css
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".