Don't show images on mobile

wigglepee · April 2020

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 · April 2020

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

wigglepee · April 2020

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 · April 2020

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

wigglepee · April 2020

Thank you.

Don't show images on mobile

Comments

This website uses cookies