Is it possible to Place a button over (on top) of an image/banner? I can do it on desktop view but as soon i switch to mobile view, the button jumps below the image/banner.
Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:
- CRM
- e-Commerce
- Kế toán
- Tồn kho
- PoS
- Project
- MRP
Câu hỏi này đã bị gắn cờ
hello Jas,'
Yes, it's possible to place a button on top of an image or banner in Odoo (or any web page) and ensure it stays correctly positioned across all screen sizes, including mobile view. This requires using proper CSS styling with responsive design principles.
for example >
.image-container {
position: relative; /* Establish a positioning context for child elements */
width: 100%; /* Ensure the container adjusts to the image size */
}
.banner-image {
display: block;
width: 100%; /* Make the image responsive */
height: auto; /* Maintain aspect ratio */
}
.btn-overlay {
position: absolute; /* Position relative to the container */
top: 50%; /* Center vertically */
left: 50%; /* Center horizontally */
transform: translate(-50%, -50%); /* Adjust position to the center */
background-color: #ff5733; /* Button background color */
color: white; /* Text color */
padding: 10px 20px; /* Add padding */
border: none; /* Remove border */
border-radius: 5px; /* Add rounded corners */
cursor: pointer; /* Change cursor on hover */
z-index: 10; /* Ensure it stays on top */
}
@media (max-width: 768px) { /* Adjust for mobile screens */
.btn-overlay {
padding: 8px 16px; /* Reduce button size */
font-size: 14px; /* Adjust text size */
}
}
Thank you for this!
What is the proper way to add this code manually? Edit the HTML for that page or use the block "Embed Code". Because it's not recommended to edit the HTML directly it says...
Bạn có hứng thú với cuộc thảo luận không? Đừng chỉ đọc, hãy tham gia nhé!
Tạo tài khoản ngay hôm nay để tận hưởng các tính năng độc đáo và tham gia cộng đồng tuyệt vời của chúng tôi!
Đăng kýBài viết liên quan | Trả lời | Lượt xem | Hoạt động | |
---|---|---|---|---|
|
1
thg 7 25
|
556 | ||
|
2
thg 6 25
|
2187 | ||
|
3
thg 4 25
|
2443 | ||
|
1
thg 4 25
|
1585 | ||
|
1
thg 10 24
|
1740 |