Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #657653

    Hey Awesome support team at Kriesi ~! :)

    I had been using these instructions for single product view side bar management but it is breaking badly on mobile and small resolution screens:

    https://kriesi.at/support/topic/single-product-page-sidebar-to-right-instead-of-below-that-wont-break-on-mobile/#post-504471

    The side bar is totally gone and does not go below the single product view on mobile devices,

    https://db.tt/OoRHFCYN
    The side bar also does weird display problems on small screen resolutions,

    https://db.tt/N4iqEWQE
    until the browser window is so small/aka small screen resolution and it just bumps to mobile version screws up the product summary and blows away the side bar (sidebar totally disappears and does not go below the product)

    https://db.tt/2r96ibGP

    • This topic was modified 4 years ago by  Ismael.
    #657664

    I thought it would be a good idea to show all the quick css we have on the braandcorsetsupplies.com site too

    here it is…

    =================================

    @media only screen and (max-width: 1300px) {
    div#full_slider_1 { display: none; }}

    @media only screen and (min-width: 1301px) { div#full_slider_2 { display: none; }}
    @media only screen and (max-width: 800px) {
    .flex_column { width: 100% !important; margin-left: 0 !important; }}

    /*single product sidebar fix*/

    /*hide cell on desktop*/
    @media only screen and (min-width: 801px) {
    .not-for-desktops { display: none !important; }}

    .single-product .product {
    width: 100%;
    }
    .single-product-summary {
    float:left;
    width:45%;
    margin-right: 3%;
    }

    .single-product-main-image {
    width: 25%;}

    /* Right Side bar top padding*/

    .sidebar {
    padding-top: 10px;}

    /* Hide Titles on lightbox */

    .mfp-title {
    display: none !important;
    }

    /* iconic Swatch styles */

    .single-product-summary { overflow: visible !important; }

    .single-product-summary:after {
    content: “”;
    display: table;
    clear: both;
    }

    #top .variations td.label { width: 100% !important; }

    #top .variations .label label { text-align: left !important; }

    form.cart .variations select { float: none !important; }

    .single_variation_wrap { margin-left: 0 !important; }

    .iconic-was-swatch__graphic{
    width: 50px !important;
    height: 50px !important;
    }

    .iconic-was-swatches–visual .iconic-was-swatch–selected:before {
    line-height: 51px !important;
    }

    /* Currency swap Flags */
    a[data-currencycode=”USD”] {
    background-image: url(‘http://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg’) !important;
    background-size: 40px !important;
    width: 40px;
    background-repeat: no-repeat;
    font-size: 0;
    height: 20px;
    }

    a[data-currencycode=”EUR”] {
    background-image: url(‘http://upload.wikimedia.org/wikipedia/commons/b/b7/Flag_of_Europe.svg’) !important;
    background-size: 40px !important;
    width: 40px;
    background-repeat: no-repeat;
    font-size: 0;
    height: 27px;
    }

    a[data-currencycode=”BRL”] {
    background-image: url(‘https://upload.wikimedia.org/wikipedia/commons/0/05/Flag_of_Brazil.svg’) !important;
    background-size: 40px !important;
    width: 40px;
    background-repeat: no-repeat;
    font-size: 0;
    height: 28px;
    }

    a[data-currencycode=”CAD”] {
    background-image: url(‘https://upload.wikimedia.org/wikipedia/commons/c/cf/Flag_of_Canada.svg’) !important;
    background-size: 40px !important;
    width: 40px;
    background-repeat: no-repeat;
    font-size: 0;
    height: 20px;
    }

    a[data-currencycode=”AUD”] {
    background-image: url(‘https://upload.wikimedia.org/wikipedia/commons/b/b9/Flag_of_Australia.svg’) !important;
    background-size: 40px !important;
    width: 40px;
    background-repeat: no-repeat;
    font-size: 0;
    height: 20px;
    }

    a[data-currencycode=”GBP”] {
    background-image: url(‘https://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg’) !important;
    background-size: 40px !important;
    width: 40px;
    background-repeat: no-repeat;
    font-size: 0;
    height: 20px;
    }

    /* top secondary menu font size */

    #top .av-subnav-menu > li > a {
    font-size: 18px;
    }

    /* top secondary menu change to mobile */

    #657669

    Hey some more information,

    I also found there are sidebar display issues with the ‘shop’ page too.

    https://db.tt/TPfBByAT

    I also found there are sidebar display issues with the ‘product-category’ pages too.

    https://db.tt/TPfBByAT

    Thanks so much as always for any help :)

    ENB..//

    • This reply was modified 4 years, 2 months ago by  ENBertussi. Reason: image error
    #658665

    Hi!

    Thank you for using Enfold.

    The solution on the previous thread is not going to work properly anymore because the product template has been modified. Please undo the modifications then follow the instructions here: https://kriesi.at/support/topic/sidebar-rechts-single-page/#post-580220

    And if possible, please post long codes on pastebin.com.

    Best regards,
    Ismael

    #659399

    Hey Ismael,

    I’m sorry I must have done something wrong since now the left side bar is broken too.

    https://db.tt/S05xt3Fq new sidebar fix broke left side bar mobile no sidebar

    https://db.tt/Kh0SaoTA mobile sidebar is totally missing still and product summary is squeezed narrow

    Thanks again for any help you can give :)

    all the best

    ENB..//

    • This reply was modified 4 years, 2 months ago by  ENBertussi. Reason: fix images
    #659407

    Hey Ismael,

    check out this other thread where I was having problems with a footer on single product view.

    taking out the old code (https://kriesi.at/support/topic/single-product-page-sidebar-to-right-instead-of-below-that-wont-break-on-mobile/#post-504471) seems to have fixed the other problem I had..

    ENB..//

    #659527

    Hey!

    So is it fixed now, or still somehting that needs to get it solved?
    Please do let us know

    Cheers!
    Basilis

    #659534

    Hey Basilis,

    The solution provided by Ismael https://kriesi.at/support/topic/single-product-page-sidebar-to-right-instead-of-below-that-wont-break-on-mobile-2/#post-658665 did not fix the problem. and It also created new ones.

    But taking out the code as Ismael suggested fixed another problem I was having with another thread.

    I am still trying to get a solution that can show a “single product page sidebar to right instead of below that won’t break on mobile”

    thank you Basislis,

    ENB..//

    #660651

    Hi,

    Wrap the css code inside a css media query:

    @media only screen and (min-width: 768px) {
    .single-product-main-image {
        width: 25%;
    }
    
    .single-product-summary {
        overflow: hidden;
        width: 45%;
        float: left;
        margin-right: 5%;
    }
    
    .single-product .sidebar {
        width: 25%;
    }
    }

    Please refrain from posting the screenshots in an img tag, the image url is enough. Thank you.

    Best regards,
    Ismaelo

    #665910

    Hi Ismael,

    I’m still having some problems https://braandcorsetsupplies.com/product/satin-strap-elastic-bra-strap-elastic/ (and I noticed this is also the case with the MEXX site as well https://db.tt/rWAFWQXf )

    first:
    this does not seem to fix the core issues with the sidebar disappearing completely on mobile or small screens…. the sidebar is totally gone still and the content is only showing up half of the width of the screen https://db.tt/rvhJAZeE https://db.tt/b05NtpE3

    also:
    as the screen narrows the sidebar shrinks before it kicks to mobile as well. it does not behave the same way as the left main menu sidebar does.. this must be due to the ‘width: 25%’ https://db.tt/vT7PDacg and https://db.tt/imkpVQnN can we get it to behave the same way as the left side bar ? where it remains sticky to it’s size until it pops to mobile?

    also:
    I would really really like to also have the product information/woocommerce tabs to go below in the area so that it is full width https://db.tt/AgYLiH7x like shown in this very old post https://kriesi.at/support/topic/moving-woocommerce-tabs-underneath-the-image-and-short-description-full-width/

    in summary.

    1. left side bar behaviour is inconsistent with the menu on rightside bar when it comes to how it shrinks and pops to mobile
    2. side bar is totally gone and does not show below product on mobile it’s just gone. https://db.tt/b05NtpE3
    3. side bar settings cause strange mobile behaviour with woocommerce tabs being half screen width. > https://db.tt/rvhJAZeE
    4. I really want to have full width woocommerce tabs.. https://db.tt/AgYLiH7x

    We are getting close to launching this website to go live soon so I need to sort out this basic layout problems

    thank you very much Kriesi team, you guys always rock it for me ! i know we’ll sort this out :)

    ENB..//

    • This reply was modified 4 years, 2 months ago by  ENBertussi. Reason: forgot an image
    #666755

    Hi,

    Add this in the Quick CSS field to display the sidebar on mobile:

    @media only screen and (max-width: 767px) {
    .responsive #top #main .sidebar {
        display: block;
        width: 100%;
    }
    
    .responsive .single-product-summary {
        width: 100%;
    }
    }

    Works here: https://braandcorsetsupplies.com/product/satin-strap-elastic-bra-strap-elastic/

    Best regards,
    Ismael

    #667467

    Hi Ismael,

    thanks a tonne that worked great.. I added this to the child-theme css once I verified it was working just perfectly, :)

    Everything I have now added to the style.css for this now includes the following:

    =================
    /*single product sidebar fixes*/
    @media only screen and (min-width: 801px) {
    .not-for-desktops { display: none !important; }}
    .single-product .product {
    width: 100%;
    }
    .single-product-summary {
    float:left;
    width:45%;
    margin-right: 3%;
    }
    .single-product-main-image {
    width: 25%;}
    /* display sidebar below product on single product view mobile and fix broken display on mobile*/
    @media only screen and (max-width: 767px) {
    .responsive #top #main .sidebar {
    display: block;
    width: 100%;
    }
    .responsive .single-product-summary {
    width: 100%;
    }
    }
    =================

    Should some of this be taken out?

    =================
    should I open two separate tickets for these two issues I still have below?

    also:
    as the screen narrows the sidebar shrinks before it kicks to mobile as well. it does not behave the same way as the left main menu sidebar does.. this must be due to the ‘width: 25%’ https://db.tt/vT7PDacg and https://db.tt/imkpVQnN can we get it to behave the same way as the left side bar ? where it remains sticky to it’s size until it pops to mobile?

    also:
    I would really really like to also have the product information/woocommerce tabs to go below in the area so that it is full width https://db.tt/AgYLiH7x like shown in this very old post https://kriesi.at/support/topic/moving-woocommerce-tabs-underneath-the-image-and-short-description-full-width/

    I noticed you did not reply to them Ismael, I do want to try and have all the ‘single product view’ display tweaks in one ticket so I can re-use this on other client sites once I have it all working perfectly :)

    thank you again so much kriesi team.. you guys rock ~! :)

    ENB..//

    #668841

    Hi,

    I would really really like to also have the product information/woocommerce tabs to go below in the area so that it is full width https://db.tt/AgYLiH7x like shown in this very old post https://kriesi.at/support/topic/moving-woocommerce-tabs-underneath-the-image-and-short-description-full-width/

    I noticed you did not reply to them Ismael, I do want to try and have all the ‘single product view’ display tweaks in one ticket so I can re-use this on other client sites once I have it all working perfectly :)

    Please review the thread again: https://kriesi.at/support/topic/moving-woocommerce-tabs-underneath-the-image-and-short-description-full-width/#post-352383

    as the screen narrows the sidebar shrinks before it kicks to mobile as well. it does not behave the same way as the left main menu sidebar does.. this must be due to the ‘width: 25%’ https://db.tt/vT7PDacg and https://db.tt/imkpVQnN can we get it to behave the same way as the left side bar ? where it remains sticky to it’s size until it pops to mobile?

    Increase the max-width viewport to 1024. This will force the sidebar to move underneath the content container earlier:

    @media only screen and (max-width: 1024px) {
    .responsive #top #main .sidebar {
        display: block;
        width: 100%;
    }
    
    .responsive .single-product-summary {
        width: 100%;
    }
    }

    Best regards,
    Ismael

    #675103

    Hi Ismael,

    this seems to be working somewhat, what I notice when adding

    @media only screen and (max-width: 1280px) {
    .responsive #top #main .sidebar {
        display: block;
        width: 100%;
    }
    
    .responsive .single-product-summary {
        width: 100%;
    }
    }

    is that the place where the sidebar would be is still there, it’s blank now instead, so the main content area did not seem to act responsive.
    AND
    I notice that the title + add to cart and other items that usually go beside the images of the product also go below, and not just the sidebar.

    Creds are below and permission to disable plugins

    ALSO: i followed

    Please review the thread again: https://kriesi.at/support/topic/moving-woocommerce-tabs-underneath-the-image-and-short-description-full-width/#post-352383

    I was able to see that this bit of code on comment does work for adding the tabs below the product but, it kills the sidebar completely and bumps it to below the products regardless of resolution of screen size.

    • This reply was modified 4 years, 1 month ago by  ENBertussi. Reason: needed to address other issue
    #676729

    Hi,

    Change the viewport to 1024px as suggested in the previous post. https://kriesi.at/support/topic/single-product-page-sidebar-to-right-instead-of-below-that-wont-break-on-mobile-2/#post-668841

    Could you please provide a screenshot of the tab issue? Or provide a link to the product with the issue so that we can check it.

    Best regards,
    Ismael

    #678291

    Hey Ismael,

    1. I have set the viewport to 1024 as instructed but it causes issues with the right side bar shrinking it too much and causing issues with other enfold widgets being displayed.. see https://braandcorsetsupplies.com/product/firm-bra-band-elastic-plush-back-elastic/ and narrow your screen to 1300 – 1025 to see how the right side bar has display issue https://dl.dropboxusercontent.com/u/21953532/right%20side%20bar%20widget%20display%20issues%201025px%20browser%20window%20width.PNG

    2. also the product thumbnails do not go full width when the product description tabs go below at 1024 px https://dl.dropboxusercontent.com/u/21953532/1023px%20thumbnails%20stay%20shrunk.PNG

    3. RE TAB ISSUE –

    ALSO: i followed

    Please review the thread again: https://kriesi.at/support/topic/moving-woocommerce-tabs-underneath-the-image-and-short-description-full-width/#post-352383

    I was able to see that this bit of code on comment does work for adding the tabs below the product but, it kills the sidebar completely and bumps it to below the products regardless of resolution of screen size.

    As soon as I use this code to put the woocommerce tabs below the product using full width it completely kills the right side bar, it vaporises.

    ENB..//

    #680456

    Hi,

    1.) Alright. Please revert it back to the original viewport:

    @media only screen and (max-width: 1280px) {
    .responsive #top #main .sidebar {
        display: block;
        width: 100%;
    }
    
    .responsive .single-product-summary {
        width: 100% !important;
    }
    }

    is that the place where the sidebar would be is still there, it’s blank now instead, so the main content area did not seem to act responsive.

    The code above should force the main content area to go full width and move the sidebar under.

    2.) Add this inside the css media query above.

    .single-product-main-image {
        width: 100%;
    }

    3.) Please create a new thread for this inquiry.

    Best regards,
    Ismael

    #687055

    Thank you.

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

The topic ‘single product page sidebar to right instead of below that won't break on mobile’ is closed to new replies.