Home Forums Basel – Premium Template Moved: Reply To: shop item page

This topic contains 14 replies, has 3 voices, and was last updated by  eayodele 1 week, 3 days ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #204628

    eayodele
    Customer

    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

    Private Content Hidden
    Attachments:
    You must be logged in to view attached files.
    #204926

    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

    #205898

    eayodele
    Customer

    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

    Private Content Hidden
    Attachments:
    You must be logged in to view attached files.
    #206101

    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

    #206192

    eayodele
    Customer

    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.
    #206199

    eayodele
    Customer

    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.
    #206295

    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

    #206352

    eayodele
    Customer

    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.
    #206402

    Hello,

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

    Best Regards

    #206442

    eayodele
    Customer

    Hello,

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

    Best Regards
    Dee

    #206489

    eayodele
    Customer

    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

    #206591

    Hello,

    Please provide the site admin access to the private area.

    Best Regards

    #206635

    eayodele
    Customer

    Hello,

    Details attached.

    Regards
    Dee

    Private Content Hidden
    #206724

    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

    #206742

    eayodele
    Customer

    Hello,

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

    Regards
    Dee

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Moved: Reply To: shop item page’ is closed to new replies.