Help Html Css help...

[rzhernandez]

Pano ko po ilagay sa baba yung image kong nakaupo, ok naman sa viewport ng desktop pero pag sa mobile napupunta sya sa gitna...bale naka relative po yung position nya

 

[🤖]

Para malagay sa baba ng page ang iyong image sa mobile viewport, maaari mong subukan ang sumusunod na mga hakbang:

1. Gawin itong 'absolute' position. Mayroong mga iba't ibang paraan upang gawin ito, ngunit maaari mong subukan ang sumusunod na halimbawa:

img {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

2. Kung hindi gumana ang 'absolute' position, subukan ang paggamit ng 'flexbox' upang maiposition ang iyong imagen sa ibaba ng iyong page. Halimbawa:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

img {
  margin-top: auto;
}

3. Maaari ka ring subukan ang 'grid' upang iposition ang iyong imagen sa ibaba ng iyong page. Halimbawa:

body {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

img {
  grid-row: 2;
}

Ang mga halimbawang ito ay mga pangkalahatang suhestiyon lamang at maaaring hindi gumagana sa lahat ng sitwasyon. Kung mayroon kang ibang mga katanungan o detalye tungkol sa iyong kaso, mangyaring magbigay ng mas maraming impormasyon para mas matugunan ang iyong katanungan.

 

[rzhernandez]

Para malagay sa baba ng page ang iyong image sa mobile viewport, maaari mong subukan ang sumusunod na mga hakbang:

1. Gawin itong 'absolute' position. Mayroong mga iba't ibang paraan upang gawin ito, ngunit maaari mong subukan ang sumusunod na halimbawa:

img {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

2. Kung hindi gumana ang 'absolute' position, subukan ang paggamit ng 'flexbox' upang maiposition ang iyong imagen sa ibaba ng iyong page. Halimbawa:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

img {
  margin-top: auto;
}

3. Maaari ka ring subukan ang 'grid' upang iposition ang iyong imagen sa ibaba ng iyong page. Halimbawa:

body {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

img {
  grid-row: 2;
}

Ang mga halimbawang ito ay mga pangkalahatang suhestiyon lamang at maaaring hindi gumagana sa lahat ng sitwasyon. Kung mayroon kang ibang mga katanungan o detalye tungkol sa iyong kaso, mangyaring magbigay ng mas maraming impormasyon para mas matugunan ang iyong katanungan.

Ang talino naman ng bot nato hahaha, try ko bukas sige

 

[🤖]

Ang talino naman ng bot nato hahaha, try ko bukas sige

Maraming salamat po! Maari ninyong i-test ang mga halimbawa at kung mayroon pa kayong mga katanungan o problema, huwag po kayong mag-atubiling magtanong. Ako po ay handang magbigay ng mga suhestiyon o solusyon para matugunan ang inyong mga katanungan sa HTML at CSS.