Wikipedia:Reference desk/Archives/Computing/2023 January 19
| Computing desk | ||
|---|---|---|
| < January 18 | << Dec | January | Feb >> | January 20 > |
| Welcome to the Wikipedia Computing Reference Desk Archives |
|---|
| The page you are currently viewing is a transcluded archive page. While you can leave answers for any questions shown below, please ask new questions on one of the current reference desk pages. |
January 19
[edit]CSS help
[edit]Hello! Can someone hep me with this this CSS code for SqWiki main page? I'm an admin there.
I want the page's elements to get rearranged vertically for mobiles, which they do but they keep "remembering" the original width values. How can I make them have a width=100% value? - Klein Muçi (talk) 19:29, 19 January 2023 (UTC)
- You have this line: <meta name="viewport" content="width=1000"/>. That sets the page width manually. I prefer to use this: <meta name='viewport' content='width=device-width, initial-scale=1'>. That tells it to be the width of the device and don't scale it (which mobiles like to do). 97.82.165.112 (talk) 19:57, 19 January 2023 (UTC)
- 97.82.165.112, indeed but that's not something I can act upon freely. EnWiki also has the same line. I was mostly hoping for an on-wiki solution. Something I can change on one of the pages I brought above. — Klein Muçi (talk) 21:08, 19 January 2023 (UTC)
- Your blocks enforce a width of 54% using inline styles. Add something like:
- 97.82.165.112, indeed but that's not something I can act upon freely. EnWiki also has the same line. I was mostly hoping for an on-wiki solution. Something I can change on one of the pages I brought above. — Klein Muçi (talk) 21:08, 19 January 2023 (UTC)
#Mobile > div {
width: 100% !important;
}
- This will override those inline width settings that each block specify. However, those inline styles eventually should be moved into templatestyles and be rewritten to only apply above a certain width of the screen. (instead of overriding them with !important at narrow screens, back to what their defaults are) —TheDJ (talk • contribs) 23:18, 19 January 2023 (UTC)
- TheDJ, thank you very much! That solved it. I'm very new to CSS editing and I totally forgot about !important as a rule. It's been 2 days I've been researching about this online. I noticed a small problem though: If you check our main page from a phone now, you'll see that at its top header, the right part (where the total number of articles is located) gets rendered without any padding towards the right border. This doesn't happen while on "PC mode". I'm not sure what exactly is going wrong... :/
As for...those inline styles eventually should be moved into templatestyles...
: I understand what you mean. Would it be possible to provide a practical example for the said change so I don't have to totally trial and error my way through it? As it can be thought, errors don't generally go very well with main pages. — Klein Muçi (talk) 01:59, 20 January 2023 (UTC)- Actually... Right side padding is missing from all elements of the page. I just noticed... — Klein Muçi (talk) 03:10, 20 January 2023 (UTC)
- TheDJ, thank you very much! That solved it. I'm very new to CSS editing and I totally forgot about !important as a rule. It's been 2 days I've been researching about this online. I noticed a small problem though: If you check our main page from a phone now, you'll see that at its top header, the right part (where the total number of articles is located) gets rendered without any padding towards the right border. This doesn't happen while on "PC mode". I'm not sure what exactly is going wrong... :/
- This will override those inline width settings that each block specify. However, those inline styles eventually should be moved into templatestyles and be rewritten to only apply above a certain width of the screen. (instead of overriding them with !important at narrow screens, back to what their defaults are) —TheDJ (talk • contribs) 23:18, 19 January 2023 (UTC)