Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1310975

    Hello
    I was able to achieve this using Quick CSS found in another thread. However, when I insert it, it aligns my products to the right of the page on mobile. The website this can be seen on is in the private content.

    Here is the code that was used.
    @media only screen and (max-width: 786px) {
    .container {
    display: flex!important;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    }

    /* Sidebar */
    #top .container aside {
    order: 1;
    flex-grow: 1;
    }

    /* Main Content */
    #top .container main {order: 2;flex-grow: 1;}
    }

    On another website, I inserted the same exact Quick CSS and it did not show the sidebar at the top of page on mobile. To rule out any conflicting CSS, I removed all other Quick CSS on this second site, and only left the CSS above (to show sidebar at the top of the page on mobile) and it would not work. Any ideas why this is? The second site is also listed in the private content.

    #1311332

    Hey web6s,

    Thank you for the inquiry.

    We should also remove the left padding of the sidebar container. Try to include this inside the css media query.

    .sidebar_left .content {
        padding-left: 0;
    }

    Best regards,
    Ismael

    #1311553

    Thank you.

    Can you comment on why the same code does not show the sidebar at the top pf page on mobile for the second site? I have included all the Quick CSS that the second site uses in case something else there is conflicting.

    here is all the Quick CSS that the second site is using. The site URL is in prvate content.

    @media only screen and (max-width: 768px) {
    .container {
    display: flex!important;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    }

    /* Sidebar */
    #top .container aside {
    order: 1;
    flex-grow: 1;
    }

    /* Main Content */
    #top .container main {order: 2;flex-grow: 1;}
    }

    @media only screen and (min-width: 768px) {
    .only_mobile { display: none !important; }}

    @media only screen and (max-width: 769px) {
    .only_desktop { display: none !important; }}

    @media only screen and (max-width: 768px) {
    .breadcrumb {
    display: none !important;
    }
    }

    #top .phone-info {
    float: none!important;
    text-align: center;
    }

    .slideshow_caption { width: 65%; }

    #header_meta * {
    font-weight: bolder;
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 2em;
    }

    .avia-button {
    font-size: 16px!important;
    }

    .my-highlighted-text { background: rgba(255, 0, 0, 0.7) !important;padding: 1px !important; }

    .av-subheading.av-subheading_below {
    margin-top: 20px;
    }

    #socket .container {
    padding-top: 30px;
    padding-bottom: 30px;
    }

    #socket .sub_menu_socket { float: left; }
    #socket .copyright { float: right; }

    .blog-author{ display: none !important; }

    .products .product h3 {
    font-size: 16px;
    }

    div#header_main {
    background-color: white;
    }

    .related.products {
    display: none !important;
    }

    div .product-sorting {display: none;}

    .in-stock {
    display:none !important;
    }

    #top #wrap_all #av-burger-menu-ul>li{
    opacity:1!important;
    }

    #top .av_header_transparency .phone-info {
    color: #ffffff !important;
    font-size: 14px !important;
    }

    .widget_product_categories li a {
    font-size: 16px;
    }

    .sidebar_left.sidebar {
    text-align: left;
    }

    .tax-product_cat .page-thumb {
    display: none;
    }

    .woocommerce-product-gallery {
    opacity: 1 !important;
    }

    /* Product list */
    .product h3 {
    font-size:14px!important;
    }

    input[type=”submit”]{
    font-size: 15px;
    }

    .av-custom-form-color .button {
    border-color: #c18017 !important;
    border-width: 1px !important;
    background-color: #c18017 !important;
    }

    .av-custom-form-color .button:hover {
    border-color: #f0f0f0 !important;
    border-width: 1px !important;
    background-color: #696969 !important;
    }

    .sidebar .widgettitle { font-size: 16px; font-weight: bolder; }

    .sort-param-order, .sort-param-sort {
    display: none;
    }

    #top .widget ul {
    padding: 2px !important;
    }

    .widgettitle {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.1em;
    text-align: left!important;
    }

    #header_meta #avia2-menu a {
    font-size: 15px !important;
    font-weight: bold !important;
    }

    #1311554

    Sorry but this stuff is a bit of out my comfort zone. Where do I insert the following suggestion you made?

    .sidebar_left .content {
    padding-left: 0;
    }

    Original CSS
    @media only screen and (max-width: 786px) {
    .container {
    display: flex!important;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    }

    /* Sidebar */
    #top .container aside {
    order: 1;
    flex-grow: 1;
    }

    /* Main Content */
    #top .container main {order: 2;flex-grow: 1;}
    }

    #1312234

    Hi,
    Thank you for your patience and the link to your site, so above you said on this site the sidebar is not showing on mobile for your products, when I check the product linked below the sidebar is hidden bt the plugin “widget options” please check the options of each widget to unhide them. If you still have trouble please include an admin login in the Private Content area and a link to a specific page you want the sidebar to show on, and let us know which widgets should show, this assumes you have a lot of widgets with a lot of “rules” in your plugin.

    Best regards,
    Mike

    #1312237

    Hi Mike
    I am sorry but I did not specify clearly. It is not the Single Product page that we are working with. It is our Product Archive (category) pages.

    The code above allows the sidebar to show above products on the archive page on site 1 but not on site 2 using the exact same code. See private notes for references to site 1 and 2.

    #1312252

    Hi,
    Thanks for the feedback, I checked both pages emulating a mobile device on the desktop, and on my actual mobile Android, and both the “Select a category” & “Select your vehicle” shows at the top of the page, the one difference was the “site 2” has a color section product description at the top, but I don’t think you are trying to hide it and it must be at the top because it’s a color section, sidebars can not be above color sections.
    Can you check with an Android that the elements are showing, I don’t have an iPhone to test with, but if we determine this is an iPhone issue then I can ask the team to check. If it is an iPhone issue then please note you may need to empty your browser history to fully clear the cache.

    Best regards,
    Mike

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.