Horizontal form modification

[hotloverspassion]

Hi,

I would like to ask whether you can help me with the look of my horizontal form. Css example would do just fine 🙂

Please see images attached. One is of my current horizontal form ( Picture 1 ) looking messy and not organized at all…I would like it to look the way the other image shows ( Pixture 2 ), divided into groups. Also would like to have the layout set like it is in Picture 2. Could you help me with that?

Is it also possible to change the view of the tabs the way, that the group name will not be inside the box but separate? There could be either “dashes” or “Select” inside the tab. Please see Picture 3

Thanks a lot in advance 🙂

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, check : https://archived.seventhqueen.com/sweetdate/article/add-advanced-search-members-directory 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[hotloverspassion]

Hi,
actually I have already followed the steps in your mentioned post ( sorry for not being clear ) and got the same looking horizontal form just inside the toggle I can open and close. This is brilliant, but I would also like to change the look of the form…see my previous pictures.
Thanks a lot 🙂

[Laura]

Hello 🙂
What changes? can you list them?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[hotloverspassion]

Hi 🙂

1. I would like to divide my form into “sections”…you can see it in the picture ( I am a, Looking for, Type of relationship )…how can I achieve that? ( Picture 2 )

2. Is it also possible to change the view of the tabs the way, that the group name will not be inside the box but separate? There could be either “dashes” or “Select” inside the tab. Please see ( Picture 3 )

Thanks 🙂

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, that is a bit more complicated… the advanced search i still just a quick addon but i will work on something better.
Right now those are not available

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[hotloverspassion]

Hi 🙂
sorry, but I could not quite understand what you meant by “the advanced search i still just a quick addon but i will work on something better”

[Laura]

Hello, its just a simple code right now, works with any shortcode but i will make something better in the future. For advanced search that is the best option right now

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[hotloverspassion]

Hi,

I am back again. The horizontal form is giving me headache regarding styling. Could you please advice me on css?

I am trying to make my form to look like in the picture 1 attached. In my case, I am trying to move field “who wants to meet a” one line down, exactly under the field “I am looking for a”, fields “Age from” and “Age to” move on the next line etc… See picture 2. I tried several css, but nothing worked. What is the best way to move fields one line down like <br>?

To use margin-left: -548px; margin-top: 61px; for the “Who wants to meet a” field do the trick on my PC, but to use it seems a bit ridiculous to me as this would make the form completely out of the sync when viewing on smaller devices. When I tried to use display: block, nothing happened.

It also looks like there are too many columns in the form…could have 1 or 2 columns less.

Any ideas?

Thanks a lot!

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, please share access and i will try to do what i can 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[hotloverspassion]

This reply has been set as private.

[Laura]

Hello, try with this css

COPY CODE

.two.columns.hz-checkbox-name {
    float: left;
    clear: both !important;
    width: 100%;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
.two.columns.hz-radio {
    float: left;
    clear: both !important;
    width: 100%;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
.two.columns.hz-agerange.hz-from {
    clear: both !important;
    padding-top: 10px;
}
.two.columns.hz-agerange.hz-to {
    clear: right !important;
    padding-top: 10px;
}
.two.columns.hz-select {
    clear: left !important;
    padding-top: 10px !important;
}
.dir-form .two.columns {
    clear: right !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[hotloverspassion]

Hi Laura,
thanks a lot for your help. I have done some changes to the css to my liking and it looks much better now! THANKS A LOT!
Just one more question. At some fields there are no specific classes so I copied css selector but the codes looks like this:
.su-spoiler-content > div:nth-child(1) > div:nth-child(1) > form:nth-child(1) > div:nth-child(1) > div:nth-child(51)
Is this ok to use or would it be better to use different code? I also tried to use attribute selector but it didn’t work for me.
Thank you for an advice 🙂

[Laura]

Hello, i do not understand that code… it should be
.su-spoiler-content div:nth-child(1) { STYLE HERE }
.su-spoiler-content form:nth-child(1) { STYLE HERE }
.su-spoiler-content div:nth-child(51) { STYLE HERE }

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[hotloverspassion]

Hi,
hope you had a lovely Christmas holiday 🙂

Yes, the code is in the form you mentioned, sorry for not being very clear.

Anyway, the codes work ok, so I am closing the ticket 🙂

Thanks a lot!

[Laura]

Glad to help 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts