![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: avia layout builder, Product page, Side Bar, sidebar, single product page, widgets, woocommerce
-
AuthorPosts
-
July 6, 2016 at 6:06 pm #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:
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)-
This topic was modified 7 years, 11 months ago by
Ismael.
July 6, 2016 at 6:48 pm #657664I 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 */
July 6, 2016 at 7:01 pm #657669Hey some more information,
I also found there are sidebar display issues with the ‘shop’ page too.
I also found there are sidebar display issues with the ‘product-category’ pages too.
Thanks so much as always for any help :)
ENB..//
-
This reply was modified 8 years, 2 months ago by
ENBertussi. Reason: image error
July 9, 2016 at 2:57 am #658665Hi!
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,
IsmaelJuly 11, 2016 at 4:22 pm #659399Hey 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 8 years, 1 month ago by
ENBertussi. Reason: fix images
July 11, 2016 at 4:35 pm #659407Hey 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..//
July 11, 2016 at 8:05 pm #659527Hey!
So is it fixed now, or still somehting that needs to get it solved?
Please do let us knowCheers!
BasilisJuly 11, 2016 at 8:37 pm #659534Hey 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..//
July 14, 2016 at 4:58 am #660651Hi,
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,
IsmaeloJuly 27, 2016 at 7:59 pm #665910Hi 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/b05NtpE3also:
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/AgYLiH7xWe 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, 1 month ago by
ENBertussi. Reason: forgot an image
July 30, 2016 at 4:06 am #666755Hi,
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,
IsmaelAugust 1, 2016 at 9:16 pm #667467Hi 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..//
August 5, 2016 at 6:16 am #668841Hi,
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,
IsmaelAugust 20, 2016 at 10:24 pm #675103Hi 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 ago by
ENBertussi. Reason: needed to address other issue
August 24, 2016 at 4:10 am #676729Hi,
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,
IsmaelAugust 26, 2016 at 6:22 pm #678291Hey 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..//
September 1, 2016 at 5:37 am #680456Hi,
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,
IsmaelSeptember 15, 2016 at 6:49 pm #687055Thank you.
-
This topic was modified 7 years, 11 months ago by
-
AuthorPosts
- The topic ‘single product page sidebar to right instead of below that won't break on mobile’ is closed to new replies.