Docs

[ottobono]

Hey Rue, many thanks for your extensive answer! I will implement your solutions today in the afternoon and I will let you know! 🙂 some clarifications:

1) Tried with last version of IE included with Windows 10
2-6) I’ll see them later

I still have the image problem in “Le miscele”, that I mentioned before. Can you please help me solving this or pointing me in the right direction? thank you again! 🙂

[Christopher]

Hi there,

#1 Please provide us with URL of page in question.

In regards with ‘Le miscele’ issue, please remove image element and add image as column background. Please add background-image:url("url of image"); in column’s style field.

Hope it helps.

[ottobono]

Hi, thank you for your answers! All the code you provided worked flawlessly! Now the questions:

1) I created a copy of the page “Contatti” called “Contatti-2″, where you can see them in the middle that they do not work as intended. I even want the text to be responsive in the card (both front and rear) and not too small (normally it is really small and I do not want to change my standard font that has a value of 15), so I tried to put the content in the title and in the text I wrote ” ” so that no other text appears. I use internet explorer 11, I attached a pic to this post. If it does not work with ie 11, maybe I should not use them, I do not know 🙁
2) I do not want ALL sidebars on the top, only the filter sidebar and the search sidebar. I tried to change the class in the js code to .woocommerce_product_search-3 (to test only to move the search widget) and it did not work. What do I have to do to move only filter and search widgets in THAT page?

Thank you!

[ottobono]

Hi, the image appears to be cropped. I attach a pic.

[Christopher]

Hi there,

#1 I’m not able to replicate this, card element is displaying fine. Please see the attachment.
Internet Explorer 9/10/11 do not support native CSS3 3D transforms, which is what we are using to animate the card element. These native CSS3 animations are much smoother than trying to do anything programmatically with JavaScript for example, which is why we have opted to use them. In IE 9, 10, and 11 the card will fallback to simply switching out the two sides as you hover (so essentially you won’t see the animation).

Please reduce the padding for second card element as its content is displaying out of the box.

#2 Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

#3 In regards with background image, it has some limitations and it can take some specific values.
You can add following CSS one by one in column’s style field and check the result.

background-size:100% 100%;
background-size:contain
background-size:cover

If you’re still not satisfied with the result, please use visibility options and hide this row/section on mobile devices. Then add another row/section to display it on mobile devices and add background image or image element with different dimensions.

Hope it helps.

[ottobono]

Hi, thank you for your answer!

1) Tried even from another windows 10 laptop with flash player updated to the last version, still same problem. I think I will use the “original” page “Contatti” then, if it causes so many troubles :/ p.s. I added no padding in the middle card (I do not know how to add padding for only an element), dunno why it appears like this
2) Go in the page “Negozio” and you see there are 4 widgets on the right. I want that only the first three widgets are on the top and the 4th one is under the products, so the desired structure is (on mobile only):

search
category
price filter
products
best sellers

3) It worked (hide/show, even though it is not optimal still the transition from bigger screen to the smaller one. After the first transition works everything smoothly. Can you give it a look please? 🙂 ).

Thank you!

[ottobono]

Hi, I will open the site in few days, if you could help me somehow solving this, it would help me a lot! 🙂 I am almost done!

[Rad]

Hi there,

1. For individual element, instead of padding option, you can use style input. For example, you can add this

padding: 40px;

That will add 40px padding on all side of the element. Or like this to add 40px just on top and bottom.

padding: 40px 0px;

or this, 40px for left and right

padding: 0px 40px;

or one by one,

padding-top: 40px; padding-bottom: 40px; padding-left: 0px; padding-right: 0px;

2. That’s not possible, the products are part of the content column, while widgets are part of sidebar column. They belong on a different container, it can be move through javascript but, CSS specific to sidebars will be removed too.

3. What do you mean by the transition from bigger to smaller screen? Is it turning from landscape to portrait, or just resizing the window?

Thanks!

[ottobono]

1) Thank you, but I decided to not use cards 🙂
2) Ok, how to do it with js?
3) Just resizing the window

Thank you!

[Rad]

Hi there,

1. Sure 🙂

2. Please change this existing code

(function($){
  var W = $(window).width();
  if(W < 980){
    $('.x-sidebar').insertBefore('.x-main');
  }
})(jQuery);

to this

(function($){
  var W = $(window).width();
  if(W < 980){
    $('.x-sidebar').insertBefore('.x-main');
    $('#woocommerce_top_rated_products-2').appendTo('.x-main');
  }
})(jQuery);

3. Ah thanks, please note that resizing the browser doesn’t simulate the actual mobile. Instead, please use visibility to serve different content with different background sizing. Working with background-size is more harder than using visibility.

Thanks!

[ottobono]

Hi Rad, thank you! Your solution worked just perfectly! I am really glad about it! 🙂

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[ottobono]

Hi Rupok, this code does not work if you resize your window, it works only if you load the page with an already fixed width, for example if you have a mobile and load the page with that width. How to make the sidebars move even when you resize your browser window? Thank you!

[ottobono]

I am trying to find a solution with my freelancer to move it dinamically, but we did not come up til now with any idea. could you help me somehow?

[Rue Nel]

Hello There,

We have mentioned from our previous reply resizing the browser doesn’t simulate the actual mobile. To be able to move it dynamically, please update the code and use this instead:

(function($){
  $(window).on('load resize', function(){
    var W = $(window).width();
    if(W < 980){
      $('.x-sidebar').insertBefore('.x-main');
      $('#woocommerce_top_rated_products-2').appendTo('.x-main');
    }
  });
})(jQuery);

Please let us know if this works out for you.

[Author]

Posts