Override css or modules for Mobile view

[seog]

Hello

 

I have PS 1.6.1.1 custom theme and after of much work now I have Mobile view problems.

 

I am thinking about:

 

1) In themes/default-bootstrap/mobile/css add custom css only for mobile or table view

 

Would be possible override css only for mobile view?

What folders should I put in css files of default-bootstrap and modules?

 

2) Would it be better to duplicate modules by renaming them in diferent names and enabling original module from modules backoffice only for pc vision and enabling duplicate module only for mobile and tablet versions?

 

Best regards

[rocky]

You shouldn't be overriding modules separately for mobile view. You should only override once and use media queries for mobile and tablet view like this:

@media (max-width: 480px) {
   // Mobile view CSS here
}
@media (max-width: 768px) {
   // Tablet view CSS here
}

Change 480px to the maximum width you want considered mobile view and 768px to the maximum width you want considered tablet view.

[seog]

Hi Rocky

 

The issue is although I have in css files @media (max-width: 480px)  and  @media (max-width: 768px), the positions are broken due to my css works as position:relative, left:-6em etc....

 

Then I understand my only method for fix these issues could be adding new css files for themes/default-bootstrap/mobile or overriding modules

 

Example: I want show only in mobile version default blockart module displaying only a small icon, but the modifications of blockart module display the blockart as desktop version despite having the css the instruction @media (max-width: 480px)

Example 2: I have very span class for add images and althought I add class img-responsive, these images broke mobile version

 

NOTE: I tried without success to add again removed class as col-sm, pull-right, clearfix...

 

What do you think about it?

Edited February 28, 2017 by seog (see edit history)

[seog]

Hello

 

I solved much issues using the next code in css files

  @media (max-width: 767px) {
  "repeatclassname" {
	visibility: hidden; } }

 

Do you know what css code to add for fully replace the custom blockart module by a simple cart icon ?

 

best regards

[rocky]

You'll need to add code in a separate div in the TPL file that has just the simple cart icon, then use CSS to show it only in mobile and tablet view.