Category display uses Tables and breaks on mobile

  • Posts: 198
  • Thank you received: 5
9 years 7 months ago #225270

-- url of the page with the problem -- : pearblossomfarms.com/
-- HikaShop version -- : 2.6.0
-- Joomla version -- : 3.4.8
-- PHP version -- : 5.4.3
-- Browser(s) name and version -- : Chrome
-- Error-message(debug-mod must be tuned on) -- : n/a

At the site pearblossomfarms.com/ my client very specifically wanted the layout that is currently visible on the home page. That category layout is not responsive and looks terrible on a narrow screen because it is enclosed inside a <table>

I am using the Joomla default template "Protostar" because the site is so simple it didn't seem worth it to make the site any heavier and the only thing I have added to protostar beside Hikashop and the usual security/backup software is a Megamenu component. All the rest is default.

The home page of pearblossomfarms.com uses a Category Display module to display the top level categories in the shop with a picture to the left and the title/text to the right.
On a desktop browser it looks exactly like what my client wants.

Problem is that for some reason it is rendered as a table. So when the same display is viewed on a narrow screen the Category image doesn't scale and the text remains to the right of it, becoming narrower and narrower until the whole thing looks ridiculous.



I don't see why that layout even needs a table. But I have tried to change a number of parameters and the only option seems to be rewriting the view of the category display, which is frankly a lot of work.

Have I missed some setting that will allow me to display my top level categories in the same fashion but using a mobile friendly, responsive layout without tables?

Should I be stuck with tables, could I at least eliminate the cells inside a <tr> so that on a narrow screen I end up with the category picture above or below the text instead of the current, very ugly side by side layout?
If so, what file should I be looking for, if anyone knows.

Please, keep in mind that the desktop layout is exactly what my client wants. No changes should be done there.

Thank you.

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 4820
  • Thank you received: 654
  • MODERATOR
9 years 7 months ago #225300

Hello,

A more simple way is to use Css custom code.
For this :
- Reach your css see this tutorial to know how to proceed.
- add at the end of this css file this code :

@media only screen and (max-width: 530px) {
.hikashop_subcontainer thumbnail td {
display: block;
margin-top: 10px;
}
}

Note : @media command able you to define css rules only under 530px width screen, and so replace it with same width where troubles appears.

Hope that will help you

Regards,

Last edit: 9 years 7 months ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 198
  • Thank you received: 5
9 years 7 months ago #225397

I am going over a couple of things so I removed my post for the moment. The CSS doesn't appear to be working and the way the page is coded seems to go against the most basic principles of responsive design but I want to give it another shot so for the time being I am removing my response.

Last edit: 9 years 7 months ago by conticreative.

Please Log in or Create an account to join the conversation.

  • Posts: 198
  • Thank you received: 5
9 years 7 months ago #225398

The CSS doesn't work. I added it to the shop as in the tutorial, then I added it as a overall rule, as an inline rule to the <td> tags. I simply don't see how I can take this:


<tr>

<!-- CATEGORY IMG -->
<td width="220px">
<div class="hikashop_category_left_part" style="text-align:center;">
				<div style="height:190px;width:190px;text-align:center;margin:auto" class="hikashop_product_image">
					<a href="http://pearblossomfarms.com/index.php?option=com_hikashop&amp;view=product&amp;layout=listing&amp;Itemid=152" title="Jalapeño Sauces">
						<img class="hikashop_product_listing_image" title="" alt="" src="/media/com_hikashop/upload/thumbnails/190x190f/group_dads_1679676286.jpg">					</a>
				</div>
			</div>
</td>
<!--EO CATEGORY IMG -->
<td valign="top">
<div class="hikashop_category_right_part">
				<h2>
					<!-- CATEGORY NAME -->
					<span class="hikashop_category_name">

							<a href="http://pearblossomfarms.com/index.php?option=com_hikashop&amp;view=product&amp;layout=listing&amp;Itemid=152">
								Jalapeño Sauces							</a>

					</span>
					<!-- EO CATEGORY NAME -->
				</h2>

				<!-- CATEGORY DESC -->
				<span class="hikashop_category_desc" style="text-align:left;">
					<p><img style="width: 207px; float: right; margin-left: 10px;" alt="Dad-1-15-07" src="/images/about-us/Dad-1-15-07.png" width="188" height="179"> Dad’s Jalapeño Sauces are distinguished by the flavor of fresh jalapeno peppers. Most hot sauce products are made from dried&nbsp;chilies that are&nbsp;ground up (seeds and all), and are little more than&nbsp;bottles of chili-flavored vinegar and water. Dad’s Jalapeno Sauces are&nbsp;made from fresh chilies, and they taste like - fresh chili.</p>
				</span>
				<!-- EO CATEGORY DESC -->
			</div>
</td>
</tr>


and place the <td> from side by side to vertically stacked.

I also don't understand why each category is a div that contains a <table> that then contains 1 <tr> with 2 <td> inside. Makes no sense for a responsive design. Also, if I remember my basic CSS, <td> are neither "block" or "inline" but their own thing. I have never seen any CSS that was able to take 2 side by side <td> and stack them vertically, which is what is needed in my case.

If that's possible, I apologize. But I was skeptical before inserting the css in the response to my OP and I am even more skeptical now that it didn't work. I left the code at the bottom of the CSS file, anyone can check. Additionally, I inserted the same code directly in the <td> as a style. It did nothing (using firebug).

Also, I had a feeling that something was missing here: .
hikashop_subcontainer thumbnail td {
so I changed it to:
.hikashop_subcontainer .thumbnail td {

Making "thumbnail" a class. In the original the leading dot . was missing. Regardless, it didn't work.

I think what I am going to do is to go and find the code for that page and strip io of the table. The only thing that table seems to be doping is to separate the Category Image and the Category description in 2 columns. I can do that better with 2 <div> and some CSS and make sure they sing and dance the way I want them on every screen I choose. Tables are not flexible enough for these purposes even if there is some crazy CSS that can take 2 adjacent cells and stack them.

I honestly wished your CSS worked, because it would have saved me a lot of time, but I have never seen CSS being able to accomplish what I am asking here, which is to stack cell 1 on top of cell 2. The only way I know to do that is by wrapping each in a separate <tr>.

That would not work for the larger @media screens so the only thing I have left to do is to eliminate the table. I am sure there is a purpose to it (and I'd like to know it if anyone is aware) but for what I need to do it is in the way and prevents me from presenting the category list the way I want.

Thank you very much. I do appreciate the response. Also I expect to stand corrected if I made any mistake in the execution of the code.

EDIT: I was able to find the page in question and take out the table. A few lines of CSS have made it so it works fine in most browsers/platforms, but I'll have to fine tune the CSS and do more testing later. I am aware it's not yet perfect. But it is a sight better than it was before on small screens.

This is the CSS I used for the desktop view above 700px (more or less)
.hikashop_category_left_part {width:190px;float:left;margin-right: 10px;margin-top: 10px;}
.hikashop_category_right_part {
	padding-right:10px;
    width: 450px;
    padding-left: 10px;
    float: left;
}

Naturally, on smaller screens I changed it as needed. FOr vertical mobile I changed it to:
/*CATEGORY VIEW**************************************************************************************/

.hikashop_category_left_part {width:190px;float:none;margin: 10px auto;}
.hikashop_category_right_part {
	padding:10px;
    width: 100%;
    padding: 10px;
    float:none;
}
	#hikashop_category_information_module_99 div.hikashop_subcontainer, #hikashop_category_information_module_99 div.hikashop_subcontainer h2 span  {text-align:center!important;}
	#hikashop_category_information_module_99 div.hikashop_subcontainer span {
	text-align: justify!important;
}
	.hikashop_category_right_part img {display:none; }

I also had to add a
<div style="clear:both"></div>

before the end of one of the divs (the one that creates the border around the category) so that the border would wrap around the content . Other than that it was as simple as getting the table out of the way.

Last edit: 9 years 7 months ago by conticreative.

Please Log in or Create an account to join the conversation.

Time to create page: 0.165 seconds
Powered by Kunena Forum