thanks yigit it’s 100% now.

sorry I didn’t realise I had the syntax incorrect..

is it better to comment out using the /* comment here */ or the // method?

I noticed that both seem to get used and when I was checking my functions.php today on braandcorsetsupplies I noticed I have used both too.

does it matter? thanks again.

:)

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

Hi there,

see below for credentials and permission is always here for disabling plugins albeit I have not seen that disabling fixes adding

add_theme_support(‘avia_template_builder_custom_tab_toogle_id’);

to the functions.php in the child theme working.

It does seem other child theme functions are indeed working albeit.

ENB..//

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

Hey there,

I went ahead and added it to the parent theme functions.php and it worked..

I don’t understand why it would not work by adding it to the child theme functions.php..

yikes..

:(

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, 4 months ago by ENBertussi. Reason: forgot an image

Hey Andy,

I did not think I was using a caching plugin and I usually have chrome inspect open with ‘disable cache (while devtools is open) checked.
I also hold refresh click in chrome with “empty cache and hard reload”

I just double check to see if performing those again would clear up the issue. No luck :(

sorry.

below are creds.

ENB..//

Hey Andy,

I found out that some code I had that I was using for adding the single product page sidebar must have been doing this.

once I did what ismael told me to do https://kriesi.at/support/topic/single-product-page-sidebar-to-right-instead-of-below-that-wont-break-on-mobile-2/ and I removed the settings I followed in https://kriesi.at/support/topic/single-product-page-sidebar-to-right-instead-of-below-that-wont-break-on-mobile/#post-504471 It seemed to fix the footer…

I will do more checking but it seems like my footer problem is related to my single product view and category view sidebar issue.

I will let ismael know about this thread too..

thank you

ENB..//

I tried this.

@media only screen and (max-width: 1250px) {
@media only screen and (max-width: 1250px)
.responsive #top .av-menu-mobile-active .av-subnav-menu {
display: none !important;
}
#top .mobile_menu_toggle {
display: block!important;
}
}

but it did not fully work..

the mobile sub nav is not clickable and the desktop nav still is showing..

thanks that’s a great piece of setting to have :)

cheers

ENB..//

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

FYI, the site I am trying to ensure does not have issues is http://braandcorsetsupplies.com/

where the “fullwidth sub menu” is going into two rows on smaller screens.

I want it to implement mobile at the resolution I know where it breaks on to two lines.

Let me know when you can.

thank you

I ended up installing Magic Zoom Plus to try and mitigate some of the lightbox issues, and it appears to be mostly working.

Although it is not completely consistent in it’s behaviour..

braandcorsetsupplies.com/product/satin-strap-elastic-strap-elastic/

hovering over the additional variation images does sometimes not always cause the main image to be changed properly. sometimes it breaks and the image becomes clickable taking you to the image in the browser window..

ENB..//

• This reply was modified 8 years, 6 months ago by ENBertussi. Reason: URL preview wonky