การแจ้งเตือน
ลบทั้งหมด

[ได้คำตอบแล้ว] Background image เราซ่อนไม่ให้แสดงบนมือถือได้มั้ยครับ

   RSS

0
หัวข้อเริ่มต้น

ใช้ Generate Block จัดหน้าแล้วมีโจทย์ที่ต้องใส่ Background ด้านซ้ายและขวา ก็ทำได้ปกติแต่ว่าในหน้าจอมือถือภาพมันจะมาซ้อนกับตัวหนังสือครับ ไม่ทราบว่าท่านไหนพอทราบวิธีแก้มั้ยครับ

Screen Shot 2564 06 23 at 13.13.29
Screen Shot 2564 06 23 at 13.13.08
แท็กหัวข้อ
5 คำตอบ
0
หัวข้อเริ่มต้น

Update ครับ สำหรับ block อื่นๆ ต้องใส่ background-image: none !important; เข้าไปด้วยตามที่หลายคนบอกมันถึงจะซ่อนตัวให้ครับ สงสัยมันจะเกี่ยวกับการมี position: relative; เพราะ block อื่นไม่มี

อาจจะฟังดูมั่วๆ ต้องขออภัยด้วยนะครับถ้ามันทำให้ท่านที่เข้ามาอ่านเกิดความสับสน

Screen Shot 2564 06 23 at 17.08.27

 

โอ้ ครับผม

แต่ส่วนตัวคิดว่าเป็นที่ background-image: none มากกว่านะครับ

หรือบางทีถ้าใช้ backgorund: none; เลย ที่เหลือก็จะหายไปหมดเหมือนกันครับ

1
หัวข้อเริ่มต้น

สรุปว่าที่ทำไปมั่วจริงครับ พอไปดูบนมือถืออีกทีแล้วมันก็ยังมี background อยู่

ตอนนี้ใช้วิธี Duplicate เป็น 2 blocks แล้วให้ตัวหนึ่งไม่มี background แล้วก็ใส่ class แยกกัน _desktop กับ _mobile

ส่วน block อื่นใช้ 

@media all and (max-width: 768px) {
  .no-bg-img {
    background-image: none !important;
  }
}

ก็จบเลย

0

ตรง backgroud position ลองเปลี่ยนเป็น center ดูได้มั้ยครับ มันจะทำให้จัดกึ่งกลาง แบบนี้บนมือถือก็น่าจะไม่เห็นละ

0
หัวข้อเริ่มต้น

แสดงว่าเราต้องใช้ภาพแบบยาวเต็มความกว้าง ไม่ใช่ภาพขนาดเล็กแล้วใส่ไว้ที่มุมซ้ายเท่านั้นใช่มั้ยครับพี่

ถ้าแบบนั้นขนาดหน้าจอที่เปลี่ยนไป เล็กกว่าความกว้างของรูปก็จะทำให้ไม่เห็นเหมือนกันใช่มั้ยครับ

 

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

มีคำแนะนำมั้ยครับ

ขอบคุณครับ

Homepage

 

 

0
หัวข้อเริ่มต้น

ล่าสุดทำตามหลายคนเขาให้ใส่คลาส no-bg-img เข้าไป

@media all and (max-width: 768px) {
  .no-bg-img {
    background-image: none !important;
  }
}

แต่ก็ไม่ยังแสดงตัวอยู่ดี ผมเห็นใน block มันมีคลาสนึง ใส่ position ไว้เป็น relative แล้วผมมั่ว CSS เข้าไปแบบนี้

@media all and (max-width: 768px) {
  .no-bg-img {
    position: inherit;
  }
}

ผมก็ไม่เข้าใจว่า position: inherit มันไปฆ่า position: relative; ได้ยังไงนะครับ แต่มันใช้ได้ ไม่แน่ใจเหมือนก้นว่ามีปัญหาอะไรตามมาหรือเปล่า ถ้ามีเดี๋ยวจะมาบอกนะครับ

(

Screen Shot 2564 06 23 at 16.47.07

ตอนแรกนึกว่าต้องกล้บไปใช้ KadenceBlock ซะแล้ว เห็นมันมี Force no image for mobile อยู่เวลาเราเลือกเซตในส่วนของ Mobile)

แบ่งปัน: