Mobile version not displaying properly

Hi jeese,

?1)
What method are you using to translate your website (e.g. with translation plugin…etc)

?2) You can add this CSS to the “Custom CSS” box in the Edit Catalogue page:

@media only screen and (max-width: 715px) {
.prod-cat-inner {
position: relative; 
width: 100%;}

.upcp-thumb-image-div {
margin: 0px auto;}

.upcp-thumb-image-div a,
.upcp-thumb-image-div {
height:auto;}

.upcp-thumb-item {
min-height: inherit;
max-height: inherit;
margin: 50px 0 0 0!important;}
}

2b) In regards to the “blur effect”, did you mean what happens to the product image after you tap a product in the catalogue on mobile?

Hello and Thank you so much!!

So, the plugin I use to translate all the pages on my site is called Multilanguage by BestWebSoft

Also, here’s the the screenshot of what I mean for “the blur effect” It looks very good, but unfortunately it also covers the product image, and makes it less readable. It would be perfect if it only appeared around the image, but I clearly understand that it’s impossible, so at least I wanted to disable it in mobile version.

Thank you so much again!
Vlad

UPD:
No need to disable it. I will now try to make the image full screen width in the mobile version.

• This reply was modified 6 years, 11 months ago by Jeese.

BTW is there any way to change the appearance of the categories?
When I post a catalogue it automatically displays all the categories that are inside.
Is it possible to create some kind of “menu”? I mean only by using appearance settings of course.

Example:
Open the page that contains the catalogue > see all the categories as if they were products > press on one of the categories > new page opens where only the products from that category appear.
Or it is impossible right now?
Thanks!

Guys, I managed to create this kind of menu by changing the “catalog overview mode”, so no problems with that.
But when I open the link on my phone the categories I see, are aligned by the left side again. Screenshot attached

I tried to use the same css code you gave me, but as you can see, I only managed to make the category name appear on full width. I cannot understand how to align the category image by centre.
I’m trying to use the div.upcp-overview-mode-image

What’s my mistake?

Thank you so much!

Hi Jesse,

You could definitely use CSS for this. You just need to target the div the image is in. For example:

.upcp-overview-mode-image {
margin-left: calc(50% - 120px);
}

It worked perfectly!
Thank you so much guys! You’re the best!!
btw, do you know if it’s possible to translate the catalogue automatically, with the plugin I have?

• This reply was modified 6 years, 11 months ago by Jeese.

Hello Jeese,

As we have not tested our plugin with Multilanguage we cannot comment if it will work or not but you could try it out. We usually suggest doing translation using the help of a plugin like poedit, locotranslate or polylang that utilizes the .po files that we have in the plugin and you would be able to change the translation using the simple settings in the translation plugin.
Additionally, based on user feedback and testing we’ve done, we recommend setting up a separate catalog as well as a separate set of products, categories, tags, custom fields, etc. for each language. This is because our catalog is not a custom post type and so you will most likely not be able to create a direct translation for each product, category, etc. using Polylang. By creating a separate set of everything, you have full control over the wording of everything. Then you can create two linked pages using Polylang and put your catalog shortcodes on those pages.

This is because our catalog is not a custom post type and so you will most likely not be able to create a direct translation for each product, category, etc. using Polylang

This is the saddest part. That would be so comfortable.