Two mobile-device layout question

Hi Jgcramer,

For #1:
To fix the mobile view, add this CSS to the Custom CSS box on the Edit Catalog page:

@media screen and (max-width: 715px) {
.prod-cat-sidebar {
    width: 100%!important;}

.prod-cat-inner { 
width: 100%!important;}
}

#2
Which “product links” are you referring to?

Hi,

See attachment:

Picture, from a PC, i dont see this on my mobile phone

Hello,

Unfortunately there is no image in the link that your provided. Could you please provide the image again.

Sorry here you are:

Picture

Hello,

Those related products links that you are pointing to do not appear on smaller screen sizes? Could you send us a link to any of these product pages so that we can take a look?

Yes on smaller screens like my iPhone:

Link 1
Link 2

On mobile divices it also showing the same picture twice.

Hi,

Thank you for the links. This is happening because you are using the “Default” product page type. The default product page type is set up with a desktop and mobile version. At 670px screen width it switches to the the mobile version. And the mobile version doesn’t include the related products area.

If you wanted, you could use custom CSS to make it so that it doesn’t switch to the mobile version. For example:

@media only screen and (max-width: 670px) {
.upcp-standard-product-page-mobile {
display: none !important;
}
.upcp-standard-product-page {
display: block !important;
}
}

Of course, because you would now no longer have a mobile version of the product page, you may need to add so more custom CSS to adjust the layout.

Alternatively, if you’re using the premium version, you can switch to the tabbed product page type, which is fully responsive and displays the related products area on all screen sizes.

I need the double screen (PC/Mobile). So the CSS hack wont work for me.

I have the premium version, how to adjust it so i can see also the related products on a mobile device?

Thank you for the support!

Hi jgcramer,

Can you try switching the Product Page Type (Options->Premium) to the “Tabbed Product Page” option?

That worked! How to hide the Product detail/ additional info box?

Thank you for the help!

Hi jgcramer,

I wouldn’t suggest hiding the entire Product detail section because I noticed you have custom fields for some products.

Instead, here’s a way to make it so only the custom tabs information shows (add this CSS to your Custom CSS box):

.upcp-tabbed-description,
.upcp-tabbed-tabs-menu {
display:none!important;}

.upcp-tabbed-addtl-info {
display:block!important;}

To get rid of the thin grey border around content:

.upcp-tabbed-tab {
border:none;
padding:1em 0;}

NOTE: If you want to add a description/blurb about a product in the future, you’ll need to add it as another custom field (a “Text Area” one)

• This reply was modified 8 years ago by etoilewebdesign.
• This reply was modified 8 years ago by etoilewebdesign.

Great! Have also add the mods!

Thank you for this create support!