CSS that is tied only to a certain screen resolution

Questions & Help
1

I have three devices, a phone (2796‑by‑1290-pixel resolution at 460 ppi), tablet (2266×1488 px at 326 ppi), and laptop (3072 x 1920 native resolution at 226 pixels per inch). Using Logseq is wonderful on the laptop. On the phone and tablet not so much. On my tablet, I can’t read the text. I understand the way that is usually suggested to deal with my problem and change the font size. For example type into “Edit Custom CSS” page something like the following:
:root {
–ct-text-size: 18px;
–ct-line-height: 1.6;
}
This changes the laptop presentation of Logseq and creates problems in the other two devices for how the data is arranged on screen. Does anyone have enough experience with CSS that they can provide CSS that changes font size and spacing relative to different screen sizes on different devices? Can CSS code be targeted to just a single screen resolution and not apply itself to other screen resolutions? Thanks for any help!

2

You are probably looking for @media at-rule . But why not use a different css per device? Isn’t each device separate with its own Logseq installation, customization (css, plugins) etc.?

3

Thanks for responding. Any CSS I put on the “Edit Custom CSS” page on any single device running Logseq is transferred to all three devices. I’m looking for a way to set up each device with CSS that maximizes readability for each different screen resolution.

4

Here is some CSS code I found. Do other folks use such code to accomplish what I’m wanting?

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  /* Styles */
}


/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
  /* Styles */
}

/* iPhone 4 - 5s ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
}

/* iPhone 6 ----------- */
@media
only screen and (max-device-width: 667px) 
only screen and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 6+ ----------- */
@media
only screen and (min-device-width : 414px) 
only screen and (-webkit-device-pixel-ratio: 3) {
  /*** You've spent way too much on a phone ***/
}

/* Samsung Galaxy S7 Edge ----------- */
@media only screen
and (-webkit-min-device-pixel-ratio: 3),
and (min-resolution: 192dpi)and (max-width:640px) {
 /* Styles */
}
5

That’s the type of code to accomplish what you want. You need one paragraph for each device, then to fill each one with the desired css rules.

Alternatively, you may try excluding some files from syncing among the devices, as this may cause further issues in the future.

6

I’ve been plugging in actual resolution numbers into the CSS above, but it doesn’t seem to be doing the job. For example, my tablet is 2266×1488 px at 326 ppi. If you have time could you show me how this works by just setting up the CSS code to fit that resolution? If I put in the full 2266x1488, nothing happens. But if I put something less than that resolution, then it doesn’t seem that I am just targeting my tablet to receive its unique instructions to increase font size and line height.

7

Could keep the default rules for one device, then filter the remaining devices to apply different rules. For example, to apply some rules to all your devices except of your laptop, could use code like this:

@media only screen 
and (min-resolution: 300dpi) {
  /* Styles for devices with resolutions higher than the laptop's */
}

But you will have to experiment with various values to find what works in your exact case.

8

I’ve have tried all sorts of options, spending several hours messing with CSS, but I still can’t get code to target just my tablet.

This code works to change all my devices, blowing up my laptop Logseq:

:root {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 200;
}

But when I add “@media”, none of my devices are recognized, so font sizes on my tablet default back to their original tiny font size:

@media only screen and (min-resolution: 320dpi) {
  :root {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 200;
}
}

Any suggestions? The amount of effort to figure this out is a significant weight to disincline someone without coding experience to enjoy using Logseq. Controlling font size between devices is a fundamental human right, right?

9

Please save this type of conversation for the General category.

The above code generally works. If it doesn’t for you, either:

  • There is some mistake.
    • Should use the inspector (Ctrl + Shift + i) to find out.
  • Your devices don’t operate on their nominal maximum resolution.
    • Try with a much smaller resolution (e.g. 30dpi) to get something that is recognized, then increase the value in smaller steps, to find at what resolution each device is filtered out.
      • After you have the actual operational values, we can come up with the right filter.