Skip ke Konten
Menu
Pertanyaan ini telah diberikan tanda
1 Balas
2172 Tampilan

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.



Avatar
Buang
Jawaban Terbai

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

    }

}


Avatar
Buang
Penulis

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

Post Terkait Replies Tampilan Aktivitas
1
Jul 25
533
2
Jun 25
2172
3
Apr 25
2427
1
Apr 25
1550
1
Okt 24
1723