Buttons are not responsive within Pro visual builder

Support
#1

Hi,

I really tried to fix this problem myself, but couldn’t find a satisfying solution.
I am using the build in visual builder of the Pro version of your X theme.

I want to put several images on a page that each inherit 1 or 2 buttons.
The images and buttons must be responsive as the buttons are rather big in full screen.
The image is responsive but my problem is that the buttons are not.
I read that I should use a content band with background picture instead of „image“ and then should NOT use „position: absolute“ in order to position the buttons on top.
I changed that and deleted almost all own css but still cannot find out how to make the buttons responsive with the builder without using own CSS for different screen-sizes.

Another problem that is very annoying is the fact that I often get the following message from the builder:
„A conflict on the front end of your site has prevented the preview from loading“

This shows up sometimes and sometimes not.
Can you help me with both problems?

#2

Hi there,

Thanks for writing in.

What do you mean by the button is not being responsive? The button isn’t the same as images, its size is based on its text content. But it still depends on the styling applied to it. You mentioned about absolute positioning, are you trying to make the button placed as a layer like in slider? Where do button size scales and offset position respond? If yes, you may try the slider too. Else, please provide further information about the issue you’re getting.

And please provide your site’s URL and admin login credentials in a secure note and we’ll check it.

Thanks!

#3

Hi Rad,

thanks for your reply!

I am trying to put buttons as a layer on top of an image. I have a section with a row. Inside is an image an two buttons that hover over the image. My buttons on the images are quite large and therefore have to scale down when going to mobile size.

“Slider”? you mean as in LayerSilder?

#4

By the way, I found out that the message:
„A conflict on the front end of your site has prevented the preview from loading“ (sometimes) shows when I have the plugin “Shield / Simple Firewall” from iControlWP activated. As soon as I deactivate it, the error is gone.

#5

Hi There,

Your approach seems ok, you could use a media query to adjust the left position of your buttons for smaller devices.

I personally would do something different, I would add the images as background images of your columns, add a background-size: contain to the columns. and add the buttons on top. You could use a gap element above the button to center the buttons.

Regarding the footer, I believe the best approach is to hide the bar on mobile devices and create another bar for mobiles where the elements will accommodate better for smaller width devices.

Each Bar, Container, and Element on the header and footer builder offer a customize tab which allows you to hide or show them according to the screen width.

Hope it helps