single product page sidebar to right instead of below that won't break on mobile

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 */

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..//

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..//

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 8 years ago by ENBertussi. Reason: forgot an image

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..//

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 7 years, 11 months ago by ENBertussi. Reason: needed to address other issue

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..//

Thank you.