Forem: Irvirty

Responsive Web Design

Irvirty — Fri, 22 May 2026 09:10:35 +0000

Beginning:

Responsive web design is a web design or CSS style that makes a website look good on any screen size.

Note: The most popular responsive design technique is "Mobile First Design".

To make the page optimized for mobile devices, first use this meta tag in the "head"
Сode:
<meta name="viewport" content="width=device-width, initial-scale=1" />

CSS Responsive Design can be achieved by using:

CSS units as percentages "%" (100%), "1fr" (for grid). "vw".
"media query".
CSS property: "max-width", "min-width".
Maybe something else.

A few of my own examples of what I use:

If the width of the screen is 500 pixels or less, we do something, or if it is more than 500 pixels, we do something else.

@media(max-width: 500px){
p {
color: red;
}
}

@media(min-width: 500px){
p {
color: blue;
}
}

This CSS code prevents images from overflowing and sets the automatic size for the picture:

img { max-width:100%; height: auto; display: inline-block; }

My responsive content or page "wrapper" class. This wrapper in the example makes the content no wider than 560px and a width of 100% makes it adaptive to any screen:

.wrapper { width: 100%; max-width: 560px; margin: 0 auto; }

Hide 1 and show 2 something depending on the screen size or dynamic style change. Hide the desktop version and show the mobile version of something instead. (A drop down menu or something else):

@media(width >= 500px){
p { color: red; }
}

@media(width <= 500px){
p { color: green; }
}

@media(width >= 500px){
.mobileVersion { display: none; }
.desktopVersion { display: block; color: red }
}

@media(width <= 500px){
.mobileVersion { display: block; color: green; }
.desktopVersion { display: none; }
}

Personal experience and advice or technique:

I write CSS styles simultaneously for any screen, my method is the method of overriding the style above with the style below (hierarchy in CSS), for example, there is a regular style for large screens:

.testClass { color: red; }

Then under it I add the same CSS class and properties from the style above with values for other screens using CSS Media Queries:

.testClass { color: red; }

@media (max-width: 500px) {
.testClass { color: orange; }
}

@media (max-width: 300px) {
.testClass { color: blue; }
}

@media (max-width: 100px) {
.testClass { color: yellow; }
}

so I override the style above and create a new style with overriding method for screens that are not larger than 500 pixels, then for 200px with overwriting , then for 100px etc

Note, testing and debugging:

Resize the browser window to see the style changes.
Launch the developer tool in the browser through the menu and "Inspect" page and change the size of the window there.
In developer tools, you can choose mobile phone simulation: "Responsive Design Mode" (phone icon).
Of course, a test on a physical device.

Source and Learning:

Responsive design - Learn web development | MDN - https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design
Responsive web design basics | Articles | web.dev - https://web.dev/articles/responsive-web-design-basics
Mobile-First CSS: Is It Time for a Rethink? – A List Apart - https://alistapart.com/article/mobile-first-css-is-it-time-for-a-rethink/

Doc:

Viewport meta tag - HTML: HyperText Markup Language | MDN - https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag
Beginner's guide to media queries - Learn web development | MDN - https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Media_queries
Using media queries - CSS: Cascading Style Sheets | MDN - https://developer.mozilla.org/docs/Web/CSS/CSS_media_queries/Using_media_queries CSS values and units - Learn web development | MDN - https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Values_and_units

Instruction: how to create a website (HTML file, webpage, or HTML document)

Irvirty — Thu, 21 May 2026 08:44:15 +0000

To create an HTML page and view it, we will use your pre-installed programs, such as a text editor and a browser.

First step: you need to create a file "index.html" with the ".html" extension. To do this, use this instruction to enable file extensions:

Create a file: index.html

The second step is to place this code in an index.html file. To do this, open your index.html file in a text editor or in a code editor, copy this code, paste it into the editor, and save the changes or save file (or save as "index.html").

code:

<!DOCTYPE html> <html> <head> <title>This is a title</title> </head> <body> <p>Hello world!</p> </body> </html>

Done. Open your index.html file in a browser, such as Chrome, Firefox, Edge, or Safari, to see the result.

Sources:

HTML - Wikipedia - https://en.wikipedia.org/wiki/HTML
Windows file extension - https://stackoverflow.com/a/71899738/22625440
MacOS file extension - https://support.apple.com/guide/mac-help/show-or-hide-filename-extensions-on-mac-mchlp2304/mac

Automatically change the theme in Ubuntu depending on the time of day

Irvirty — Thu, 16 Oct 2025 05:15:18 +0000

Steps:

Download the Gnome extension:

Night Theme Switcher - https://nightthemeswitcher.romainvigier.fr/ or https://extensions.gnome.org/extension/2236/night-theme-switcher/

Create 2 bash scripts:

day.sh with this code to change the theme:
gsettings set org.gnome.desktop.interface gtk-theme 'Adwaita-lgiht'; gsettings set org.gnome.desktop.interface color-scheme 'prefer-light';

night.sh:
gsettings set org.gnome.desktop.interface gtk-theme 'Adwaita-dark'; gsettings set org.gnome.desktop.interface color-scheme 'prefer-dark'

In the extension settings "Commands" insert these scripts to execute:

For sunrise: bash /path/day.sh
For sunset: bash /path/night.sh