Quote from NicheQuestions on May 23, 2020, 5:17 am

/* SEARCH */
#af-wrapper #forum-search {
    float: right;
    width: 238px; ---- Changed This to 220px
    height: 44px;
    line-height: 44px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #fff;
    color: #444;
    border: none;
    border-radius: 3px;
    cursor: text;
}

#af-wrapper #forum-search input {
    vertical-align: inherit;
    font-style: italic;
    padding: 0;
    border: 0;
    background-color: inherit;
    width: 190px; ---- changed this to 90px
    height: initial; /* comp */
    font-size: 13px;
    line-height: normal;
    display: initial; /* comp */
    outline: none;
    box-shadow: none; /* comp */
    min-height: initial; /* comp */
    background-image: none; /* comp */
    float: initial; /* comp */
}

Fixed my problem should have tried just a little bit harder before posting.

changed > Skin > style.css > Found Search and changed width from 238px to 220px and presto now it works.

Quote from qualmy91 on May 23, 2020, 5:31 am

Hey @nichequestions,

it’s better not to make any changes in the plugin files, because you will lose all changes with every update. You should insert a custom CSS for  your changes instead:

/* Set custom width to Asgaros Forum search field */

#af-wrapper #forum-search {
    width: 100px;
}

@media screen and (max-width: 782px){
  #af-wrapper #forum-search {
    width: 100%;
  }
}

To insert this CSS go to admin area of WordPress >> Appearance >> Customize. Then insert the CSS in the section ‘Additional CSS’.

Quote from NicheQuestions on May 23, 2020, 6:07 am

Quote from qualmy91 on May 23, 2020, 5:31 am

Hey @nichequestions,

it’s better not to make any changes in the plugin files, because you will lose all changes with every update. You should insert a custom CSS for  your changes instead:

/* Set custom width to Asgaros Forum search field */

#af-wrapper #forum-search {
    width: 100px;
}

@media screen and (max-width: 782px){
  #af-wrapper #forum-search {
    width: 100%;
  }
}

To insert this CSS go to admin area of WordPress >> Appearance >> Customize. Then insert the CSS in the section ‘Additional CSS’.

Indeed Your Right. I’ve already copied to custom.css but still good to show where I found the CSS code. there might have been a better way to do it. if so let me know.

Quote from qualmy91 on May 23, 2020, 7:41 am

Where is this custom.css file located? I just had a look at your forum but this CSS file is not loaded by the browser.

You can also write the CSS code in the custom CSS section of Asgaros Forum: Forum >> Appearance then put it in the Custom CSS section.

Quote from NicheQuestions on May 23, 2020, 7:47 am

Quote from qualmy91 on May 23, 2020, 7:41 am

Where is this custom.css file located? I just had a look at your forum but this CSS file is not loaded by the browser.

You can also write the CSS code in the custom CSS section of Asgaros Forum: Forum >> Appearance then put it in the Custom CSS section.

Yeah its there not sure, maybe try again if your interested but I’ve added it to the same spot as your picture.

Quote from qualmy91 on May 23, 2020, 9:22 am

I see. You copied the whole block to the custom CSS, right? It’s better to only add the CSS code in this section that you want to change. To Prevent the Input Field from popping out of the menu, you have to add one more block

/* Set custom width to Asgaros Forum search field */
#af-wrapper #forum-search {
    width: 100px;
}
@media screen and (max-width: 782px){
  #af-wrapper #forum-search {
    width: 100%;
  }
}

#af-wrapper #forum-search input{
  width: calc(100% - 45px);
}

Quote from NicheQuestions on May 23, 2020, 10:01 am

That’s a much nicer way of doing this. I’m always so dirty with my coding. hack slash bash stuff into submission to get it working.