Bỏ qua để đến Nội dung
Menu
Câu hỏi này đã bị gắn cờ
1 Trả lời
2201 Lượt xem

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.



Ảnh đại diện
Huỷ bỏ
Câu trả lời hay nhất

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 */

    }

}


Ảnh đại diện
Huỷ bỏ
Tác giả

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à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