Searchbox and Cart on the same row - Responsive

[Luchano]

Hello Prestashop community,

 

I have one problem to solve today and I hope you can help me out with it!!

 

You can see on the screenshot below that I have reduced the search box field and the cart box so that they can fit on the same line, but it does not happen automatically.

 

Can someone give me the solution for achieving this?

 

 

Many thanks for everyones help!!

 

LG

[rocky]

Do you have a URL to your website? Then we can use Firebug to figure out what's going wrong.

[Luchano]

Hello rocky,

 

Thanks for replying!

 

The url is the following:

 

https://www.lumiadent.bg/shop/en

 

I have reverted the original code for the searchbox and the cart to be 100% width.

 

From my basic understanding, the webpage is split into three columns. The logo image is placed in the left column, the searchbox is placed in the center column and the cart is placed in the right column. When the browser window is shrunk to 480px these columns get placed under one another. Is it possible to display two of these columns next to each other when the website is loaded onto a mobile device?

 

Thanks a bunch!

 

LG

[rocky]

Change line 26 of themes\default-bootstrap\modules\blocksearch\blocksearch-top.tpl from:

<div id="search_block_top" class="col-sm-4 clearfix">

to:

<div id="search_block_top" class="col-xs-6 col-sm-4 clearfix">

and line 27 of themes\default-bootstrap\modules\blockcart\blockcart.tpl from:

<div class="col-sm-4 clearfix{if $PS_CATALOG_MODE} header_user_catalog{/if}">

to:

<div class="col-xs-6 col-sm-4 clearfix{if $PS_CATALOG_MODE} header_user_catalog{/if}">

This should display the two blocks side-by-side in mobile view.

[Luchano]

Brilliant!

 

The proposed solution did the job perfectly

 

Just for learning purposes, what we did here was to add the col-xs-6 in both .tpl files, where "xs" defines the columns just for mobile view and "6" puts the two modules in two equal columns. Is that correct?

 

Thank you rocky for the immense help!

 

LG

[rocky]

That's right. The xs is for mobile view and the 6 means 6/12ths of the full width.