Change Mobile View According to Desktop View

[justanother_au]

Hi, I am new to Prestashop and still under discovering and learning its functionality.

I am using Prestashop 1.6.0.9 version with default bootstrap theme, is there possibility for me to change my mobile view and fonts (especially on android) according to my desktop view with this theme and version?

 

I am not getting the top banner, top menu bar and image slider in when I view from my mobile.

 

Anyone can help me with that? Thanks heaps!

[moraira]

yes friend it is posible you can do it with css, if you see global.css you will find something like this:

@media screen and (max-width: 400px) {
  @-ms-viewport {
    width: 320px; } }
.hidden {
  display: none !important;
  visibility: hidden !important; }

.visible-xs {
  display: none !important; }

tr.visible-xs {
  display: none !important; }

th.visible-xs,
td.visible-xs {
  display: none !important; }

@media (max-width: 767px) {
  .visible-xs {
    display: block !important; }

  tr.visible-xs {
    display: table-row !important; }

  th.visible-xs,
  td.visible-xs {
    display: table-cell !important; } }
@media (min-width: 768px) and (max-width: 991px) {
  .visible-xs.visible-sm {
    display: block !important; }

  tr.visible-xs.visible-sm {
    display: table-row !important; }

  th.visible-xs.visible-sm,
  td.visible-xs.visible-sm {
    display: table-cell !important; } }
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-xs.visible-md {
    display: block !important; }

  tr.visible-xs.visible-md {
    display: table-row !important; }

  th.visible-xs.visible-md,
  td.visible-xs.visible-md {
    display: table-cell !important; } }
@media (min-width: 1200px) {
  .visible-xs.visible-lg {
    display: block !important; }

  tr.visible-xs.visible-lg {
    display: table-row !important; }

  th.visible-xs.visible-lg,
  td.visible-xs.visible-lg {
    display: table-cell !important; } }

this is an example of the globall.css for default theme, and @media is the screen resolution

 

more os less

@media screen and (max-width: 400px) is a mobile

@media (max-width: 767px) is a mobile landscape

@media (min-width: 768px) and (max-width: 991px) is a tablet

@media (min-width: 992px) and (max-width: 1199px) is a tablet landscape

@media (min-width: 1200px) pc screen

 

for example is you do this for some control:

@media screen and (max-width: 400px) {
.Myexample {
color: #555454;
  text-transform: uppercase;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
} }

you define things for mobile device

[justanother_au]

Thank you for the information, moraira! I've go through my global.css file, and found that most of my @media line is with (min-width: 768px), is that the reason why my tablet and desktop view are same, but not mobile?

 

This is what I found in my global.css file according to your example,

 

@media screen and (max-width: 400px) {

  @-ms-viewport {

    width: 320px; } }

.hidden {

  display: none !important;

  visibility: hidden !important; }

 

.visible-xs {

  display: none !important; }

 

tr.visible-xs {

  display: none !important; }

 

th.visible-xs,

td.visible-xs {

  display: none !important; }

 

@media (max-width: 767px) {

  .visible-xs {

    display: block !important; }

 

  tr.visible-xs {

    display: table-row !important; }

 

  th.visible-xs,

  td.visible-xs {

    display: table-cell !important; } }

@media (min-width: 768px) and (max-width: 991px) {

  .visible-xs.visible-sm {

    display: block !important; }

 

  tr.visible-xs.visible-sm {

    display: table-row !important; }

 

  th.visible-xs.visible-sm,

  td.visible-xs.visible-sm {

    display: table-cell !important; } }

@media (min-width: 992px) and (max-width: 1199px) {

  .visible-xs.visible-md {

    display: block !important; }

 

  tr.visible-xs.visible-md {

    display: table-row !important; }

 

  th.visible-xs.visible-md,

  td.visible-xs.visible-md {

    display: table-cell !important; } }

@media (min-width: 1200px) {

  .visible-xs.visible-lg {

    display: block !important; }

 

  tr.visible-xs.visible-lg {

    display: table-row !important; }

 

  th.visible-xs.visible-lg,

  td.visible-xs.visible-lg {

    display: table-cell !important; } }

.visible-sm {

  display: none !important; }

 

tr.visible-sm {

  display: none !important; }

 

th.visible-sm,

td.visible-sm {

  display: none !important; }

 

@media (max-width: 767px) {

  .visible-sm.visible-xs {

    display: block !important; }

 

  tr.visible-sm.visible-xs {

    display: table-row !important; }

 

  th.visible-sm.visible-xs,

  td.visible-sm.visible-xs {

    display: table-cell !important; } }

@media (min-width: 768px) and (max-width: 991px) {

  .visible-sm {

    display: block !important; }

 

  tr.visible-sm {

    display: table-row !important; }

 

  th.visible-sm,

  td.visible-sm {

    display: table-cell !important; } }

@media (min-width: 992px) and (max-width: 1199px) {

  .visible-sm.visible-md {

    display: block !important; }

 

  tr.visible-sm.visible-md {

    display: table-row !important; }

 

  th.visible-sm.visible-md,

  td.visible-sm.visible-md {

    display: table-cell !important; } }

@media (min-width: 1200px) {

  .visible-sm.visible-lg {

    display: block !important; }

 

  tr.visible-sm.visible-lg {

    display: table-row !important; }

 

  th.visible-sm.visible-lg,

  td.visible-sm.visible-lg {

    display: table-cell !important; } }

.visible-md {

  display: none !important; }

 

tr.visible-md {

  display: none !important; }

 

th.visible-md,

td.visible-md {

  display: none !important; }

 

I have tried to add the control you mentioned, but it turned to be nothing changed on my mobile view. I will show you the look of my website's desktop, tablet and mobile view.

 

As you may see, there are top header, top horizontal menu, image slider on both desktop and ipad, but not mobile, plus the top Categories button on mobile is not working. And I have changed font style in css file, it turned out that the mobile font still remain the default theme font. Really hope to standardise the view of all devices, and hope there is a way out to fix them. Thanks!

 

 

 

 

[ITALIAstyleCasa]

Sto usando da poco Prestashop versione 1.6. con il tema bootstrap predefiniti   è riscontro lo stesso problema cioè di uniformare la prima pagina di presentazione del mio negozio  tra i vari dispositivi: pc tablet e cellulare. In particolare il problema è che le  HOMESLIDER   a scorrimento  appaiono solo nel pc    ma non si vedono nei dispositivi mobili come tablet e cellulari . Sapete come risolvere il problema ?

•