[SOLVED] Left Column shown in bottom in smartphone

[Adrian DMM]

Hello,

I have a question. The left column, where the categories are shown, near products, when I saw it under 768px, i mean, in smartphone or tablet it is shown in bottom. Check the image.

How can I change it to see it in the top. I want my customer can select the category in the top of the site, not to go through all my products in bottom to select other category. Do you understand me?

Edited March 13, 2019 by Adrian D.
I solved the problem (see edit history)

[tdsoft]

you must give your site at here for someone can check it

[TDK Studio]

Hello, How much are you using prestashop version? 1.6 or 1.7 ?

You can check category page support support what positions? and move this module to that position. or If you want this module all page, you can move this module to footer position (HOOK FOOTER).

[TDK Studio]

Or you can use css for this work and for only page category. On mobile use can use flex to css.

[Adrian DMM]

8 hours ago, tdsoft said:

you must give your site at here for someone can check it

www.bricum.com

[Adrian DMM]

8 hours ago, TDK Studio said:

Hello, How much are you using prestashop version? 1.6 or 1.7 ?

You can check category page support support what positions? and move this module to that position. or If you want this module all page, you can move this module to footer position (HOOK FOOTER).

I'm using Prestashop 1.6.1.5.

I'm not a premium user. Whatever, I think the module is " blockcategories ", but I don't know how to hook it in the top. But I like how is it viewed now in a pc screen, I want to change it on mobile. I don't know how to change it in css. I'm using the Shift+Cntrl+M in Firefox, and the pixels where the module changes and goes in the bottom are 768px. I look for that in global.css but it's hard for me to know what I have to change.

Can someone explain a little bit more this point?

Thank you!

Edited March 8, 2019 by Adrian D. (see edit history)

[Adrian DMM]

Maybe with this 2 images you can understand better what i mean.

In the class row, we have left_column and center_column. When @media (max-width: 767px) { I see left_column below center column }.

When I see the site of the images on mobile, the left_column goes bottom, and i wanted above the content.

I need help.

Thank you!!

[Adrian DMM]

Finally I could change it. Here comes the solution for the rest of the people who needs the same.

In file global.js, i just commented 4 lines.

This solution says when the screen changes for phone or Ipad, change the position of the columns. So I block that change on JS.

//   TOGGLE COLUMNS
function accordion(status){
		leftColumnBlocks = $('#left_column');
		if(status == 'enable'){
			if(!isiPad){
		---->	// $(leftColumnBlocks).remove(); //
		---->	// $(leftColumnBlocks).insertAfter('#center_column').find('#categories_block_left ul.block_content').slideToggle('fast'); //
				$.uniform.update("#layered_form input[type='checkbox'], #layered_form input[type='radio'], select.form-control");
				if(typeof(categoryReload) != 'undefined') {categoryReload()}
				if(typeof(sliderList) != 'undefined') {initSliders()}
			}
			$('#right_column .block:not(#layered_block_left) .title_block, #left_column .block:not(#layered_block_left) .title_block, #left_column #newsletter_block_left h4').on('click', function(){
				$(this).toggleClass('active').parent().find('.block_content').stop().slideToggle('medium');
			})
			$('#right_column, #left_column').addClass('accordion').find('.block:not(#layered_block_left) .block_content').slideUp('fast');
		}else{
			if(!isiPad){
	---->	//	$(leftColumnBlocks).remove(); //
	---->	//	$(leftColumnBlocks).insertBefore('#center_column'); //
				$.uniform.update("#layered_form input[type='checkbox'], #layered_form input[type='radio'], select.form-control");
				if(typeof(categoryReload) != 'undefined') {categoryReload()}
				if(typeof(sliderList) != 'undefined') {initSliders()}
			}
			$('#right_column .block:not(#layered_block_left) .title_block, #left_column .block:not(#layered_block_left) .title_block, #left_column #newsletter_block_left h4').removeClass('active').off().parent().find('.block_content').removeAttr('style').slideDown('fast');
			$('#left_column, #right_column').removeClass('accordion');
		}
	}

You can close the post.

[kos2]

solution for ps 1.7 ?