Set a button over an image - Forum | JoomShaper
Solved SP Page Builder

Set a button over an image

Asked by francesco1980 5 years ago Last activity 5 years ago

I have a page that need to show different images on a computer, a tablet and a smartphone.
In order to do that I used 3 image add-on and set each of them to show only on the proper device.
I also used a button add-on to show only on a smartphone and used the custom position to move this button over the image.

I please you to check if this approach is the best possible or if there are other solutions that are more effective.

I would also ask you to explain why on a smartphone a strange symbol (a large arrow down) appears between the first and second row of the page.

Thank you for your support

Accepted answer

Marked as the solution
Paul Frankowski Senior Staff
5 years ago

Ok, check your website. Some done by addon settings and rest by custom CSS. I finished my job for today.

foto_6825_2021.jpg

14 more replies

Oldest first Newest first Most helpful
Paul Frankowski Senior Staff
5 years ago

Ciao.

We have Addon: Image Layouts - which is much more flexible than using 2 different addons.
Check its "Content Order Options".

francesco1980 Asked this
5 years ago

I followed your suggestion using an Image layout but I need help to set i properly.
This is what I got
https://pasteboard.co/7HeZG41miSYz.jpg
but I need to understand how to eliminate the background around the botton and to position the button elsewere in over the image.

In addition to that I would like to remove the "down" arrow

Could you please help?

Paul Frankowski Senior Staff
5 years ago

About white backgroud in that Page - Options - Custom CSS add this line:

.sppb-addon-image-layout-content {background: transparent; }

francesco1980 Asked this
5 years ago

Hi Paul, I'm sorry I didn't noticed that the arrow was part of the image.
About the Custom CSS I tried to add it into Style tab of the Image layout add-on but now the button is under the image.
https://pasteboard.co/8yonXcuqTsxM.jpg
And I don't understand how to move the button over the image (to cover the boy's hands.
You suggest to add the CSS to the Page - Options - Custom CSS but I cannot find how to navigate to it.
Could you please help?

Paul Frankowski Senior Staff
5 years ago · edited

Custom CSS, I put my code already.

foto_6818_2021.png

Paul Frankowski Senior Staff
5 years ago

I set button under the image using Addon settings mostly.

Yes, now just replace image with different one without "arrow".

foto_6821_2021.jpg

francesco1980 Asked this
5 years ago

Thank you for your patience Paul.
I removed the CSS code inside the add-on.
But the button is over the boy's face while I would like to move it over the boy's hands.
https://pasteboard.co/fUuw3VIsZIl4.jpg
Could you please suggest how to set the button position over the image?

Paul Frankowski Senior Staff
5 years ago · edited

Is not, is under. Check again.

Log in to reply.