WordPress.org

Ready to get started?Download WordPress

Forums

Montezuma
I'm getting the message that my site is not showing up well on mobile devices (29 posts)

  1. ConsiderThis1
    Member
    Posted 6 months ago #

    Hi CrouchingBruin, I hope things are Excellent with you and you're happy and well and your daughter and her team are Winning!

    http://www.health-boundaries.com/foods-containing-b12/

    I continue to have problems with my pages not loading quickly (enough to get good showings in Google search results). This is the message I get:

    Your page has 10 blocking script resources. This causes a delay in rendering your page.
    None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

    Remove render-blocking JavaScript:
    http://1-ps.googleusercontent.com/…js,qver=3.7.1.pagespeed.ce.NYlqEceGtV.js
    http://1-ps.googleusercontent.com/…s,qver=1.10.2.pagespeed.jm.IA0LeBJnom.js
    http://1-ps.googleusercontent.com/…js,qver=1.2.1.pagespeed.jm.LVTOO3Z2GS.js
    http://1-ps.googleusercontent.com/…s,qver=1.10.3.pagespeed.jm.QBRe4fZgzL.js
    http://1-ps.googleusercontent.com/…s,qver=1.10.3.pagespeed.jm.hUfZpAaYTW.js
    http://1-ps.googleusercontent.com/…s,qver=1.10.3.pagespeed.jm.Yw6-ZZrCmQ.js
    http://1-ps.googleusercontent.com/…js,qver=3.7.1.pagespeed.ce.quJzwd1XMD.js
    http://1-ps.googleusercontent.com/…js,qver=3.7.1.pagespeed.jm.y_zc9B83WX.js
    http://www.health-boundaries.com/…ploads/montezuma/javascript.js?ver=3.7.1
    http://1-ps.googleusercontent.com/…js,qver=6.4.5.pagespeed.ce.3IHzjE-eWo.js

    Do you know what "googleusercontent" is? Only one of these refers to Montezuma... I'm not sure what aspect of Montezuma it is...????

    Also, I'm getting the message that my pages are not showing up correctly on a mobile device... From the message it sounds as if they are not responding... which I thought Montezuma did...

    Here is what the message says, in part:

    Should Fix:
    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 621 CSS pixels wide, but the viewport is only 320 CSS pixels wide. The following elements fall outside the viewport:
    The element <nav id="breadcrumbs1" class="breadcrumbs lw">Foods Containing B12</nav> falls outside the viewport.
    The element <img src="http://health-…-0306-0023.jpg" class="foter-photo mceItem"> falls outside the viewport.
    The element Leeds Museums and Galleries falls outside the viewport.
    The element Foter falls outside the viewport.
    The element CC BY-NC falls outside the viewport.
    The element <p>Famously, the…f vitamin B12.</p> falls outside the viewport.
    The element <p>Mushrooms, som…riginates B12.</p> falls outside the viewport.
    The element <p>On the other h…obalamin form.</p> falls outside the viewport.

    As an aside, I've noticed recently that if I have a page open in my tabs, then leave it and come back later, a lot of things overlap, like the two color words and things in the sidebar go way out into... where they shouldn't.

    Could that be because I didn't update to 3.8 yet? I've been afraid to because it talks about how you should back up your site, first, and I'm unclear how to do that....

  2. ConsiderThis1
    Member
    Posted 6 months ago #

    Maybe CrouchingBruin, who taught me all about php and css, isn't visiting as often as in the past.

    Does anyone know why I'd be getting the message that my site isn't displaying properly on mobile devices???

    Is it because I haven't upgraded to 3.8?

    Karen

  3. LadyPenelope
    Member
    Posted 6 months ago #

    Hi Karen,

    I would ask the question at Montezuma developer support site.

    Penny

  4. ConsiderThis1
    Member
    Posted 6 months ago #

    Right, except in the past when I asked any question there, I NEVER got a reply.

    So, no help, all foul.

    I used to get help on this forum....

  5. esmi
    Forum Moderator
    Posted 6 months ago #

    Try waiting more than 1 day.

  6. ConsiderThis1
    Member
    Posted 6 months ago #

    Okay, but I tried waiting several weeks when I started, I donated to the thingie that said they were more likely to respond... NO response came.
    :-(

  7. CrouchingBruin
    Member
    Posted 6 months ago #

    Hi, Karen:

    From what I could see from doing a Google search, the blocking script resources refer to external Javascript files which are loaded in the head section instead of the footer. That's not unusual, I think most themes load their Javascript in the head as well.

    Do you know what "googleusercontent" is?

    I see you're running a plugin called Google Analyticator; can you try disabling that plugin to see if it eliminates those scripts? If it does, then you can manually add your Google Analytics code to the footer using the Header & Footer plugin.

    I see you're also running W3 Total Cache, and that's supposed to help. From your admin dashboard, can you go to Performance > Minify, scroll down to the JS section, and select Non-blocking using "asynch" and see if that improves your PageSpeed rating? Your desktop rating of 88 is surprisingly good.

    Also, I'm getting the message that my pages are not showing up correctly on a mobile device... From the message it sounds as if they are not responding... which I thought Montezuma did...

    Yes, Montezuma is responsive, and your images will automatically resize as long as the element's styling isn't set to a specific width.

    What's causing the problem on that particular page is the very first image. It is enclosed by a DL element with an inline width of 600px, so no matter how the page is resized, the image is going to remain at 600px; that's what is keeping that particular image from responding properly, and keeping your page from getting any narrower. That element also has a class of foter-photo; are you using a gallery plugin? If you can, make the width 100% instead of a fixed width, and the image will resize properly.

    Also, in the footer of all of your pages, you have a YouTube video for "Drag & Drop Site Builder by iPage." That video is enclosed by an iFrame with a width of 560px, so all of your pages will not get narrower than 560px.

  8. ConsiderThis1
    Member
    Posted 6 months ago #

    Hi CrouchingBruin :-)
    I am SO Happy to see you!!!! I think of you each time I work on my site, and I now have four using this theme. You taught me how to do it. Thank you SO much.

    Ah, the footer. I was going to ask you how you did yours, for the Lady Eagles, but working with what you taught me I was able to figure out how to get a footer with widgets. Thank YOU! I forgot to use it for the Google code because I tried to put the code in before I understood very much. I'll go do that change, now.

    Done! OMG, that is so exciting, I'm nearly trembling with excitement! Happiness!!!!

    Now I'll go try the W3 thing. The W3 forum didn't feel inclined to respond to my questions... I'm so glad you have a clue. When I tried the "minify" thing, it totally wiped out my site, except for the yellow color. This may take me a bit longer, so I'll post this much, for now.

    Again, BIG THANKS!!!

    Karen

  9. ConsiderThis1
    Member
    Posted 6 months ago #

    Oh, wait, I better ask right now... "not set to a specific width" ... does that mean that when I put an image in, I can't use the little boxes that suggest Thumbnail, Medium, or Large (or is it full size???)

    That may be my problem. I didn't realize that would set the picture in stone, so to speak. Sigh.

    Also, I think I need to stop using Microsoft Word to crop my pictures. I just noticed that my pictures are png not jpeg. I don't think that's good.

    What do you use to get progressive jpegs?

    I downloaded something called ImageMagick yesterday, and what happened was my computer became loaded with programs to say I needed to buy registry cleaning stuff, and backup stuff... It took me over an hour to uninstall all the scammy little bits, and all of them aren't entirely gone.

  10. ConsiderThis1
    Member
    Posted 6 months ago #

    Wow, I just got the message about the video in the footer... Thanks. I'll go take it out. Thank you VERY much.

  11. ConsiderThis1
    Member
    Posted 6 months ago #

    Hi CrouchingBruin ~~

    Okay, I think I'm a little confused...

    the image thing... Does that mean that when I want an image on a page and for the page to be responsive, that I need to make the image the size I want BEFORE I upload it???

    And, then does that mean that if I select "Full size" it will be responsive, even though there are numbers associated with the full size of the image????

    Karen

  12. ConsiderThis1
    Member
    Posted 6 months ago #

    Oh dear, I'm very confused about images.

    I've been making images progressive jpgs for the last nearly two hours. And, I've only got two completed because I'm so SO unclear.

    When you ask if I'm using a gallery plugin... does that mean that a gallery would make the images progressive?

    I'm not using one because I thought it was meant for slideshows and art type sites.

    I'm using two different free image plugins, so that the proper credits are associated with images I use. But, I don't know if the images arrive as progressive jpegs, and I don't know if I can convert them and still have the proper credit thing show up.

    Because a huge proportion of my images are completely wrong because I used Microsoft Word to crop them, I thought I'd correct all my pages in alphabetical order, so I don't get confused and miss one... but it's very slow going, mostly because I'm so unsure of what I'm doing... like with the free images...

    I wish I'd asked you this ages ago, before I did 50 pages WRONG.

    :-( Still, It's wonderful to see you!!!! and ... better late than never.
    Karen

  13. ConsiderThis1
    Member
    Posted 6 months ago #

    Okay... so full size seems to be the key. I think I began making the error when my WordPress switched to a medium size and I suddenly got the idea I could choose a size and still have the page be responsive.

  14. ConsiderThis1
    Member
    Posted 6 months ago #

    CrouchingBruin~~~ You have made a HUGE difference to my website... I'm not getting the bad results anymore. Thank you SO much. (and, I haven't even tackled the minify thing yet...)

    Turns out, in case you'd be interested in knowing, that Smush.It makes jpeg images progressive. Smush.It is a plug.in that makes images more loading time friendly, and, they say it's "lossless"

    I'm hoping to be able to contribute to the Lady Eagles soon... really soon.

    Karen

  15. CrouchingBruin
    Member
    Posted 6 months ago #

    Hi, Karen:

    OK, glad you found an image editor. I was going to recommend IrfanView, a free image viewer that will also convert between different image formats as well as scaling images down.

    So in looking at the current state of your page, it seems like you've figured out a lot on your own. Yes, if you insert the image as full-size, then it won't try to set the width & height for you to a specific size (although you can always go in using the Text editor to remove them. Or you can also change px's to a percentage, which will also make them responsive. That is, if you set the width of an image to 50%, then it will always resize to fill up half the width of the container element.

    Another tip to speed up page loads is to make sure your images aren't any bigger than they have to be. Since your main content area is 600px wide, then scaling (or resizing) your images to 600px or less would help.

  16. ConsiderThis1
    Member
    Posted 6 months ago #

    Hi CrouchingBruin ~~

    Excellent to know about the 50% thing. I had no idea. That's super useful to know.

    I downloaded IrfanView ages ago, but it didn't do what I needed at the time.

    Having looked at it now, with your post in mind, I was able to see the programs I use differently. The simple, free, Paint Accessory will work to do the header for my new site. I had thought I'd have to sign up to pay for PhotoShop, but I only use that kind of thing Infrequently, so it was not a happy making thought to spend so much money.

    you are an Excellent teacher.

    I'm able to follow what you say. So many people write things in sort of a cryptic short hand, and I can never figure out what it actually means.

    You are very kind to take the time to write things out in a clear way.
    Thank you.

  17. ConsiderThis1
    Member
    Posted 6 months ago #

    Oh dear, I thought you had a donate button on the LadyEagles page.

    I remember when I was reading on the Montezuma forum, the one BytesForAll, I was so impressed when you wrote that you'd donate when you got paid. I thought that was So Neat!!! I wanted to be able to do that one day,

    but, now there's no button... or, I could be missing it... i.e. not seeing it even though it's there.

    Karen

  18. ConsiderThis1
    Member
    Posted 6 months ago #

    http://www.health-boundaries.com/symptoms-of-low-vitamin-b12/

    I have been trying to figure out how to get either simple dots or something different than the arrows that show up when I do a list.

    Do you know of a plugin, or something I can use to get away from the arrows?

    Karen

  19. CrouchingBruin
    Member
    Posted 6 months ago #

    The simple, free, Paint Accessory will work to do the header for my new site. I had thought I'd have to sign up to pay for PhotoShop, but I only use that kind of thing Infrequently, so it was not a happy making thought to spend so much money.

    I use the free program GIMP (an unfortunate acronym, but it stands for GNU Image Manipulation Program). It has a lot of advanced features, such as the ability to use multiple image layers and image masking, features that you'd only find in a high-end program like Photoshop. In fact, just about anything that can be done in Photoshop can be done in GIMP. There are so many features that it can be intimidating at first to try & learn how to do something, but once you get the hang of it, it's very powerful. There are a lot of online tutorials and YouTube videos to help learn how to do different things. You can see some of the ways I use it here.

    I have been trying to figure out how to get either simple dots or something different than the arrows that show up when I do a list.

    Do you know of a plugin, or something I can use to get away from the arrows?

    If you look at content.css, you'll see this rule:

    .hentry ul li i,
    .comment-text ul li i {
    	display: 				inline-block;
    	width: 					12px;
    	height: 					12px;
    	margin-right: 			10px;
    	margin-left: 			-20px;
    	background: 			transparent url(%tpldir%/images/icons.png) -48px -84px no-repeat;
    }

    What Montezuma does is add the ability to have images for the list bullets instead of the plain dots. It's the same technique which adds stars to the menu items and icons to the sidebar widgets. You can see all of the possible images here. If you don't like the arrow, you can choose a different icon, you just have to know how to set the offset values so it points to the right image. The -48px -84px for the background property means to use the image that is located 48 pixels to the right and 84 pixels down, starting from the upper left corner. On this page, I used different offsets (-84px -228px) to use a checkbox as the list bullet. And if you don't like any of the images in that icon file, you can use an editor like GIMP to edit one of the existing images.

    However, if you do want the original dots for your unordered lists, you can add these CSS rules at the end of your various.css file:

    .hentry ul {
       list-style: initial;
    }
    
    .hentry ul li i {
      	display: none;
    }

    The first rule restores the default image to your list items, the second rule hides the icons that Montezuma attaches to your list items.

    I don't have a donate button on the Lady Eagles page right now; maybe I should think of putting one up there! But thank you for your kind thoughts.

  20. ConsiderThis1
    Member
    Posted 6 months ago #

    Hi CrouchingBruin... that's a lot of information to take in. I've got to go try working with it, to see how... it works.

    I can donate to whatever you like (and, I'd really like to)... let me know where your favorite donate button is...

    Karen

  21. ConsiderThis1
    Member
    Posted 6 months ago #

    Happiness!!!!

    Thank you, CrouchingBruin,

    I now have simple dots.

    I couldn't work out how to do the more complicated images - in the file you posted they were all jammed together. But I don't think it matters, since I've been wanting simple dots FOREVER.

    Thank you!!!!

    Can tags be added to closed posts? I think that anyone starting a Montezuma site would benefit from you help when I started. I wish it had a tag about Beginners or something to show that it explains how to use the css things.

  22. ConsiderThis1
    Member
    Posted 6 months ago #

    Another tip to speed up page loads is to make sure your images aren't any bigger than they have to be. Since your main content area is 600px wide, then scaling (or resizing) your images to 600px or less would help.

    I've been checking all my images ... slow going.

    However, it raises the question: how big should the header image be?

    I'm using GIMP more now, rather than cropping in Word. Thanks for saying you use it. :-)

  23. CrouchingBruin
    Member
    Posted 6 months ago #

    However, it raises the question: how big should the header image be?

    The maximum width of your main content area (blog content plus sidebar) is currently 960px, so anything 960px or narrower should be fine. Height could be as tall as you want it.

  24. ConsiderThis1
    Member
    Posted 5 months ago #

    Hi Crouching Bruin... This is so weird, I thought I posted an additional question, along with a note about the new season of The Amazing Race beginning with the Bruins marching band, which Of Course made me think of you.

    But, I don't see the additional question. Sigh.

    It has to do with margins and space, both in my sidebars and at the top of my pages. I've been pretty stressed over a few things and that tends to exacerbate my brain injury with the result I'm even less efficient. Or, my memory and thinking capacity are...

    At the top of my pages between the byline under the header picture and the stars for the menu items, there's quite a lot of space. Some of my menus are long, so if I could reduce the empty space there would be room for one more menu item to show clearly. Maybe the stars would have to be smaller, too.

    http://www.health-boundaries.com/

  25. ConsiderThis1
    Member
    Posted 5 months ago #

    I've decided that the sidebar thing may be impossible... I had wanted to move groups of ads to align right in the sidebar. I tried Everything I could think of or find on the web... nothing worked, except that sometimes the captions would move right, but not the picture with them.

    I hate when I can't think.

    A few minutes ago the man I hire to help me with tasks like painting and gardening was here and I could not form a sentence. Just his splish splach of words came out, nearly all nouns. Sigh. We never think about how complicated talking is when we can do it... Writing is easier because it's slower, but even it doesn't always work...

  26. ConsiderThis1
    Member
    Posted 5 months ago #

    Maybe the thing to do would be to make the right hand margin of my text area larger... would that be something that's possible?

  27. ConsiderThis1
    Member
    Posted 5 months ago #

    OMG!!!!!

    It's that I make my html for my sidebar by doing Visual in WordPress, then switching over and copying the html...

    So, I keep putting align left images in, and then I can't understand why they won't let me align right by adding html in the Text function.

    I am SO DENSE!!!!

    Whew. Somehow, I think you "inspired" me to find the answer when I posted here... Else, I think I would have kept on doing the same thing, with headache ensuing.

  28. CrouchingBruin
    Member
    Posted 5 months ago #

    Hi, Karen, good to hear from you. I was actually just thinking about you last week. I don't know if you remember, but in one of your questions to me several weeks ago, you asked if the width of the Montezuma theme could be changed. I had replied, "No," that the width was fixed at 960px, unless you changed to a 100% width (i.e., a full width) grid, in which case it would expand too wide for the appearance that you wanted. Well, I finally came up with a solution, and it was so easy that I'm surprised that I didn't think of it earlier.

    So here are the steps, in case you are still interested. It will even help you get more space for your sidebar, too.

    1. Pick a width that is evenly divisible by 12, like 1032, 1056, 1080, etc.
    2. Go to Appearance > Montezuma Options > CSS Settings > Choose CSS Grid
    3. Select a Responsive 100% grid, which would be one of the last five in the left column.
    4. Click the SAVE Changes button at the bottom.
    5. Add this CSS to the end of the various.css virtual CSS file:
      #banner-bg, #main {
         max-width: 1080px;
         margin-left: auto;
         margin-right: auto;
      }

      Of course, change the max-width value to whatever you've decided.

    The main content area (which includes the sidebar) and the header (banner) should now expand out to the width that you specified for max-width, while still remaining responsive and the columns still being proportional. Your breadcrumbs bar and your footer already expand across the entire width, so no need to target those elements.

    If you want to give your sidebar a wider proportion relative to the content, then you'll want to edit your virtual main template files, like page.php. As before, you still have to make sure that the column classes add up to 12, but you can adjust them so that the sidebar takes up a bit higher proportion, like changing the ratio from 8:4 to 7:5 (i.e., col8 & col4 to col7 & col5). But see how expanding the overall width looks, first, from the instructions above.

    If you want to close up the blank space between the tag line and the menu, you'll want to add this CSS to the end of various.css:

    #tagline {
       margin-bottom: 0px;
    }

    This removes all of the extra spacing between the tag line and the menu.

    Glad you were able to figure out the right alignment for the sidebar ads. Take care, hope the coming spring brings you lots of sunshine and less stress.

  29. ConsiderThis1
    Member
    Posted 5 months ago #

    Happiness!!! What a delight to be in contact again!!!

    Thank you, CrouchingBruin!

    That's really interesting about how to change the width. I have a new site that I'm just getting started, so that will be a good place to test it out.

    As an aside, I read through a lot of your other posts and answers here on the WordPress forums. I didn't entirely understand all of them, but reading them gave me a somewhat broader view which in itself can be helpful.

    I'm really glad you're so generous with your expertise!!!

    Karen

Reply

You must log in to post.

About this Theme

About this Topic

Tags