Don't show images on mobile

wigglepee

Hi,

I am struggling with getting my site to look good on mobile devices.
The site is: https://covid-heatmap.iaik.tugraz.at/

I've chosen a layout which is kind of special, because the text and pictures are alternating left and right. This screws the mobile design of the page.
I think what would fix the problem is to hide all the images on mobile, but I don't know how to do it. Hiding on mobiles is only possible for sections, but my pictures are just backgrounds of item containers.

What is the easiest way to fix this?

Best regards,
Alex

Pablo

Hello,

As you said, hiding is possible only with the sections, there is no other ways.

You can also use the Custom CSS code, but it will require a lot of combinations with classess.

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

wigglepee

Thanks for the reply.

Would you please be so kind as to help me with this issue? 
I just want to get the site look visually appealing on mobile and keep the current look of the desktop site.

Best regards

Pablo

It's not at issue at all, it's rendering proper, because all of the html code is rendering from 'left to right' and this is basic for html.

You would have to attach custom class/id for the sections in the Muffin Builder and create a media query with display:none attribute for img.

This will help you surely:

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

https://www.w3schools.com/css/css_display_visibility.asp

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

wigglepee

Thank you.