Moved: Reply To: shop item page

Hello,

SHOP ITEM PAGE.
On the Basel ecommerce theme you have set the written description of the product next to the item to collapse underneath the product image at screen width 767px (for mobile devices). However I would need this to happen at around 1042px (tablets, portrait).

Is this something you can help with?

Thanks
Dee

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

@media (min-width: 768px){
body .col-sm-8.product-images {
    width: 100%;
}
}
@media (min-width: 768px){
body .col-sm-4.entry-summary {
    width: 100%;
	height:1000px;
}
}

Best Regards

Hello,

Thank you for your assistance, I just slightly changed your code to suit my needs which has worked fine:

@media (max-width: 991px){
body .col-sm-8.product-images {
width: 100%;
}
}

@media (max-width: 991px){
body .col-sm-4.entry-summary {
width: 100%;
}
}

However
1. In tablet ‘portrait mode’ the breadcrumbs at the top left are missing.
2. In tablet ‘landscape mode’ the text information at the side of the product is not visible when using the ‘Compact’ product page design selection.

Please assist and many thanks

Regards
Dee

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

@media (max-width: 991px){
body .single-breadcrumbs-wrapper .woocommerce-breadcrumb {
    display: inline-block;
}
}

What width do you mean? I am checking and it works https://prnt.sc/t5ncv7

Best Regards

Hello,

Thanks for sorting out the breadcrumb issue.

I think maybe the iPads I have may be too old to display the compact style text. All other versions of the text work though!

Anyway please see image attached and let me know what you think.

Many thanks
Dee

Attachments:

You must be logged in to view attached files.

Hello,

Just noticed the same issue with the demo on your server (iPad)

https://demo.xtemos.com/basel/shop/other/new-brands/yomber-jacket-trim/

Kind regards
Dee

Attachments:

You must be logged in to view attached files.

Hello,

You can take this code:

@media (max-width: 991px){
body .single-breadcrumbs-wrapper .woocommerce-breadcrumb {
    display: inline-block;
}
}

Change the 991px as per your needs and insert in the Global styles.

Best Regards

Hello,

The breadcrumb issue has already been resolved. The problem is .basel-scroll-content which is not showing next to the product image on iPad (landscape) view.

Kind Regards
Dee

Attachments:

You must be logged in to view attached files.

Hello,

Move this code to the desktop https://prnt.sc/t69dd5

Best Regards

Hello,

Unfortunately, this still did not work as the text still doesn’t show in landscape mode (portrait mode is fine).

Best Regards
Dee

Hello,

I have done some further research into this problem and it would seem that this is a browser issue as older versions of Safari (Safari 10) do not support the Product page ‘Compact’ option. Apple are now on Safari 13. All other earlier browsers support it though.

Is there a workaround for this issue?

Kind regards
Dee

Hello,

Please provide the site admin access to the private area.

Best Regards

Hello,

Details attached.

Regards
Dee

Hi,

1. Please put custom CSS code with @media to the Global CSS area since in other responsive areas in would not work (https://prnt.sc/t6ydma) since code in that areas already creates it own @media selector.

2. We have removed all our previous custom code related to the single product.

3. To make your single product in one column starting from display width 1048px and less, try to add the following custom CSS code to the Global Custom CSS area in theme settings (http://prntscr.com/t6yylf).

@media (max-width: 1048px){
	.product-image-summary > .row > [class*="col"] {
	width: 100%;
}
.product-design-compact .basel-scroll {
    position: static;
    overflow: visible;
}
.product-design-compact .basel-scroll .basel-scroll-content {
    position: static;
    overflow: visible;
    padding-left: 0;
    padding-right: 0;
}
}

4. To show breadcrumbs on tablet devices in single product page try to add following code to the Tablet Custom CSS area in theme settings (http://prntscr.com/t6yzs9).

.single-breadcrumbs-wrapper .woocommerce-breadcrumb,
.single-breadcrumbs-wrapper .yoast-breadcrumb {
    display: inline-block;
}

5. Thank you for noticing the issue in Safari 10. This issue will be fixed in the next theme update.

Best Regards

Hello,

Thank you for your time with this issue. You can now close this topic.

Regards
Dee

[Author]

Posts