How to make product page responsive

-- HikaShop version -- : 2.3.4
-- Joomla version -- : 3.3.6
-- PHP version -- : 5.4
-- Browser(s) name and version -- : Google Chrome

Hi,

I updated Hikashop and now would like to make the prodcut page responsive with the template. But on joomla33.volkan-watches.com/watches/male-collection inside hikashop_container > hikashop_subcontainer hikashop_subcontainer_border I have:

element.style {
height: 400px;
text-align: center;
clear: both;
}

and inside the element style:

element.style {
position: relative;
text-align: center;
clear: both;
width: 264px;
margin: auto;
}

where are the settings for those element style - or how do I achieve that I simply want to display 3 watches in a row without specifying the widht or height in pixels?

Thanks

Hi,

Thanks I use a Yootheme template and sorry I did not understand at all what you explained me.



I added the custom css and it is still not responsive.

1. )The images do not fit in hikashop_subcontainer hikashop_subcontainer_border
when I untick the element styles width - the watches do fit in hikashop_subcontainer hikashop_subcontainer_border and where is this element style created - when I usually have an element style it is created in the extension and not in bootstrap? Please have a look at the screenshot.

2.) When looking at the page on mobile the watches are not below eachother but next to eachother and do not fit they overlap eachother...
The rest of the template behaves responsive on mobile except this product page doesn't

Thanks for clarifying

Hi Sven,

Other than YT templates not being Bootstrap (they use their own UIkit instead and have only a "micro" portion of Bootstrap included), you're using YT's Big Easy, a template from 2011 which is not responsive. Look what your other pages do if you downsize the browser window: nothing.

I saw on the YT forum that they told you there already as well. So, for as long as you use this template, you would have to go through coding hell to make anything responsive on your site. Nicolas is right, of course, but you'd have a LOT more to do if you wanted to make Big Easy "responsive"...

With the choice(s) you've made, it is what it is. Sorry.

Hi

Thanks - but before you respond please look what the pages does when you look at it on a mobile device as simply resizing your browser window will not work - but looking at it on a mobile device does! And you will see it works. except for the category page showing the products I mentioned.

And then please come back to me.

Hi again,

Well, it still remains a template-specific issue (or better "limitation"?). Per common definition, it's hardly "responsive" but, by using a different method, rather "adaptive". Means you'll need to address it by either utilizing the template features (which sends you back to YT), or applying CSS as per Nicolas' hint.

So, nothing wrong with what has been said so far. Anyway, good luck!

Hi,

I added the CSS custom style mentioned by Nicolas and the page view does not change on a mobile device...

If the mobile device is wider than 700px, sure, it won't do anything then.

So, you'll need to apply different CSS. And probably much more than the one Nicolas gave you... for different elements, different browser/screen widths, etc, etc. Shouldn't be a problem for you since you're a web designer.

Dear Lousyfool,

If you want to help then that is fine - but it seems you have some other issues...

I sent two questions including a screenshot.

One concerns the view on a normal desktop computer - just look at the screenshot and please answer my question - instead of telling me that I could do all myself because I am a web designer... that is beseides the point.

Secondly I can set the max width to 100px or 200px or whatever px width and the products on the category page stay parallel 3 in a row and not stack as they should.

As I pointed out before it would really help if you looked at my problem seriously... at least this is what I expect when buying an extension.

Nothing personal, no issues - just another HikaShop user here trying to help and reduce the burden for the "official" support team, so they can focus on further improving the extension.

So, let's continue looking at your problem seriously.

1. It's caused by the template, not by the extension.
2. To solve the problem, you have few options:
(a) Apply CSS with media queries to achieve "quasi-responsiveness". What's to happen at which screen sizes is your decision, and determines the code to be written and the amount of work.
(b) Edit HikaShop views and include UIkit grid classes (assuming they are included with the template).
(c) Take a look at this link about making WARP 6 templates responsive , but please keep in mind that I haven't tried this, so I can't comment any further on it.

As already indicated, I fear anything under point #2 will need to be figured out and done by yourself, but then you have been dealing with a number websites already, and you're well familiar with YT templates, WARP, UIkit, etc. - and seriously, I mean it. No kidding.
However, I'm sure that in case of you needing further help with a specific step in the process, you'll be supported either here or at YT, depending on where it belongs.

Cheers!

One more thing regarding the images not fitting the containers in the product listing:

This CSS should fix it - at least it does in my Firebug:

.hikashop_product_image_subdiv {
    width: auto !important;
}

Hi Nicolas,

1.) Thanks you were kind but it did not work so I took your code out of the custom.css - now I added it again and it is still not working on a mobile device - the watches show next to eachother - please check on a mobile device (not resizing the browser window). If resizing the browser window they are stack but each box is 888px wide but they should not be wider as the browser window...

2.) Thanks lousyfoul I know I can add .hikashop_product_image_subdiv { width: auto !important;} but I do not want to add !important - I rather would like to know where the inline styles are created:

