Widget on Mobile

Support
#1

Hello,

Could you tell me how to move my widget from the bottom of the page to the top of the page on mobile view?

Page: https://www.rabbitsfootcustombrews.com/product-category/popular-brews

#2

Hi,

To achieve that you can add this in Theme Options > JS

jQuery(function($) {
$(window).on("resize", function () {
    if ($(window).width() < 979) {
        $( ".x-sidebar.right" ).insertBefore( ".x-main.left" );
    }
}).resize();
});

Hope this helps.

1 Like
#3

I just tried it and it looks great but the search box is not working. Can this be fixed? If I try to search it just kicks me back out to the page

The product filter works fine though…

#4

Hi There,

The search box is working fine! even in mobile device. can you please check if you have any caching issue.
Its works fine in my end.

Thanks

#5

Hello. I tried it again on my Nexus 6p and its not working. Also not working on a Samsung S7…

Tested on a ipad and its working ok…

Please advise…

#6

Hi There,

Could you please explain the issue on your mobile ? perhaps with a screen recording or with some screenshots, so that we can look into your issue.

Thanks!

#7

As you can see everytime I click the search box the keyboard comes up and then kicks out.

#8

Hi There,

Can you confirm if the issue was there before the script suggested suggested @paul.r in the previous post.
Can you just remove the script and check the search box and if the issue doesn’t came up, we will be looking at the script that we had suggested.

Thanks

#9

It was indeed working at the bottom of the page before the script was added

#10

Hey There,

Please remove the code given by Paul and test again the search functionality.

And then, use this code instead:

jQuery(function($) {
    $(window).on("load resize", function () {
        if ($(window).width() < 979) {
            $( ".x-sidebar.right" ).insertBefore( ".x-main.left" );
        }
    });
});

Please let us know how it goes.

#11

unfortunately still not working…

#12

Hi there,

It seems that changing the position of the sidebar in the mobile view using the Javascript code is messing with the functionality of the search section. Please remove all the codes given and add the code below to X > Launch > Options > CSS:

@media (max-width: 991px) {
	#top .x-container.max.width.offset {
		display: flex;
		flex-flow: column wrap;
		justify-content: space-between;
	}


	#top .x-container.max.width.offset .x-main {order: 1;/* display: flex; */flex-flow: column wrap;position: static;float: none;overflow: visible;}
	#top .x-container.max.width.offset .x-sidebar {order: 2;display: flex;flex-flow: column wrap;position: static;}
}

This is a CSS way of doing the same thing. If it is again making problems on the usage of the search section I am afraid we will not be able to help you for this customization further as it will need to change the behavior of the search section which is outside of our support scope and you will need to hire a developer to do that.

Thank you for your understanding.

#13

The CSS Code you provided did not seem to work. Have reverted back to the javascript instead…

#14

Hi,

Can you try this js code and see if it works.

jQuery(function($) {
    if ($(window).width() < 979) {
        $( ".x-sidebar.right" ).insertBefore( ".x-main.left" );
    }
});
1 Like
#15

I pretty much gave up on this and I think even your colleague to some extent. It works beautifully with the code you gave me. Thank you so so much Paul. Mighty kind of you…

#16

Glad that we could be of a help :slight_smile:

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.