Image Display Settings By Platform

🌟Features
#1

Would love it if image settings could be changed per platform rather than universally. I would rather have images displayed in-line on my phone (because there is no hover option on mobile) and would rather use the hover feature on my PC. As it is, I have to switch the setting every time I switch devices.

#2

I’m pretty sure this can be done with CSS. Sadly I don’t know how.

#3

personally, I leave it on inline and then use this CSS to shrink it to a thumbnail and hover enlarge it. best of both worlds.

.node-displayed-image {
    z-index: 9999;
}

 .node-displayed-image { 
  padding-top: 0px;
  max-width: 800px;
  max-height: 20px;
  vertical-align: top
}

.node-displayed-image:hover { 
  max-width: 100%;
  max-height: 100%;
}

And if you want some CSS to only apply to mobile, try wrapping it like this example:

If the browser window is 600px or smaller, the background color will be lightblue:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

There’s a lot of custom CSS code for inline images and hover in these forums, just search CSS, everyone likes it different. I don’t know exactly what the code for what you’re asking for is, but maybe you’ll find something you like.

1 Like
#4

I have a shared DynaList file of many of the CSS examples people have posted in the forum. There are several ways to manipulate images as well as examples specific for mobile platforms. All can be found at: https://dynalist.io/d/QSP8bOA8H2fdU3SrDg57gmdV.

FYI: I just added these two examples that BigChungus shared with us.

1 Like