Jump to content

dantepicchioni

Members
 View Profile  See their activity

  • Posts

    8

  • Joined

  • Last visited

dantepicchioni's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. dantepicchioni
    Here is the answer: Changed width: 100% to width: auto Changed max-width: 14% to max-width: auto Deleted the wrap stuff in the row class
  2. dantepicchioni
    🙁🙁🙁
  3. dantepicchioni
    ☚ī¸
  4. dantepicchioni
    Dear Colleagues, Hi. I am a sleep researcher who lives in the United States of America. I hate abbreviations; that is why I spelled out "United States of America." When I am not coding for my research, I love being a goofball, so you might see me say some weird things. Keep in mind that they are attempts at humor. I am learning HTML+CSS+JS (yes, I see the contradiction from what I just said) because I need to display 462 images in a particular grid with accompanying descriptions to interpret some data. I guess you could call it a data science coding project. The images are color-coded cross-correlation matrices. Sincerely and In Good Humor, Dante
  5. dantepicchioni
    Dear Colleagues, Hi. When you say "You cannot have more than one element with the same id in an HTML document" (https://www.w3schools.com/html/html_id.asp), why do you use the word "cannot"? Should this not be "should not" because you clearly can. Sincerely, Dante
  6. dantepicchioni
    Dear Colleagues, Hi. I know I could discover the answer for myself if I spent another month learning HTML+CSS+JS, but I would really appreciate some help. I modified How To - Responsive Image Grid (https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp) by deleting the @media code so that the images would not stack when the browser window size was changed and by changing all images in the row to wedding.jpg so that I would have a uniform sized image in all cells of the grid. Fine. Good. I next changed .column img { margin-top: 8px; vertical-align: middle; width: 100%; } to .column img { margin-top: 8px; vertical-align: middle; width: 100%; height: 100px; object-fit: none; object-position: 50% 6%; } with the goal of cropping wedding.jpg so that only the vicinity of the bride's mouth would be displayed. I solved one problem but created another. Now when I resize the browser window, the cropped section of the image becomes further cropped. I want the cropped section to stay the same when I resize the browser window and want it to scale down. Any help or advice on what tutorial contains the answer would be greatly appreciated. See attached for the gory details. Sincerely, Dante 06_02.htm
  7. dantepicchioni
    Thank you for your patient, intelligent, and kind response.
  8. dantepicchioni
    Dear Colleagues, Hi. Why is there no comma between .column and img here https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_grid ? If I sort of combine Examples 3 and 6 from https://www.w3schools.com/css/css_selectors.asp then I can create a problem. The following code only works if the comma is present. <!DOCTYPE html> <html> <head> <style> .test, h3 { text-align: center; color: blue; } </style> </head> <body> <h2 class="test">Hello World!</h1> <h3>Hello World!</h1> </body> </html>
×
×
  • Create New...