element.style {
height: 400px;
text-align: center;
clear: both;
}

element.style {
position: relative;
text-align: center;
clear: both;
width: 264px;
margin: auto;
}

If somebody can tell me this I could avoid the !important - and make it clean.

3.) Update Warp 6 to responsive - Thanks for the link - (I make this for a client who wants to save money... so changing a warp 6 template to responsive template is even more complilcated and expensive than simply taking a new warp 7 template but that is besides the point)

I thought I can use this Warp6 template with its mobile css and views to make the page work in the mobile view.. and it does except on the page I told you it doesnt...

So if anybody has an idea how to make it work let me know.

Me again...

1. If you did add the CSS code again, it would be visible (and functional) also when resizing a desktop browser to <700px, as it would then override the "width: 31.9149%;" presently coming from your bootstrap.css.
But it isn't visible, and hence neither functional.
If I add it to your site via firebug, it works well - though it'll require more code for adjusting margins, of course.
Since we can't add the code ourselves and be able to test it on a mobile, there's nothing anyone here can do unless you add it to the live site.

2. The in-line styles are applied in the view "product / listing_img_title" for your frontend template, lines 17 and 18. If you haven't played with the "view system" yet, here"s a good read on that: www.hikashop.com/support/support/documen...-display.html#layout
Your decision, of course, but I can't see what's in the way of using the suggested CSS. It simply works and doesn't do anything bad since it's a unique class which it is applied to. But again, your call.

Oooops, just loaded your product listing again, and guess what... now Nicolas' CSS is there!

And indeed, it doesn't work on e.g. an iPhone.
Which leads you back to YT: you should ask them why media queries don't work with WARP 6 on mobiles.

EDIT: You didn't include the " !important". Try it with that included?

Regarding 1.:
Not sure why, but nice guy here has done some more (research) work for Sven:
yootheme.com/support/question/72750
Quote from official YT support:

The Warp 6 template Balance offers a "mobile" layout which is triggered by the [b]browser agent[/b] alone.
But technically it is [b]not responsive[/b], meaning it does [b]not[/b] use CSS @media queries to change the layout based on the resolution.

...don't make me fall in love with you I love product information and even read them before posting here

1. When reading the code on line 17 and 18 it tells me that the inline style is taken from the main thumbnail... Which I guess in this case would be in System > Main > Images

Now if you look at my screenshot I have not entered any width or height in any of these settings so where is the inline style coming from - as I cannot see a default witdth or height in the code?

And yes I do know that !important does not harm anybody - but I really try to understand where this inline style is coming from and if I know that I do not need to enter any !important... that's all.

Ok, if you don't tell the truth ("I love product information and even read them before posting here"), then I can break my promise ("this is guaranteed my last post in this thread") and comment again...

Look here: www.hikashop.com/support/support/documen...fig.html#main_images
Under Thumbnail width and Thumbnail height it says at the end:
"However, for each hikashop menu/module you created, you can define a specific image size by editing them via the menu Display->Content menus/modules"

So, please check if and what sizes are set there.

It seems you finally read my initial question .... - I read the docs but did not find this part and thought I could find some help here.

In the end, after 3 days I found the answer - which is great but do you really need to offend people like me who ask for support and did not find a part of the docs? And yes I searched in the forum but did not find the answer (according to you I am lying) - I must have overseen that part...and therefore asked for support - that is what support is here for or not? Is it really necessary for you to get personal - I received help in the end but had to listen to your comments - that I am lying, that I should look things up with the search function or in the forum, that I am sensitive, that for you this thread is closed and that you already thank me for my thank you.. a.s.o..

if that is the way you want to be treated then fine - but others might think differently. That is probably the reason why you are using a name like lousyfool and not your real name - to offend people without being recognized...

my initial question how to make it responsive was answered by nicolas - I know warp 6 is technicaly not responsive but uses a mobile css and layout system... however since now also the second part of my inital question is answered I am happy... almost as I explained you above.

Hi,

I updated Hikashop and now would like to make the prodcut page responsive with the template. But on joomla33.volkan-watches.com/watches/male-collection inside hikashop_container > hikashop_subcontainer hikashop_subcontainer_border I have:

element.style {
height: 400px;
text-align: center;
clear: both;
}

and inside the element style:

element.style {
position: relative;
text-align: center;
clear: both;
width: 264px;
margin: auto;
}

where are the settings for those element style - or how do I achieve that I simply want to display 3 watches in a row without specifying the widht or height in pixels?

Thanks

Sven, what's up?!

Regarding the topic, and just for the record, you've been given (1.) a correct answer and (2.) a working practical solution very early on. Instead of leaving it there, everyone kept digging deeper...
However, glad you consider your questions all answered now. Seriously.

For the sake of keeping the vibe of this forum jolly and things on topic: no comment on the rest.
I'm sure I'll hear from Nicolas if he shares your view (or would have heard from him in the past).

Peace, love, understanding, and the mentioned bit of humour... "life's too short", etc