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 Vinay,

I have moved the code for doing this from the quick css to the style.css in the child theme,

what I have moved is this:

/*mobile submenu-header menu fix*/
@media only screen and (max-width: 1250px) {
#menu-header-main-menu {display:none !important;}
}

@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;
}
}

I’m sorry if I have not followed the directions properly for this, but so far the av-subnav-menu is not clickable on small screen resolution it shows but you can not click on it still…

I’m not sure if we were supposed to get rid of the code https://kriesi.at/support/topic/change-screen-resolution-that-fullwidth-sub-menu-kicks-to-mobile/#post-658479 that was also still in the ‘quick-css’ and I have moved it to the style.css (as you can see above no doubt)

Let me know..

thanks a tonne :)

ENB..//

Here is a sample page I just made

Test Page

The video is a background for a color section with page height set to 100%. The video is vertically centered so the top and bottom are both cut. I want the top of the video to be visible (top aligned).

Also, and it is not so important in this case, but the video is much wider than the page. Is there a way to control that?

If a photo is used as a color section background, there are some options to control the size, repeating etc. There are no options for video backgrounds. So can video backgrounds be controlled using CSS?

• This reply was modified 9 years, 7 months ago by draig.

hi,

I resized the logo and uploaded but it is still blurry. is there anything else that can be done? its is a vector resized and then save as high quality JPG or PNG and still looks blurry

More importantly, the logo still loads more to the left on mobile because it is still keeping the space for the menu. How can i removed the space on the top right that is usually for the mobile menu? I need the logo to load perfectly centered in the mobile page at all times.

Thanks in advance!

Hi there! No, I mean on mobile the logo is rather small, the header container is stretched out HUGE and the logo is nestled in the top left corner.

Hi Rikard,
I have posted the login information to the website below.
If you open the site in google chrome, the background will first be light blue solid, then dark blue solid with the video only filling the screen further on down below and partially.

Is there another way to have a background video for the site that works consistently on all three desktop browsers? We need it for the entire site, all pages and posts…should/can it be done with a plugin instead of your color section? or in code somewhere? plugins allow options for several video formats which may have to be served based on browser. if yes, which plugin works in conjunction with enfold?

Thank you

Peter