Return to previous page

Mega search form width - by kidzyc - on WordPress WooCommerce support

This topic has 17 replies, 4 voices, and was last updated 8 years, 9 months ago ago by Eva Kemp

kidzyc

Participant

July 8, 2015 at 11:37

Hi,

I have tried many methods to change search form width, but it is still shown as
http://www.misssale.com/au2015/wp-content/uploads/2015/07/2015-07-08-20.15.36.png

Could you help me how to fix it?

Thanks

#73897 Copied

16 Answers

kidzyc

Participant

July 8, 2015 at 12:14

Hi,

You also can check this page http://www.misssale.com/products-search/

#73912 Copied

kidzyc

Participant

July 8, 2015 at 12:52

How can I make it as yours? Long search form with button in one row.

Thanks

#73924 Copied
Stan Russell

Participant

July 8, 2015 at 13:40
Hello,

please add following code to your woopress/custom.css file:
```
input[type="text"],input[type="search"]{
float:left;
}
```
Do not forget to activate Custom css in Theme options > Custom ccs > enable!

Regards,
Stan Russell.
#73941 Copied
kidzyc

Participant

July 8, 2015 at 14:28

Hi,

Great. But how to change search form width?

#73958 Copied
kidzyc

Participant

July 8, 2015 at 14:40
I have put this in, but it does not work.
```
.et-mega-search form input[type=“text”] {
	display: inline-block;
	float: left;
	padding: 14px 4%;
	margin-right: 0px;
	width: calc(98% - 130px);
	height: 48px;
}
```
#73966 Copied
Robert Hall

Support staff

July 8, 2015 at 14:47
Hello,

As I see search button is in one row now. Please see screenshot: http://prntscr.com/7q9ojw
Also you can change height value to 39px.
```
.et-mega-search form .button {
    height: 39px;
}
```
Regards,
Robert Hall.
#73974 Copied
kidzyc

Participant

July 8, 2015 at 14:58

Yes, it is in one row now, but search box is too short. I want to make it like https://www.8theme.com/support/

#73981 Copied

Robert Hall

Support staff

July 8, 2015 at 15:02

Please provide us with wp-admin access in Private Content.

Regards,
Robert Hall.

#73985 Copied

kidzyc

Participant

July 8, 2015 at 15:27

Okay, please see below.

Please, contact administrator
for this information.

#74007 Copied

Robert Hall

Support staff

July 8, 2015 at 15:35

Could you provide us with full permissions? We need this to check code for search field.

Regards,
Robert Hall.

#74015 Copied

kidzyc

Participant

July 9, 2015 at 01:25

Okay.
I have upgrade you to admin, same user name and psw.

Thanks.

#74119 Copied

kidzyc

Participant

July 9, 2015 at 02:21

Another problem is I cannot activate visual composer (4.6), could you use wp-admin to activate this plugin for me please by using the above username and password.

Thanks.

#74120 Copied

kidzyc

Participant

July 9, 2015 at 04:52

I have activated VC 4.6, please help me fix mega search form only.
Thanks

#74125 Copied
Eva Kemp

Support staff

July 9, 2015 at 10:48
Hello,

You had incorrect quotes in the code. I’ve edited it and changed height for the button:
```
.et-mega-search form .button {
	height: 48px;
	width: 130px;
	margin: 0px;
}
```
Please check search form now.

Regards,
Eva Kemp.
#74190 Copied
kidzyc

Participant

July 9, 2015 at 10:54

Thank you very much.

It looks very nice.

Could you also tell me how to modify this search result format? Looks like yours, and the search product image and font size more larger.

Thanks.

#74193 Copied
Eva Kemp

Support staff

July 9, 2015 at 11:49
Hello,

To increase size of search icon add this code in custom css:
```
.empty-category-block h2::before {
    width: 100px;
    height: 100px;
    background-size: 100px;
}
```
To increase the text use this code:
```
.empty-category-block h2 {
   font-size: 42px;
}
.empty-category-block .btn {
    font-size: 20px !important;
}
```
Regards,
Eva Kemp.
#74215 Copied
Viewing 17 results - 1 through 17 (of 17 total)