I am NOT a CSS guru. I am hoping there is one here on the forum. My clients website styling is a mess. My dead brother started it then I added to it.

The issue I have is that on the proddetail.php page I cannot figure out a way to get the description panel & tab area to scale in size to match the content and to always be positioned directly under the buy button. On short description products or sometimes reviews the description panel overlaps the footer area. In some product individual item pages on mobile size browsers the tab panel is directly under the buy button and other product items the tab area is 200-300 pixels below the buy button. Same with the spacing below the tab panel. On some product pages there is 200-300 pixels below the tab panel area and others the tab panel overlaps the footer area.

I guess my questions are how to always have the tab panel directly under the buy button and have the tab panel expand to fit the tab contents height.

I realize without looking at the code it will be hard to help. But I thought I would ask to see if anyone had any suggestions on where to start.

Thanks in advance.

Ray Cramblit

Hi Ray

Would it be possible to share the URL of the page so we can take a look?

Andy

Please feel free to review / rate our software

More supporting details:

My client uses iPhone's. They say their description panel is offset to the left on their screens. My 3 grandkids have iPhone's of different ages and they say it is fine. The client posted on Facebook and people who replied say the description is offset to the left in portrait view only. I used Chrome resetting the user-agent to iPhone's of different models and all is centered correctly. The client says some product pages are centered and others are not. All pages are centered correctly on my Android phones.

The second issue is the positioning and footer overlap I mentioned in the original post.

Here is a link to one of the interior product pages:

https://www.communitycandlesupply.com/proddetail.php?prod=JJ8

I know the CSS is a mess. If I thought the client was going to stay in business for a while I would redo the entire site styles but they are talking about retiring.

Thanks for any help or advice.

Here is a link to a product page that has a huge space above the description tab and overlaps the footer area by a foot.

https://www.communitycandlesupply.com/proddetail.php?prod=AOR

Ray Cramblit

I 'm afraid the css and structure is a bit messy.

As a test can you save about.php as proddetail2.php and replace the about content with the incproddetail include line. Then go to https://www.communitycandlesupply.com/proddetail2.php?prod=AOR and see if the problem exists. That will tell us if it's a css or div structure question.

Andy

Please feel free to review / rate our software

I saved about.php as proddetail2.php and replace only the about include on the new proddetail2.php with the proddetail.php include as follows:
<?php include "vsadmin/inc/incproddetail.php" ?>

With Chrome user-agent as iPhone S6 and using the Chrome Responsive Web Design Test plugin the description area is centered but the layout is shuffled around. Here is the new URL:

https://www.communitycandlesupply.com/proddetail2.php?prod=AOR

It looks like it's some of my "quality" CSS that is the problem. The new page does not have either the top margin issue or the overlapping the footer issue either.

If the page had the image and form data on the top, the tabs and border around the description area styled that's probably the solution to the problem I have created for myself.

Here is a link to another product page with the form fields on the bottom of the page:

https://www.communitycandlesupply.com/proddetail2.php?prod=JJ8

Sorry, I forgot - the page will be missing the 2 lines for the tabbed panels css and js files. Can you copy those from proddetail.php and see what you get?

Andy

Please feel free to review / rate our software

Adding the Spry css & js files moves the tabs and form to the top, adds the border and background color to the description area but now the description area is not centered, the top margin is screwed up and the description area is again overlapping the footer.

Can you put back the standard tabbed files from our download page and remove any tabbed css content from your main css file.

Andy

Please feel free to review / rate our software

I went back and found one of the Spry...css files from 2009 and it works perfectly. The colors were wrong and I edited the new (old) Spry css file and it seems to solve ALL the issues except the options form and buy button are below the description section.

If you can instruct me on how to move that content area above the description area I THINK all would be working as the client expects.

Is moving the options form and buy button area difficult? If not can you give me "detailed" instructions on how to move them? Pretend you are dealing with a ten year old and maybe I will understand.

The easiest way is to use the css layout feature where you can define and order all the elements on the detail page https://www.ecommercetemplates.com/help/css-layouts.asp#proddetailorder

Only list the elements you want to display on the page and in the order they should appear.

Andy

Please feel free to review / rate our software

Thanks for all your help. I REALLY appreciate it! The layout is working perfectly now.

Glad you got it all working

Andy

Please feel free to review / rate our software