Docs

[Lely]

Hi There,

Please update this:

.page-id-1499 .x-column .x-btn {
    position: absolute;
    left: 10%;
    bottom: 30px;
}

To this

@media (min-width:1101px) {
.page-id-1499 .x-column .x-btn {
     position: absolute; 
     left: 10%; /*Adjust this to center the button*/
     bottom: 30px; 
}
}
@media (max-width:1100px) {
.page-id-1499 .x-column .x-btn {
    margin-bottom: 10px !important;
}
}

Since the site is responsive, we cannot control the height of the columns on smaller screen when it switch to two columns because the text will adjust depending on the screen width. What the CSS above will do is just implement the button positioning only if it’s on 4 columns state. This absolute position will cause the button to overlap on top of the text on smaller screen.

Hope this helps.

[Author]

Posts