Stylesheet Colors Change Not Applied To Tablet

Hi,

I have recently upgraded to v.1.5.8 and am using the default template. I have made changes to the Nav Breadcrumb by changing the charcoal band to a white (in stylesheet_colors) and they have applied perfectly to my site viewing it on desktop and on my Android phone.

I received an email from a friend this morning that this change does not show on her iPad and the Nav Breadcrumb area still shows the band as charcoal. Had her clear her cache and still shows this way.

I have looked at the responsive_tablet stylesheet but cannot seem to find the code to make this change....and truly not sure if this would make this change.

Could someone point me in the right direction to make this change??

Thanks in advance for your help!

I have also taken a look using the inspection tool on Firefox and see that in the responsive mode it takes my footer and places it up on a Right column beside my product as shown in this image.Attachment 20375

Any thoughts on why it would be doing this in tablet but showing correctly in desktop??

Thanks again.

On your desktop, try loading the desired page(s) with the following additional url parameter:
&layoutType=tablet

That will force the associated mobile template files to be loaded. May still need to adjust the window size to get the desired layout affect, but at least the applicable css files will be incorporated.

Thanks mc12345678 for this! I will give this a go and comment back....

Hi mc12345678,

I think what is happening is not related to changes needed to the stylesheet, but how the tablet display is functioning. When I look at my site in a tablet display, it it taking my footer and placing it in a right hand column, which is also showing the large bands of charcoal and light grey which span the site width.

Can you tell me why it is displaying my footer in this manner, when the desktop and phone work showing the footer at the end (bottom) of the page??

Thanks again!

Quote:

---

Originally Posted by NWCE

Hi mc12345678,

I think what is happening is not related to changes needed to the stylesheet, but how the tablet display is functioning. When I look at my site in a tablet display, it it taking my footer and placing it in a right hand column, which is also showing the large bands of charcoal and light grey which span the site width.

Can you tell me why it is displaying my footer in this manner, when the desktop and phone work showing the footer at the end (bottom) of the page??

Thanks again!

---

FWIW, in Firefox and experimenting with various mobile/tablet layouts I don't see anything wrong with your footer - it displays as it should.

Thanks for your reply Simon1066! I am also using Firefox and the display (when adding the &layoutType=tablet to the end of a product page) shows as in the image I included in post #2. Have tried refreshing, etc. to insure it isn't cached somehow....still showing the footer as if it was a right side column. Would it have anything to do with screen size, so my display would be different as it would be displaying as 100%, which would be different for different screen sizes???

Quote:

---

Originally Posted by NWCE

Thanks for your reply Simon1066! I am also using Firefox and the display (when adding the &layoutType=tablet to the end of a product page) shows as in the image I included in post #2. Have tried refreshing, etc. to insure it isn't cached somehow....still showing the footer as if it was a right side column. Would it have anything to do with screen size, so my display would be different as it would be displaying as 100%, which would be different for different screen sizes???

---

I have now been able to reproduce what you're seeing. Alas, I don't have an answer to hand. The footer shifts when simply resizing the window on a desktop PC, with or without "&layoutType=tablet" appended and without inspecting the tablet view in dev tools.

I think that a more knowledgeable person than me will need to see a link to the site (I was prepared to deduce it from your screenshot). Late for me here - so I'm away.

For further understanding, when said recently upgraded to 1.5.8, is that to the base version of 1.5.8, 1.5.8a, or whatever changes had been made to that version after the release of 1.5.8a?

I don't want to go evaluate an updated base site to find that the issue had been addressed in a yet applied version. I also know that I haven't deeply inspected the main page rearrangement of 1.5.8; however, historically the footer often was made in some way different on non desktops though not usually to become a side box.

As far as the issue occurring on a tablet itself, any indication of whether the issue occurs in portrait or landscape view? Both?

Thanks for your continued reply mc12345678 and sorry for the delay in response as I had to wait on my friend on the portrait and landscape question as I don't own an iPad.

I am using v.,1.5.8, not the newest v.1.5.8.a on my site, and according to my friend, this problem of the footer display is both in landscape and portrait views.

I hope that this info helps to further diagnose why the footer is displaying this way on tablets.

Thanks again!

Quote:

---

Originally Posted by NWCE

Thanks for your continued reply mc12345678 and sorry for the delay in response as I had to wait on my friend on the portrait and landscape question as I don't own an iPad.

I am using v.,1.5.8, not the newest v.1.5.8.a on my site, and according to my friend, this problem of the footer display is both in landscape and portrait views.

I hope that this info helps to further diagnose why the footer is displaying this way on tablets.

Thanks again!

---

