General Notes of CSS

CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This is general notes of CSS.

Body Width that Expands or Shrinks on Zoom In or Out of Browser

Setting width of body or div of HTML document is using width and height, and the values can be px, %, vw, vh, and em. But setting width will not respect zooming in and out of browser when you hit Ctrl + -, Ctrl + = and Ctrl + 0. Meaning the width of body will not expands or shrinks on zooming in and out the browser.

To make the width of body or div so, setting max-width to px value is the trick. See:

body {
  margin: auto;
  max-width: 1000px;
  padding-left: 9px;
  padding-right: 9px;
}
@media only screen and (max-width: 700px) {
  body {
      width: 100%;
      padding-left: 9px;
      padding-right: 12px;
  }
}

 

Positioning Text Over Iamge

See: Positioning Text Over a Image

Comments

Post a Comment

Popular posts from this blog

printf - Printing with format

Image
printf formats and prints its arguments according to format, a character string which contains three types of objects: plain characters, which are simply copied to standard output, character escape sequences which are converted and copied to the standard output, and format specifications, each of which causes printing of the next successive value.   To Get Zero Leading Number $ printf "%03d" 1 $ 001   To Print Line by Line Including Speces in Terminal Interactive script in terminal sometime requires to clear terminal's face and print line by line without flickering the terminal's face. In that case, using printf "%-*.*s%s\n" "$MINCOL" "$MAXCOL" "string of the line" is a trick. For breaking down, %-*.*s is for width i.e., minimum number of columns and maximum number of columns. In above example, "$MINCOL" and "$MAXCOL" are variables of minimum and maximum...
Read more

rebase or no-rebase for git pull

Image
In the following scenario, the safest option is using git pull --rebase or setting configuration by git config pull.rebase true . Analysis of the scenario Current state on Remote : File aaaaa.txt exits and file bbbbb.txt does not exist yet. Current state on Local : File aaaaa.txt does not exist and file bbbbb.txt has been created. In above scenario and local repository on the computer, git push will fail with the following message: To https://codeberg.org/minsoehan/ttmy.git ! [rejected] main -> main (fetch first) error: failed to push some refs to 'https://codeberg.org/minsoehan/ttmy.git' hint: Updates were rejected because the remote contains work that you do not hint: have locally. This is usually caused by another repository pushing to hint: the same ref. If you want to integrate the remote changes, use hint: 'git pull' before pushing again. hint: See the 'Note about fast-forwards' in 'git push -...
Read more

dmmsh-wlr for managing outputs in Wayland using wlr-randr

Managing outputs in Wayland is smooth and easy by using wlr-randr while some compositors such as sway and hyprland have their own tools to manage outputs. See: sway-output(5) man page and Monitors - Hyprland Wiki respectively. To automate managing the outputs, the following dash script is provided by mshii. #!/bin/dash # check if it is run as root and exit if [ $(($(id -u))) -eq 0 ]; then exit 0 fi # test if it is already running and exit SCRIPTNAME= " $(basename -- $0) " if pidof -x " $SCRIPTNAME " -o $$ > /dev/null 2>&1; then notify-send -t 2700 "clean exit" "the script is already running" exit 0 fi # chech if it is in terminal or exit isinterminal_func () { case " $(ps -o stat= -p $$) " in *+*) echo "in terminal, continue..." ;; *) notify-send -t 2700 "clean exit" "please run it in terminal." ; exit 0 ;; esac } # simp...
Read more