Jump to content

[SOLVED] Left Column shown in bottom in smartphone


Recommended Posts

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?

ExampleLeft_Column.thumb.jpg.bea4898687fc5c6b5c4329a1c7b12393.jpg

Edited by Adrian D.
I solved the problem (see edit history)
Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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 by Adrian D. (see edit history)
Link to comment
Share on other sites

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!!

ExampleCategory.jpg

left-center.jpg

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...