So, what I'm seeing is that on many of the main pages of your site, the template is appearing correctly; however, on the product information page(s), this is where there appears to be an extra </div> tag or perhaps "misplaced" tag. For some reason (possibly due to some other page modification) the code section containing the following:

Code:

---

<div id="navSuppWrapper" style="max-width: 100%; margin: auto;"><div id="navSupp">
<ul>
<li><a href="Site URL">Home</a></li>
  <li><a href="Site URL/index.php?main_page=specials" rel="noreferrer noopener" target="_blank">Specials</a></li>
  <li><a href="Site URL/index.php?main_page=contact_us" rel="noreferrer noopener" target="_blank">Contact Us</a></li>
</ul>
</div>
</div>

---

is inside of the tag when it should be outside of it as seen everywhere else.

And as I've tried to back through the code for the expected placement(s) of the tag and attempted to visually edit the inspection screen, I'm not seeing where the imbalance is located. I'm running on fumes at the moment, but it appears as I said that there is some modification to the product information template that is affecting the html layout.

Hi mc12345678....thanks for taking a look at this!

I am not sure why there would be a code modification such as this.....as I had added the specials and contact us to the footer via EZpages in the Admin. Is that not a correct way to do this?? I have tried turning off the Contact Us and Specials in the footer (and having them only in the Nav Bar) and this did not make any difference to the tablet display....it is still displaying the footer incorrectly as I had shown in my previous image.

I have looked for this code in tpl pages in my custom folder (using Developers Toolkit) and cannot find this code. This code only appears in /common/tpl_footer.php Can you point me to where you see this???

Thanks again

Quote:

---

Originally Posted by mc12345678

... but it appears as I said that there is some modification to the product information template that is affecting the html layout.

---

Butting in... @mc12345678 is referring to includes/templates/mcsite23/templates/tpl_product_info_display.php, check for any changes you may have made to this file, especially check for missing <div> or </div> tags.

