Skip to Content
Menu
This question has been flagged
1 Odpoveď
2177 Zobrazenia

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
Zrušiť
Best Answer

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
Zrušiť
Autor

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

Related Posts Replies Zobrazenia Aktivita
1
júl 25
538
2
jún 25
2175
3
apr 25
2430
1
apr 25
1561
1
okt 24
1726