Please post a link to your site so we can take a look at it. Thanks.
Hi CrounchingBruin,
Apologies as I was too anxious that I forgot to put it in.
Here it goes! Thanks in advance!
http://www.qmedical.com.sg
What’s happening is that certain elements, like the navigation menu, are trying to respond to the change in view port size (i.e., screen width), but there are elements on the page which keeps the page wide. That is, it looks like your site designer decided to have a fixed width site instead of a responsive site by setting the width of the content to 1100px. You can actually see what’s happening on your desktop browser. Make the width of your browser narrower than the width of the page, so you see the horizontal scroll bar appear. Then scroll to the right, and you’ll see that the red menu background is light gray to the right. The red part is the same exact size as the width of the browser window. That’s what’s happening on mobile devices, the red part is actually the same width as the device, but because the phone is trying to display the full 1100px of width on a 320px wide screen (depending upon what phone you’re using), the red bar looks like it’s not extending all the way out.
So to fix, add this to the end of your child theme’s style.css file:
.main-nav-area {
min-width: 1100px;
}
This will insure the nav bar is the same width as the content area.
Hi There,
It works! Thank you for your help and detailed explanation. However, I would like to ask how does setting the width min as 1100px solves the issue since on the phone it is 320px? Does it means that my phone is displaying more than 1100px on the phone?
Apologies but I am very new to this and would love to learn more.
Thank you.
The resolution of your phone is still 320px, but your phone will try to display a web page which is wider than 320px by scaling everything down so it fits the width of the screen. However, the text on a fixed-width site is usually too small to read so you have to zoom in to make it legible.
About five or six years ago, a concept called responsive web design started to become popular as the number of people using cell phones to browse the internet grew. The idea was that a web page should reconfigure itself based on the width of the view port, whether it be a desktop browser, a tablet, or a cell phone. If you go to many sites, nowadays, and resize your browser window, you can see how the site will reconfigure itself. For example, on the CNN site, as you make your browser narrower, you’ll see the sidebar on the left collapse under the featured story. Eventually the menu will turn into a mobile menu button. The text remains legible at all screen widths, and you don’t have to scroll to the right to read all of the content. What’s also nice about a responsive web design is that you don’t need to maintain a separate web site for mobile visitors (like many sites did early on).
The theme that your site is using, Twenty Twelve, is actually a responsive theme, meaning sites created with the theme will respond to different view port widths. For example, here’s a site using a fairly unmodified Twenty Twelve theme. However, your site developer turned the Twenty Twelve theme into a fixed-width child theme so it no longer acts as a responsive site. It’s not necessarily bad, but it just makes viewing the site more difficult for your mobile visitors. Also, Google is starting to experiment with making mobile-friendly sites rank higher in search results. You can see how mobile-friendly your site is by using Google’s Mobile-Friendly Test Tool.
