Need help with Website - Mobile browser compatibility issues

[leenybageeny]

Hi all,

I’m new to this site and was hoping someone may be able to help me.

I am in the middle of creating a website, my skills are rather amateur to say the least.

At the moment I have the website in question displaying reasonably well on desktop browsers, however I have a particular page that has been causing me issues.

It displays as it should on a PC browser, however when I have gone to test it on my mobile browser it’s missing some information.

The page in question is this - www.thehumblewhisk.com.au/pricing.html

I have 3 sections of products I am offering, Macarons, Cupcakes & Tarts.

On my PC browser I can see all three with their clickable tabs as it should be, however on my mobile browser, Macarons is present with it’s two tabs, below it is two areas of white space.

At this point I’m tearing my hair out removing bits and pieces trying to see if I can find the problem, but it’s a bit silly if I have no idea what I’m looking for.

Thanks in advance, any help is VERY much appreciated!

[leenybageeny]

As a side note, I don’t know how to paste the code into the browser if that’s required, I may need a little hand holding… Sorry!

[Gandalf]

Hi there @leenybageeny. Welcome to the forums

I see the validator has found 6 errors with your page. https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.thehumblewhisk.com.au%2Fpricing.html It would be a good idea to fix these and see if you are still having the same probelms.

[leenybageeny]

Thank you, I had no idea I could do that… I’ll give it a whirl!

[leenybageeny]

It seems that for every error I fix, I get 50 more.

I feel as though the errors I am fixing don’t have anything to do with the display issue I am having.

Unfortunately I don’t have the skills for trouble shootings, I’m finding it terribly difficult.

[TechnoBear]

Often, with the validator, fixing one error has a knock-on effect and will solve several others, so the thing to do is to fix a few and then revalidate to see how things are doing. If you don’t understand an error message, ask here for help.

There’s no point in trying to troubleshoot the site until the code errors have been fixed. They may, in fact, be the cause of any problems.

Your code is a very odd mixture of things. You’re apparently using Bootstrap and HTML5, yet you have some tags / attributes in there which have long been deprecated. e.g.

<font size="5">		<main role="main"></font>

<font color="#AE8A71"><div align="center"><div class="col-md-12"></div></font>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font

[leenybageeny]

Thanks TechnoBear.

Yes, I can understand it’s a mix, obviously I have no idea what I’m doing. I google a problem and land on an answer and try it out. It seems to work but may cause other problems I guess.

I think I’m probably up to about error 250 or 300 by now.

I have since removed a lot of those errors… Still working on it.

[TechnoBear]

@leenybageeny

I google a problem and land on an answer and try it out.

HTML and CSS have changed a lot in recent years, so when searching for an answer, check the date it was posted. If it’s more than three or four years old, it may well be out of date.

[leenybageeny]

@TechnoBear

HTML and CSS have changed a lot in recent years, so when searching for an answer, check the date it was posted. If it’s more than three or four years old, it may well be out of date.

Thanks, I think part of the problem could be the program I’m using. I had been jumping between Dreamweaver and CoffeeCup HTML editor to do things like align text etc.

Sometimes when I couldnt figure out the code I’d highlight it and have the program do it which seemed to work.

I guess not!

[TechnoBear]

@leenybageeny

Sometimes when I couldnt figure out the code I’d highlight it and have the program do it which seemed to work.

Sadly, there’s no real substitute for learning things properly. Relying on software to do the coding for you is never a good solution, although I believe these things have got better than they used to be. If you are using an older version, then it is likely to be using older coding methods. Do you have both editors set to HTML5?

[leenybageeny]

@TechnoBear

Sadly, there’s no real substitute for learning things properly. Relying on software to do the coding for you is never a good solution, although I believe these things have got better than they used to be. If you are using an older version, then it is likely to be using older coding methods. Do you have both editors set to HTML5?

I’m reasonably savvy so I definitely do learn as I go, but I do end up a bit hamstrung with some problems I can’t fix. I’ll check the HTML5 setting.

I am stuck with errors on this webpage currently and can’t seem to rectify any of them without different elements going haywire.

[leenybageeny]

Ok, so the error I think could be the one that has something to do with the display issue is this one.

Error: Duplicate ID fh5co-tab-feature-center.

From line 218, column 9; to line 218, column 73

  						<div id="fh5co-tab-feature-center" class="fh5co-tab text-center">		

That feature tab center id is the ID thats thoughout the 2 areas that are not displaying.

The first section that has that id works fine.

The subsequent two do not display on mobile but are still fine on the PC after a lot of error fixing.

Any ideas on how I fix this error? It’s one of the ones that I’m completely stuck on.

[SamA74]

@leenybageeny

I am stuck with errors on this webpage currently and can’t seem to rectify any of them without different elements going haywire.

If there are and specific ones that are tricky, point them out here.
A lot look like incorrect nesting of elements, so the structure will have to change to some degree to fix it.

[Gandalf]

@leenybageeny

Any ideas on how I fix this error?

That’s a tricky one as we don’t know how you got to this point. The problem is that you should only use an id once on a web page. Could you (temporarily) remove one of the divs with the duplicate id and see if it works as you expect on mobile and see if you can fix the other errors? Then, figure out how to re-insert the div…

[leenybageeny]

@Gandalf

That’s a tricky one as we don’t know how you got to this point. The problem is that you should only use an id once on a web page. Could you (temporarily) remove one of the divs with the duplicate id and see if it works as you expect on mobile and see if you can fix the other errors? Then, figure out how to re-insert the div…

Ok thank makes sense… Basically, I started with a template and only liked one bit of a page, so I have copied and pasted the bit that I need 3 times.

There were three sections on a particular page, one had center tabs, one had left aligned tabs and another had vertical tabs to the left. I liked the three tabs centered so copied and pasted what I wanted, deleted the rest.

This is a link to the untouched template I started with. http://thehumblewhisk.com.au/light/elements.html

I have tried removing divs here and there but it seems to make things disappear completely.

[PaulOB]

@leenybageeny

however on my mobile browser, Macarons is present with it’s two tabs, below it is two areas of white space.

I see two clickable tabs on small screen which open and close as required.

Are you seeing something different?

Make sure you’ve cleared cache on your mobile.

[leenybageeny]

That is correct. I should have been more clear.

There should be two more sections underneath it where the two white spaces are.

One for “Cupcakes” with an additional two tabs, then below that “gourmet tarts” with one clickable tab.

The two dividers you’re seeing between the drop down menus for the macarons should have two other sections in them.

This is a screenshot of my dreamweaver screen.

On the PC they display fine.

[SamA74]

@leenybageeny

This is a screenshot of my dreamweaver screen.

Always use real browsers to test your site, that’s where visitors will be viewing it.

[leenybageeny]

@SamA74

Always use real browsers to test your site, that’s where visitors will be viewing it.

I do use real browsers, it’s how I found the problem.

I check chrome, safari, ie, firefox… The page displays fine on all PC browsers. That is exactly how I became aware of the problem. As I was testing it.

The problem became apparent when I was looking at it on my mobile phone. I need my website to be mobile friendly.

I’m unsure as to why you think I wasn’t using real browsers, I was simply uploading a screenshot of dreamweaver to show the PP the content which was missing.

[PaulOB]

I’m not sure if this is what you mean but you are turning those sections off here in your media query.

@media only screen and (max-width: 768px) {
ul.resp-tabs-list {
    display: none;
}
}

Change the above to display:block and they should show.