สอบถามตัวฟอร์ม ไม่หดตามหน้าจอครับ

[[email protected]]

ผมเพิ่มเติมในส่วนของ

โค้ด: เลือกทั้งหมด

display : flex ;

และลบ

โค้ด: เลือกทั้งหมด

position : relative ;

และเปลี่ยนจาก px เป็น vh แล้ว แต่พอเลื่อนหน้าจอส่วนอื่นที่ไม่ใช่โปรแกรม ตรงส่วนฟอร์มเค้าไม่หดตามที่ควรครับ ตรงส่วนนี้ผมต้องดูแก้ไขตรงไหนเพิ่มเติมครับ

2023-01-18 13_25_16-Workshop - ถอด figma.png (93.86 KiB) Viewed 961 times

ขออนุญาตตรบกวนสอบถามครับ


ขอบคุณครับ

[[email protected]]

สอบถาม Chat GPT เพิ่มเติม

Q : My form html is not responsive how can is do??
A : To make your HTML form responsive, you can use CSS media queries. Media queries allow you to apply different CSS styles based on the screen size of the device that is viewing the webpage. For example, you can use a media query to adjust the font size and spacing of the form elements when viewed on a smaller screen.

Here is an example of a media query that makes the font size of form elements smaller when the screen width is less than 600px:

โค้ด: เลือกทั้งหมด

@media only screen and (max-width: 600px) {
  form {
    font-size: 12px;
  }
}

Additionally, you can use CSS grid and flexbox layout to create a responsive form. Flexbox provides a way to align and distribute space among items in a container, while grid layout allows you to create a two-dimensional grid of rows and columns to organize the form elements.

You can also use Bootstrap or Foundation framework, which are popular front-end frameworks that provide pre-built responsive grid systems and other useful tools for creating responsive designs.

You can also use JavaScript/Jquery to make the form responsive.

Please let me know if you need more help, and what is the current layout of your form.


Q:

โค้ด: เลือกทั้งหมด

main {
  position: relative;
  width: 642px;
  height: 675px;
  top: 4px;
  
  background: #FFFFFF;
  border: 1px solid #337AB7;
  text-align: center;
  align-items: center;

  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 275;
  font-size: 14px;
  line-height: 2.5;
}

can you make this to reponsive?
A: To make the 'main' element responsive, you can use CSS media queries to adjust the width and height of the element based on the screen size of the device.

Here is an example of a media query that changes the width and height of the 'main' element when the screen width is less than 600px:

โค้ด: เลือกทั้งหมด

@media only screen and (max-width: 600px) {
  main {
    width: 90%; /* adjust the width to be a percentage of the screen width */
    height: auto; /* adjust the height to automatically adjust based on the content */
  }
}

Another way to make the element responsive is to use CSS flexbox and grid layout. This will allow you to create a flexible layout that adjusts to the screen size.

Additionally, you can use Bootstrap or Foundation framework which are popular front-end frameworks that provide pre-built responsive grid systems and other useful tools for creating responsive designs.

You can also use JavaScript/Jquery to make the form responsive.

It's important to note that the solution will be different depending on the design and layout you are trying to achieve, so you may need to adjust the width and height values to get the desired result.

[eange08]

ส่วนกำหนด width จะต้องใช้หน่วย vw ค่ะ (vh จะกำหนดความสูง)

โค้ด: เลือกทั้งหมด

width:50vw;
height:50vh;

[[email protected]]

You can also use Bootstrap

แนะนำให้ใช้ Bootstrap แทนการเขียน css ด้วยตัวเอง
ศึกษาการใช้งาน built-in classes ต่างๆ เพื่อใช้ในการทำงาน

[[email protected]]

ลองเปลี่ยนหน่วยเป็น vw vh ตัวฟอร์มมันเขยิบตามหน้าแล้วครับ แต่พอเป็นจอเต็ม desktop มันเหมือนจะใหญ่เกินไป มีวิธีกำหนดให้มันใหญ่พอดี หรือ ไม่ใหญ่เกินไปกว่านี้ไหมครับ

1.png (20.46 KiB) Viewed 920 times

2.png (99.01 KiB) Viewed 920 times

ขอบคุณครับ

[eange08]

You can also use Bootstrap

แนะนำให้ใช้ Bootstrap แทนการเขียน css ด้วยตัวเอง
ศึกษาการใช้งาน built-in classes ต่างๆ เพื่อใช้ในการทำงาน

แนะนำใช้ Bootstrap มาใช้ จะจัดหน้าได้ง่ายและเร็วขึ้นค่ะ
ลองศึกษา การใช้งาน Grid ใน bootstrap เบื้้องต้น https://www.mindphp.com/%E0%B8%9A%E0%B8 ... asics.html
การแบ่ง คอลัมน์ (Grid System) ด้วย CSS https://www.mindphp.com/%E0%B8%9A%E0%B8 ... rap-4.html