Size Content To Viewport For Mobile

Hello, I was hoping someone could help me. I configured viewpoint , adding <meta name=viewport content="width=device-width, initial-scale=1"> to html_header.php. When I checked googles pagespeed insights for mobile, I got this message:

"Size content to viewport

The page content is too wide for the viewport, forcing the user to scroll horizontally. Size the page content to the viewport to provide a better user experience. The page content is 985 CSS pixels wide, but the viewport is only 320 CSS pixels wide."

Is there a code that I would need to place? I honestly have been trying to fix this problem for days but no luck. My site is b e d r o o m d u v e t s p o t.com

Please, any help would be greatly appreciated. thank you.

Suggest incorporating the responsive diy template code available in the downloads responsive templates area...

Hello, do you mean this http://www.zen-cart.com/downloads.php?do=file&id=1724

I forgot to mention that I was using zencart v1.3.9h

Sorry, what is this download used for?:blush:

It is used to create a template that adjusts itself based on the device being used to display the result and the size of the display. Ie. It is a mobile friendly modification to resize the content to the viewport. :) ought to solve your problem generally speaking.

Ohhh, I see. But I'm not seeing any downloads for zencart v1.3.9h :(

Is there maybe another solution, a css code that I can place somewhere in my files? Thanks again. :smile:

I have been reading information online and I believe it may have to do with css coding or maybe an image (widget) is causing the page content to be so wide, but I'm not sure. I found this information on the web that helped: http://www.feedthebot.com/mobile/content-size-viewport.html

I'm still trying to figure this out. :frusty: If anyone finds a solution to this problem, please let know.

I received this suggestion a couple of minutes ago:

"To fix this problem, you need first decide what you want displayed on the mobile screen and then, make code adjustments to make that happen. Here is one suggestion, when someone views your site on a mobile device, consider dropping the left and right columns and make the center section have 100% width . Unfortunately, it is not just one file that you need to change ."

Hmmmm....now all I need to figure out is what files to edit. I will come back if I find anything. Hopefully this can help someone else who is having the same problem. Crossing my fingers.

That's a algozone template your using. There is no simple path to making it responsive to satisfy the google mobile friendly test. Your best bet is too install one of algozone mobile templates along side the other template and tweak it with your colors and logo. It will make google happy when they come to test, and buy you time to decide on the long term path you want to take regarding mobile friendliness

ricangem:

Hello, do you mean this http://www.zen-cart.com/downloads.php?do=file&id=1724

I forgot to mention that I was using zencart v1.3.9h

Sorry, what is this download used for?:blush:

ricangem:

Ohhh, I see. But I'm not seeing any downloads for zencart v1.3.9h :(

Is there maybe another solution, a css code that I can place somewhere in my files? Thanks again. :smile:

ricangem:

I received this suggestion a couple of minutes ago:

"To fix this problem, you need first decide what you want displayed on the mobile screen and then, make code adjustments to make that happen. Here is one suggestion, when someone views your site on a mobile device, consider dropping the left and right columns and make the center section have 100% width . Unfortunately, it is not just one file that you need to change ."

Hmmmm....now all I need to figure out is what files to edit. I will come back if I find anything. Hopefully this can help someone else who is having the same problem. Crossing my fingers.

barco57:

That's a algozone template your using. There is no simple path to making it responsive to satisfy the google mobile friendly test. Your best bet is too install one of algozone mobile templates along side the other template and tweak it with your colors and logo. It will make google happy when they come to test, and buy you time to decide on the long term path you want to take regarding mobile friendliness

The above trail is all about accomplishing what you want, to have a mobile friendly presentation of your site.

But back to basics,understand that you are trying to maintain software functional that is RAPIDLY coming to a point of not being functional. Sure "patch" it to continue operating under a mobile template, but should begin considering upgrading the underlying ZC code to the latest version.

Hello, the email above was from algozone. I received another email that says:" If you are looking at where to locate the left and right columns, you should be able to find it in the template_main.php file."

I honestly do not know what to modify there. I hate to say this but I think I'm just going to give up.....

ricangem:

Hello, the email above was from algozone. I received another email that says:" If you are looking at where to locate the left and right columns, you should be able to find it in the template_main.php file."

I honestly do not know what to modify there. I hate to say this but I think I'm just going to give up.....

Post the contents (between CODE tags generated by selecting the # symbol in the message box toolbar) and possibly someone can help you. If this is/was a purchased template, then they should do so for you.

Sorry, do you need me to post all the information found in this file and is this safe? :blush:

Unfortunately, I purchased this template almost 5 years ago. They don't offer free support after 1 year of the template being purchased. Luckily, they were able to provide me with some info.

Thanks again. I appreciate everyone trying to help. :smile:

Still looking for a solution......:(

I still have not found a solution. I am trying to figure out how to remove the left and right columns (the empty spaces on the left and right side of the site). Is it safe to put the content of the template_main.php file here?? Please, any help would be greatly appreciated. Thank you.

Ok I got one side figured out:

I removed the <div class="az_main_container_side_l"> and that eliminated the left side column but when I deleted the right side column <div class="az_main_container_side_r">, the right side column stayed the same? It did not remove the extra space. :frusty:

This is what happens when I remove the code above for the left side. See how the blank space from the left side is removed. Exactly what I am trying to do with the right side:
Attachment #15361

What I deleted:
Attachment #15360

I am guessing this is the coding for the right side:

Attachment #15359

But when I remove it, nothing happens. :(