In my cbc I will sample only mobile users. I have 3 cards per task and want to keep desktop layout so that all cards will be shown without the need to swipe. The levels doesn't have much text and I use hover over on some levels.
This looks perfect when I use Chrome on both Iphone 6 and Iphone 11. However, when using Safari which is the default browser on iPhone, all cards doesn't fit without me having to swipe a little bit. I played around with the below css and by changing the max-width I can see that it makes a difference when testing on mobile view on my computer, but the width in Safari on mobile doesn't change.
Any suggestions on how to make the cbc fit to the screen for all mobile devices on all browsers?
Thanks!
@media only screen and (max-width: 800px)
#error_box, .question, .progress_bar, .page_footer {
max-width: 417px;
}