CSS issue with settings box / general question desktop and mobile design

[marcovandijk56Participant]

Dear support,

after quite some hours study I have the feeling that I get a grip on the plugin and the many options available, It is quite an extensive plugin…..
Unfortunate I stumble on a issue with css which I could not solve by reading documentation or watching the video’s
I managed to get a search box setup and a separate settings box with 3 dropdown entries. These drop down entries are using ACF fields.
The problem I encounter is that the styling for the setting box is not applied. For now I have created a custom css entry in the plugin to get the right settings. However I am not able to get the search box and setting box properly aligned (see screenshot)
Also the text of box 3 is cut off and I cannot change the width
Also tried the compatibility settings in the plugin but that did not change anything.

The other question is related to the use of desktop and mobile. Because there are not so many options in the plugin for mobile adjustments I can imagine that there is a preferred way to manage responsive layout combined with mobile.
Can you suggest a way to overcome the issue where the mobile requires different settings? Currently on mobile the 3 setting boxes are disturbing the layout and I think it would be best to hide on mobile.
I was thinking in creating a new search dedicated to mobile only but am not sure this is manageble in elementor?

please advise

regards,
Marco

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

For the alignment issue, you could possibly try adding top margin to the elementor container element – or use a custom CSS to add margin directly to the search settings congainer, something like this:

.asp_sb {
    margin-top: 14px !important;
}

For the mobile question, I probably recommend using two different search bars. You can either use separate elementor containers – hide one of them on mobile, and hide the other on desktop. You can also control that on the plugin-in back-end: https://i.imgur.com/gX5G8dh.png

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts