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>
Code:
<!-- CATEGORY IMG -->
<td width="220px">
Code:
<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&view=product&layout=listing&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>
Code:
<!--EO CATEGORY IMG -->
<td valign="top">
Code:
<div class="hikashop_category_right_part">
<h2>
<!-- CATEGORY NAME -->
<span class="hikashop_category_name">
<a href="http://pearblossomfarms.com/index.php?option=com_hikashop&view=product&layout=listing&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 chilies that are ground up (seeds and all), and are little more than bottles of chili-flavored vinegar and water. Dad’s Jalapeno Sauces are 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: .
Code:
hikashop_subcontainer thumbnail td {
so I changed it to:
Code:
.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)
Code:
.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:
Code:
/*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
Code:
<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.
Topic Author
