Question on Search Form

[YvonneOh]

Hi,

How do I increase the search form's width at the top of my site? I also want to move the magnifying glass more to the right as it is covering part of the 'Search this website' words.

Yvonne

https://souperdiaries.com/

[Susan]

Update the padding in this section of your stylesheet:

.search-form input[type="search"] {
background: #fff url(//souperdiaries.com/wp-content/themes/restored316-divine/images/icon-search.png) no-repeat right;
background-size: 36px 16px;
color: #888;
font-size: 10px;
padding: 13px 30px 13px 13px;
text-transform: uppercase;
width: 100%;
}

[YvonneOh]

Hi Susan,

I pasted the code in the custom CSS area and there appears to be no change. Did I paste it in the wrong place?

The code which I used previously to place the search form there is this:

@media (min-width: 1030px) {
.menu-secondary aside.widget-area {
width: 30%;
text-align: right;
}

.menu-secondary .widget_search,
.menu-secondary .simple-social-icons {
display: inline-block;
width: auto;
vertical-align: middle;
}

}

[Susan]

The code I provided is what is already in your stylesheet; you need to change what's there - don't add it in in another location.

You need to just change the padding (for example, changing the 30px by something larger...)

[YvonneOh]

Sorry but I don't quite understand. So I used the code you provided and replaced the old code. Now the length of the search form is fine but it pushed down the simple social icons to the next line. How do I get it back up? https://souperdiaries.com/

[Susan]

The code I provided is already there. You don't need to remove the code, and replace it. You need to update the code that's there, and then change the padding in this area to suit your needs:

padding: 13px 30px 13px 13px;

Go ahead and revert any changes you just made (either in the stylesheet or any custom CSS you have added), confirm that the Simple Social Icons are back where they were prior to updating your stylesheet, and then adjust the padding line shown above.

The Simple Social icons will be pushed down if you make the search bar too long...

[YvonneOh]

I updated the code in my stylesheet and changed 30px to go higher up to 300px but there was no difference.

[Susan]

I am seeing the changes on your site. (see screenshot). If you are NOT seeing the changes, clear your browser's history, cookies & cache, and clear any caching plugins you have on your site.

[YvonneOh]

Thanks Susan. It's looking fine now. 🙂

[Susan]

You are welcome 🙂

[Author]

Posts