Solved

Wordpress Blog Mobile: How to get theme to look right on mobile

Posted on 2013-11-19
3
453 Views
Last Modified: 2013-12-12
We are using Twenty Thirteen, the theme that came with WordPress. This is a Wordpress blog embedded in a Joomla site, where the blog is located here:

www.nlpca.com/blog

The person that is doing this isn't a designer, they would like an easy way to make this blog look good in mobile devices. The desired look would be for it to show up full screen on a mobile browser just like the home page

www.nlpca.com

does.

All of his other sites show up fine, it seems to be a limitation in the Twenty Thirteen theme.

Is there a way to alter the theme CSS/HTML to make this blog look good? An example of one of our other sites that is working just fine is www.thewealthymind.com (though that site has a flash slideshow - but other than that that's how it should look - full screen)

The person isn't a designer and has put a lot of work in the blog, so he's looking for an easy solution, so please don't ask him to start from scratch on a different theme unless there's no other way.

Thanks.
0
Comment
Question by:weikelbob
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 250 total points
ID: 39660602
This is a Wordpress blog embedded in a Joomla site

Apropos of nothing, but...why?  Joomla can be extended to provide blog-like posting functions and this would be a helluva lot easier than having to manage two separate CMS's.

All of his other sites show up fine, it seems to be a limitation in the Twenty Thirteen theme.

Right and kinda wrong.  The Joomla site is using a non-responsive template.  The container is 1000px and the three columns split that up.  Because there is no responsive design, the site looks the same on the desktop, tablet, phone, etc.

TwentyThirteen is a responsive theme and it's behaving as intended.  So this isn't a limitation of theme, it's a lack of understanding what the theme was designed to do.  As the viewport width changes the theme repositions the elements based on the CSS settings and the available width.  So sidebars get floated under the content, footer elements stack, etc.  One of those "etc" is the banner area changes size but doesn't resize the background image.  So the effect is that of looking at a zoomed-in portion of the image.  The more space there is in the viewport, the more of the image will display until the maximum defined size is reached.

Is there a way to alter the theme CSS/HTML to make this blog look good?
The person isn't a designer and has put a lot of work in the blog, so he's looking for an easy solution, so please don't ask him to start from scratch on a different theme unless there's no other way.

Hate to break it to you, but the person's decision tree was kind of flawed.  Ideally, they would have tested the theme on mobile first and THEN put a lot of work into it :)

TwentyThirteen is what it is...a mobile responsive theme.  Trying to undo all of the media queries in the CSS is far more work than just switching to a different theme that behaves the way you want.  The middle-ground solution would be to add a mobile-specific theme that serves up yet a third look to specified devices.
0
 
LVL 14

Accepted Solution

by:
Dzynit earned 250 total points
ID: 39674985
You can try adding this to the head section of your header.php file in the twentythirteen theme:

<meta name="viewport" content="width=800, initial-scale=1">
0
 
LVL 7

Author Closing Comment

by:weikelbob
ID: 39715706
You guys were both helpful. We used dzynit's trick in the end.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Owning a franchise can be the dream of a lifetime. It provides a chance for economic growth. You can be as successful as you want.  To make your franchise successful, you need to market it successfully. Here are six of the best marketing strategies …
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
Suggested Courses

630 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question