# CSS rendering problem with AnkiMobile (Unlike the Desktop app) : visibility:collapse;
**URL:** https://forums.ankiweb.net/t/css-rendering-problem-with-ankimobile-unlike-the-desktop-app-visibility-collapse/646
**Category:** Help
**Created:** [July 1, 2020, 12:26pm UTC](https://forums.ankiweb.net/t/css-rendering-problem-with-ankimobile-unlike-the-desktop-app-visibility-collapse/646 "2020-07-01T12:26:33Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@mathematica](https://forums.ankiweb.net/u/mathematica)
#### Post date: [July 1, 2020, 12:26pm UTC](https://forums.ankiweb.net/t/css-rendering-problem-with-ankimobile-unlike-the-desktop-app-visibility-collapse/646/1 "2020-07-01T12:26:33Z")
I have a problem with the CSS rendering of my cards with the IOS application. I use media queries so that my cards adapt to different screens, whether or not displaying certain elements.
To do this, I use the visibility: collapse property. This works well with the Anki for Mac application, but does not give the desired rendering on iPhone. I apply this property to a table and according to W3C:
“This value removes a row or column. The space taken up by the row or column will be available for other content.”
Here is for example my HTML code:
```
```
and the CSS code:
.pasalecran {
visibility: collapse;
}
The problem is that in the iOS app, the value “collapse” is interpreted as the value “hidden”. This means that the content {{Verso1}} is not displayed BUT the space occupied by {{Verso1}} always takes up space.
Here’s what I get with the Mac app:
[http://pcsi2.net/Anki/AnkiForMac.png](http://pcsi2.net/Anki/AnkiForMac.png)
and with the AnkiMobile app:
Thank you very much (in advance) for your advice. Is this a known problem? I specify that I do not wish to use display: none; because the {{Verso1}} content would come out of the stream, which would cause other problems when changing the orientation of a smartphone for example.
---
### Author:  [@mmdj2](https://forums.ankiweb.net/u/mmdj2)
#### Post date: [July 1, 2020, 12:44pm UTC](https://forums.ankiweb.net/t/css-rendering-problem-with-ankimobile-unlike-the-desktop-app-visibility-collapse/646/2 "2020-07-01T12:44:02Z")
```
{{#Verso1}}
| {{Verso1}} |
{{/Verso1}}
```
this will make
```auto
| {{Verso1}} |
```
not show at all when `{{Verso1}}` is empty.
[Read more - Anki manual](https://docs.ankiweb.net/#/templates/generation?id=conditional-replacement)
---
### Author:  [@mathematica](https://forums.ankiweb.net/u/mathematica)
#### Post date: [July 1, 2020, 1:04pm UTC](https://forums.ankiweb.net/t/css-rendering-problem-with-ankimobile-unlike-the-desktop-app-visibility-collapse/646/3 "2020-07-01T13:04:47Z")
Thank you for your reply. I understand the interesting technique, but here, {{Verso1}} is not empty and {{Verso2}} is not empty because I want to display {{Verso1}} or {{Verso2}} depending on the size of the screen.
So I don’t think I can use the example you give.
My code works very well with the Desktop application for Mac (I will test under windows) but not with AnkiMobile.
---
### Author:  [@mmdj2](https://forums.ankiweb.net/u/mmdj2)
#### Post date: [July 1, 2020, 1:34pm UTC](https://forums.ankiweb.net/t/css-rendering-problem-with-ankimobile-unlike-the-desktop-app-visibility-collapse/646/4 "2020-07-01T13:34:34Z")
if by different screens you mean “mobile” and “desktop” you can use `.mobile` class instead of what you’re using.
```auto
.something {font-size: 24px}
.mobile .something {font-size: 12px}
```
and use
```auto
{{Field}}
```
on your template.
in this way, anki will use `{font-size: 12px}` on mobile, and `font-size: 24px}` on other platforms
---
### Author:  [@mathematica](https://forums.ankiweb.net/u/mathematica)
#### Post date: [July 1, 2020, 9:58pm UTC](https://forums.ankiweb.net/t/css-rendering-problem-with-ankimobile-unlike-the-desktop-app-visibility-collapse/646/5 "2020-07-01T21:58:05Z")
Thanks for your example. I will use it in my explanations I did not know the class. Mobile, but it’s interesting, but I don’t think my problem is there because I know how to manage different screens with media queries.
Here is a card and the HTML and CSS code of the type I used. I reproduced your example.
[Click on Capture-1.png](http://www.pcsi2.net/Anki)
[Click on Capture-2.png](http://www.pcsi2.net/Anki)
Here’s what I get with the MAC app :
Click on Capture-3.png (I can just add 2 links and 1 image)
I don’t want to use the value “hidden” because it produces unwanted space.
This is why I use the value “collapse” applied to a row in an array and which allows me to free up the space used by the row whose property “visibility” has the value “collapse”.
Click on Capture-4.png
Here’s what I get, with the Mac app:
Click on Capture-5.png
and with AnkiMobile:
Click on Capture-6.jpeg
This is what is expected. However, I would like to remove a line from this table with AnkiMobile but that line remains visible with the Mac application.
So I changed the CSS code:
Click on Capture-7.png
I get this with the MAC app, this is what I want:
Click on Capture-8.png
But (bad surprise) with AnkiMobile:
Click on Capture-9.jpeg
My problem is that the CSS code “visibility: collapse;” is not interpreted correctly (I think) with AnkiMobile while it is interpreted correctly with the Mac application.
Thank you for your example and of course your time.
---
### Author:  [@dae](https://forums.ankiweb.net/u/dae)
#### Post date: [July 2, 2020, 12:50am UTC](https://forums.ankiweb.net/t/css-rendering-problem-with-ankimobile-unlike-the-desktop-app-visibility-collapse/646/6 "2020-07-02T00:50:29Z")
AnkiMobile uses Apple’s WebKit to render cards, and it appears it does not support the functionality you desire:
[https://caniuse.com/#feat=mdn-css\_properties\_visibility\_collapse](https://caniuse.com/#feat=mdn-css_properties_visibility_collapse)
Curiously that page seems to indicate Chrome behaves the same way, so I’m surprised it works in the computer version. Perhaps you could accomplish the same thing by using flexbox or a grid instead?
---
### Author:  [@mathematica](https://forums.ankiweb.net/u/mathematica)
#### Post date: [July 2, 2020, 11:19am UTC](https://forums.ankiweb.net/t/css-rendering-problem-with-ankimobile-unlike-the-desktop-app-visibility-collapse/646/7 "2020-07-02T11:19:25Z")
Thanks a lot for your answer ! I understood the problem: webkit.
In fact, I did some tests and my code works under Firefox; Chrome and even Opera, but Safari misinterprets visibility: collpase;
Pity. This will force me to make clever calculations on the space to be removed depending on the size of the font …
Thank you again for your comment.
---
### Author:  [@system](https://forums.ankiweb.net/u/system)
#### Post date: [May 1, 2023, 8:03am UTC](https://forums.ankiweb.net/t/css-rendering-problem-with-ankimobile-unlike-the-desktop-app-visibility-collapse/646/8 "2023-05-01T08:03:15Z")