How to visualize the version of smartphones into tablet

[Nick797]

Hello,

I have a problem with my site when I view it on tablets. Basically I would like the tablet version (768 px to 991 px) to be the same as the smartphone version. The problem is that changing the parameters "@media" does not change anything and I can not understand why. As soon as the screen changes from 767px to 768px it changes the display of the home. Can you give me a hand and tell me how to do it? It is the only problem I have before the official launch and I would be very grateful.

homestyle.css

[Pierre_d]

This happens in the Smarty templates (.tpl files in your theme directory). PS uses difference CSS to render <div></div> based on the device screen resolution. If you inspect your pages, you'll see things such as class="col-xs-n col-md-m" where n and m are numbers between 1 and 12. The page width is supposed to be 12 columns large.

For example, "col-xs-12 col-md-6" tells Smarty to display the corresponding <div> full screen on extra small (xs) screen and half screen on medium (md) screen.

So, you need to change the templates to do this... (good luck ;)).

[Nick797]

2 hours ago, Pierre_d said:

This happens in the Smarty templates (.tpl files in your theme directory). PS uses difference CSS to render <div></div> based on the device screen resolution. If you inspect your pages, you'll see things such as class="col-xs-n col-md-m" where n and m are numbers between 1 and 12. The page width is supposed to be 12 columns large.

For example, "col-xs-12 col-md-6" tells Smarty to display the corresponding <div> full screen on extra small (xs) screen and half screen on medium (md) screen.

So, you need to change the templates to do this... (good luck ;)).

 

2 hours ago, Pierre_d said:

This happens in the Smarty templates (.tpl files in your theme directory). PS uses difference CSS to render <div></div> based on the device screen resolution. If you inspect your pages, you'll see things such as class="col-xs-n col-md-m" where n and m are numbers between 1 and 12. The page width is supposed to be 12 columns large.

For example, "col-xs-12 col-md-6" tells Smarty to display the corresponding <div> full screen on extra small (xs) screen and half screen on medium (md) screen.

So, you need to change the templates to do this... (good luck ;)).

 

Hi Pierre_d thanks for the reply. I tried many times but it didn't work. I attached my template header-style, Could you watch it and tell me? The site is: www.mondoortopedico.com and from 768px to 991px don't change nothing. 

header-style-06.tpl

[Pierre_d]

If I understand correctly, you want to collapse/expand the menu "Parti del corpo" on tablet. This is a mega menu coming with the theme you installed (codazone?). When I inspect the page, I can see this mega menu doesn't use the standard PS mechanism to collapse certain <div> on small screen. It looks like it's using ajax. You need to contact the vendor.

[Nick797]

Hi Pierre,

No i would like to see the logo on the left, the shopping cart and the main menu button on the right, like the mobile version. When you inspect on tablet view you can see that these three elements do not appear on the screen. Also the icon of the search is not align with the bar. The megamenu it is ok like that, but the major issue is this. Please look at the images below. Thank you.

[Pierre_d]

Hi Nick, I'm sorry not being able to help you further. I've tried your site in the Firefox adaptive view. Yes, the cart and logo disappear when the width is above 767 but reappears in the 1024 width. Have you changed something ? I would say the the problem is related to the CSS class .col-sm-x. Or it's a bug with the template ?

[Nick797]

Hi Pierre, 

I resolved the issue in the header in these days, but the menus still be unvisibule from 768px to 1024px. How could I do for resolve this issue? I have already wrote to the vendor and he has not reply yet, hope he'll do it really soon. 

Try to check the site now please: https://www.mondoortopedico.com