Hello! So I am having a problem with some whitespace appearing to the right of my site when it is viewed on a mobile screen size. I have seen other people post this same issue but non of their solutions worked for me. This issue was the closest but I did not understand how to apply it to my situation: White space in the right side using mobile device
It seems to look fine on firefox, but with google chrome developer tools (F12) I select the little mobile toggle to see how it looks on mobile and there is the white space to the right.
This brings up another issue that I just now am having. I viewed it in a private window so I do not think it is the cache not getting the updated CSS, but the area near the bottom with the 2 images right by each other is looking different in chrome and firefox. Chrome is showing the incorrect version. The 2 images should be in the middle.
The answer is the same. You have elements that are too wide for the screen and cause a horizontal scroll bar. This will result in white space at the side of the non overflowing elements.
I can see straight away on mobile that some of your images are too wide so you need to make sure they scale to fit in the space available (including margins etc).
I am on mobile only at the moment while on holiday so can’t give you the exact code but the answer will be as stated above. You just need to find those rogue elements and fix them (and any validator errors as mentioned by Ron).
Thanks for the recommendation! I realize this is a problem.
So for the errors it has:
Error : A charset attribute on a meta element found after the first 1024 bytes. At line 73, column 29 charset="UTF-8">↩ <met
To find where the error is occuring it has line 73 listed. But how do I know which file it refers to? I mean header.php or index.php? This is a wordpress site.
I am also trying to develop it locally. Is there an easy way of validating this locally?
Yes, it is. And a majority of the errors are significant, meaning that proper rendering of the page depends on the forgiveness of browsers and all browsers aren’t equally forgiving. That is why it is important to write valid code before trying to fix a display “bug”.
That first error is caused by the presence of the comments at the top of the HTML page that we see. The first line of HTML should be the doctype declaration, nothing should appear before that (except perhaps a php call to a file that contains the doctype declaration). No white space (empty lines). Put the comments elsewhere.
There are a number of stray (mismatched, misplaced, missing) tags. You should be able to clear those one-at-a-time.
There should be only one figcaption tag in a figure element.
The unordered list tags in the footer amount to spaghetti code. The only children of <ul> elements must be <li>. You can then put stuff inside the <li>s.
You will need to do a good bit of reading to learn how to fix bad code and the HTML validator is an invaluable tool for that. However, just so ya know, it is easy to write perfectly valid bad code, too, so one does need to know how to construct proper HTML.
The WordPress files, if unchanged, are probably good.
We do not have access to the php files incuding the one that built this page.
I am moving this post to the WordPress category where you can get help using WordPress. It can then be moved back here for more help with HTML and CSS.
Thanks so much for the reply and help. What I am having the most trouble with is how to see the line in the file. In the error information it has: “From line 58, column 3; to line 58, column 33” What does it mean by column? An .html file is more straightforward regarding this.
Also, what is the easiest way of viewing this information to get the line/column the validator outputs? Just go to the page and do a view source? (Just asking for sage advice)
I use a text editor with a few features that help with HTML and CSS files. I open the web page and view source and usually copy the source to a file for troubleshooting. “Easiest” depends on the coder’s knowledge of HTML, CSS, his environment and tools.
There are still comments and empty lines at the top of the HTML page above the doctype declaration. While no longer invalid, it would be best if they are removed. The two long comments are duplicates, anyway. Delete at least one of them.
The validator highlights the errant code for you in yellow so it is easier to locate.
In this case it is a warning rather than an error but should be corrected if possible (as shown, the “type” attribute is unnecessary).
Warning: The "type" attribute is unnecessary for JavaScript resources.
From line 58, column 3; to line 58, column 33
org' />↩ <script type="text/javascript">↩
corrected:
<script>
The same holds true for warning Num 2.
You might want to know that this line isn’t used any longer and can be eliminated:
The main cause of the white space in that page is the #learnMore button is badly designed and pushes the page out wide. You can fix it by changing the #learnMore styles to this:
That completely replaces your styles for that element.
The html for that button is corrupt anyway as you have half a button tag embedded in the anchor (button elements are not even allowed to be inside anchors anyway). Change the html to this:
<div class="text-center">
<a href="/programs/"class="btn" id="learnMore">Learn More About Aikido</a>
</div>
You also have some images pushing wide so add this also which will make images shrink when needed although you will need to take care of margins in some cases.
img{max-width:100%;height:auto;}
That fixes most of the issue for me but still keep working and tidying the page errors as you go
So the changes suggested worked and I also was able to clear most of the errors. I am thinking it is some issue on my end like a caching problem, but Google Chrome does not display the site correctly and firefox works fine. Any tips for that? Usually using a private/incognito window fixes it.
My main problem right now is in the footer with the “recent posts” area in the middle. I tried to find the file: 'text/javascript' src='https://www.adamherbst.com/aikiconcepts/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2’ - But the file doesnt appear in the jquery folder so I am having trouble getting rid of the “type” errors that are plaguing my site. - Ex: . **Warning** : The typeattribute is unnecessary for JavaScript resources.From line 61, column 1; to line 61, column 143=‘all’ />↩</scri` -
One of my errors is from a plugin I HAVE to use so I am looking at that as well.
errors 6-8 I am having trouble with. I know I am missing something obvious - its a misplaced
tag.
1. **Error** : End tag `li` seen, but there were open elements.From line 192, column 13; to line 192, column 17 ` </li>↩ `
2. **Error** : Unclosed element `div` .From line 176, column 33; to line 176, column 75 ` <div id="footer-sidebar" class="secondary">↩ `
3. **Error** : Bad value `navigation` for attribute `role` on element [ `ul` ](https://html.spec.whatwg.org/multipage/#the-ul-element).From line 213, column 40; to line 213, column 127 `ontainer"><ul id="mobmenuright" role="navigation" aria-label="Main navigation for mobile devices"><li c`
My main problem is locating these issues/errors(especially these “type” attribute errors) using the composed wordpress site (.index.php file that is at adamherbst.com/aikiconcepts )
@adamherbstff,
Have you solved your issues or do you still need help?
(That bottom left image still isn’t visible to me.)
I posted an example of the <script type="text/javascript"> “type” attribute error and the HTML5 fix in post #7. The same simplification applies to <style type="text/css">… it becomes simply <style>
No I am still having issues. I can understand how to fix the “type” error you are referring to, but finding it in my wordpress installation to change it is the actual problem. I t seems that it is only available after the wordpress page is generated. - I am still working on the rest of the errors. I am having some real problems putting in errors 6-7 (the ones with stray <div> and <li>)
I am apparently unable to download the php file. Firefox reads the html version.
Have you tried asking about the type “feature” on a Wordpress support forum? As I mentioned before, I am not a Wordpress person but I searched and found this URL. Perhaps they can offer some help.
If you understand how to write basic HTML and how to format HTML, those two errors should be fairly easy to resolve. I have taken the liberty of formatting that stretch of HTML (notice the uniform indents) so that the open and close tags are balanced. Please compare this HTML to your current HTML and notice the difference.
