How to set Logo/Search bar & Cart back next to each other

[AlexPar]

Hi guys

I set up my shop, learning by doing and changed a few thing that now need to be restored.   
 

The default template has the logo, the search bar and the cart next to each other on the same height. My site has them under each other and I just can't figure out how to get the original display of the modules back.

 

On smaller screens it's nice to have the three modules under each other, but on bigger screens (1920x1200px here) it sure looks better having the modules side by side. I wonder if I can have the three moduls side by side on bigger screens and under each other on smaller screens (maybe that is the default setting, I can't remember).

 

Anyway, help is really appreciated.

 

Here is the shop:

shop.alexpardini.com

Prestashop Version: 1.6.1.4

 

 

Thanks in advance

Alex

Edited August 27, 2017 by AlexPar (see edit history)

[AlexPar]

Hi,

 

Go to BO>Modules & Services> Positions and organize the module positions the way you want.

 

If you want to get default display back, you can uninstall and reinstall the default again.

And in order to do that you need to install another them that exist in your shop and then choose the default them again.

If you have only one theme on your shop, you can get one  theme from here :  http://ndiagasoft.com/en/12-themes

Thanks for your reply.

 

I tried to move the modules, but no matter what I do, they don't align side by side anymore. I suppose I changed more than just the modules order.

 

If I change theme, do I have to re-change all the graphics and block texts and maybe even products? 

[Scully]

Your search bar is the problem. It seems to have a width of 100% (or 1170px) only for the search bar. If the full width is used for one element there is no more space left for the logo and the cart block. From your blocksearch.css:

  #search_block_top #searchbox {
    float: left;
    width: 100%; }

Edited August 27, 2017 by Scully (see edit history)

[AlexPar]

 

Your search bar is the problem. It seems to have a width of 100% (or 1170px) only for the search bar. If the full width is used for one element there is no more space left for the logo and the cart block. From your blocksearch.css:

  #search_block_top #searchbox {
    float: left;
    width: 100%; }

Thanks guys.

 

I ended up replacing global.css with the original and changed blocksearch.css to "float: RIGHT;" instead of left. That fixed it. Width 100% is correct as it seems.

 

Thanks again. 

 

Cheers

Alex

 

[AlexPar]

One more question (please let me know if I have to open a new thread).

 

The site looks fine on desktop and phones, but on my tablet (iPad Air 2) in portrait mode, the cart is becomes double it's normal height. Why is that? Do I have to shorten the search bar a little in order for the cart to have enough space or is that just the way it is in portrait mode? How would I shorten the search bar properly?

 

Thanks.

 

Alex

[Scully]

Your cart doesn't look good in portrait mode - it's nor normal this way but all is a matter of sizing.

 

The remaining with for the cart isn't enough to fit in. Or to be precise, it's only the arrow down symbol which doesn't fit. You might resize your mobile logo by some pixels and it could be enough to give some roome the cart block. Our re-arrange the width a little by changing CSS.

 

Or retranslate the cart term (Leer) into leer with small 'L' and no brackets !! This would be the easiest way.

Edited August 27, 2017 by Scully (see edit history)

[Scully]

And btw - your facebook block doesn't look well. I recently saw this on another installation, so it might be not a design issue you caused on your own.

[AlexPar]

Thanks for your reply Scully!

 

It is strange. The cart is bigger in portrait mode on the iPad, but when I change the size of my desktop browser, it resizes perfectly fine. I always thought resizing the desktop browser "simulates" all the tablet sizes too.

Anyway, I can't find the "(leer)" translation in the Prestashop translations. I will try to resize my logo - maybe that will do the trick.

 

Thanks for the heads up regarding the Facebook module. I'll look into that too.

EDIT:

Changing the size of the logo doesn't work. No matter how small I make it, the cart still looks wrong. 

 

Cheers

Alex

 

p.s. regarding the Facebook block, I deleted and re-installed the module. Didn't help. It could look better, but I can live with it.

Edited August 28, 2017 by AlexPar (see edit history)

[Scully]

Hi Alex,

I took an iPad and could exactely reproduce what you said. A desktop browser can only simulate screen size but the final result may differ. For example PrestaShop loads different logos based on the browsers identification. So the real tablet shows different results than a desktop operating with the same screen size. Font rendering, scroll bars and other details add to such differences.

 

The term "(Leer)" is to be found under locatlization - translations - translate modules - and then under the section blockcart.

Edited August 28, 2017 by Scully (see edit history)

[AlexPar]

It worked! Thanks for your help, mate.

 

I was looking in the wrong section. With your help I've found the right entry and exchanged the "(leer)" with an "O". It's not a zero as the field doesn't accept numeric entries, but an "O" looks close enough.

Anyway, the mobile version looks fine now!

 

And thanks for remembering me that the (mobile) logo can be uploaded with a different size than the desktop version under  "Templates - logos - mobile". I might change the design of this one a little too.

 

 

Have a nice day!

Alex

[Scully]

Thumbs up!