If that is unsuccessful I would suggest working through the HTML errors on the product page - doing so might shine a light on the issue (aswell as being worthwhile from Google's point of view), enter the URL at this link and you'll see what I mean, https://validator.w3.org/nu/

If the above take a while then in the meantime I believe adding 'clear:both' to /includes/templates/mcsite23/css/responsive_default.css, line #380 will work (check other pages to make sure this doesn't affect them)

Code:

---

div#headerWrapper,div#navSuppWrapper {width:100%;margin:auto;clear:both;}

---

Thanks for your suggestion on combing through the tpl_product_info_display.php I will do this and post back what I find out.

I have now gone through my tpl_product_info_display.php file and I have confirmed that there are no opening <div> tags without closing ones. The only modification to this file was the addition of the Advanced Cross Sell II code near the end of the file.

I very well could be mistaken, but there is obviously a call somewhere to display the footer on the Product Info page (in tablet mode) and it is misplaced in terms of its location. When it displays on every other device it works well but on tablet it does not. Is there a file that specifically deals with tablet mode display?? Could it be in there??

Thanks again for the help.

Quote:

---

Originally Posted by NWCE

I have now gone through my tpl_product_info_display.php file and I have confirmed that there are no opening <div> tags without closing ones. The only modification to this file was the addition of the Advanced Cross Sell II code near the end of the file.

I very well could be mistaken, but there is obviously a call somewhere to display the footer on the Product Info page (in tablet mode) and it is misplaced in terms of its location. When it displays on every other device it works well but on tablet it does not. Is there a file that specifically deals with tablet mode display?? Could it be in there??

Thanks again for the help.

---

i think if you look at simon's post above, he recommends using an online validator.

i would use the on-line validator to ensure that you have valid html code prior to continuing.

looking at the code will not tell you if you have a stray div or if you have valid html.

it's must easier using a validator tool.

best.

Thinking about it a little more, some of the changes in software versions had also been to attempt to remove html from language file defines. Depending on how the latest upgrade was performed it could be possible that some product_info language define desired to be kept also had html in it. Trust me I'm shooting spitballs here. I agree, using an html validator would make the inspection easier. Might suggest also inserting some inane html code at desired locations to be able to track the impact of review.

Part of me also was wondering about the possibility of some sort of imbalanced php closure such that some tag or another is unfortunately outside of a grouping. Again, spitballing.

If resolving the HTML errors doesn't help, it would be worth switching templates to confirm that the error is indeed within the mcsite23 template files.

and there's this: https://docs.zen-cart.com/user/troub...d-odd-problems

Thank you both mc12345678 and simon1066 for your continued suggestions and replies!

I will work on using the online validator and continue to comb through things as well. If you guys think of anything else to try or if I find the error I will post back.

Thanks again!

I have used the online validator and there were no errors causing this display issue.

The results show several:
- Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.
- Alt attribute on image is empty
- The type attribute is unnecessary for JavaScript resources.

Just wanted to update on the results of this.

In having the Footer display like it is being placed the right column (when in tablet view) I changed the Column Right Status - Global in Admin->Config->Layout Settings and it now display the footer at the end of the page, but it made the entire page color #333. As shown in the image, it makes the page illegible, so I have changed this back, but thought it may give you guys some other ideas on what may be occurring?? Attachment 20380

I will see if I can make changes to responsive_tablet.css to make the charcoal color white....and this would solve everything.

So I've found a decent solution for this problem!

I have changed my Admin->Config->Layout Settings-> Column Right Status Global to 0 so there is never a right column. (Never use it and it made my site center column a little larger and easier to view....so very good improvement)

I then separated out #navSuppWrapper on line 49 of stylesheet_colors.css and set the background color from #333 to #FFFFFF and it worked! I now have changed this large background charcoal color to white so the site is legible and displays the same now on desktop, phone and tablet views.

The only small change that it affected, was now when you look at the footer, the previous view showed it as a charcoal bar with white writing. It is now a white bar with white writing.....but I can live with this as the pages it directs customers to are all in the main nav bar at the top of the site anyhow.

Thank you once again mc12345678 and simon1066 for your help and working through this....it helped to solve this!

Awesome to hear, though would still like to here understand what was going on to maybe reproduce the issue and see if there is something yet to address.

Unfortunately, when I used my mobile device to try to access the tools layout settings, I didn't see the global setting that you described. I assume I was looking in the wrong place though I also know that those having created the admin pages have in some places chosen to hide options on mobile devices so I'd like to ensure I'm searching the right places. Then, there is the question of what side boxes you had on the right side and in what order. Is also possible that one of them has or had something incorrect in their html. I recall running across some issues a few years back with some side boxes.

As to your new css issue, well could always make further adjustments to restore that as well. :smile:

Hi mc12345678....I hope that you were able to access the Admin->Config->Layout Settings-> Column Right Status Global from a desktop to see what I've seen as well.

I have had no right sideboxes turned on at all, only left. This was why I was able to make with the change to the Column Right Status Global without any worry about it.

I stumbled upon this fix as it seems to me that footer is being placed in the right column when viewed with a tablet. It worked fine on a phone, just tablet. This got me thinking that since I don't use the right column anyhow, was there a way to turn it off....and I came across this setting when searching the forums. As soon as I changed this, it fixed the footer display to place it at the bottom of the page once again.

I am thinking that there must be a code placement for the footer in the Responsive_Classic files that is telling the site to display the footer this way when in tablet view. If one could find the right .php file where this code is I think it should fix this.....a little over my pay grade.....but just a thought.

Thanks again for your help....it is much appreciated!

Quick other mention.....I know that so many times when helping someone it boils down to their error because they made changes they're not telling you. I just wanted to say that I have made no changes to the Reponsive_Classic template. All of my changes or Add On Plugins were done with the Template_Default files.

The only "change" I have made to the Footer was to create a couple of EZ Pages to have the links to the Specials and Contact Us appear in the Footer.

Just wanted to mention this in case you were looking into this further.

Quote:

---

Originally Posted by NWCE

Quick other mention.....I know that so many times when helping someone it boils down to their error because they made changes they're not telling you. I just wanted to say that I have made no changes to the Reponsive_Classic template. All of my changes or Add On Plugins were done with the Template_Default files.

---

This may well be a part of your problem. If your site is set to use responsive_classic and not a clone thereof, the system will ONLY look at template_default if the same file is NOT in responsive_classic. You are modifying backwards.

Here's the steps I would do when creating a new site using 1.5.8 and responsive_classic:

1. install clone a template from the Plugins
2. clone responsive_classic to resp_yoursite
3. use Template Selection to change the active template to resp_yoursite
4. use the Layout Boxes Controller to set the sideboxes, banners, searches, etc. to your desired settings
5. in includes/templates/resp_yoursite/css folder, I would review and implement any of the steps at https://docs.zen-cart.com/user/customizing/appearance/
6. if I am using 1.5.7d or lower, I would add a file called stylesheet_zcustom.css to the includes/templates/resp_yoursite/css folder

After doing these steps, you have a site ready to customize AND a basis (the original responsive_classic template) to fall back on for testing.
Now, all your images, define_pages, etc should be placed in the same resp_yoursite folder as the file you are modifying.

You can see an example of updating a file for a cloned template at https://docs.zen-cart.com/user/new_u...ngratulations/

The system should always find the most current information for site design and display in the CURRENT template.