center ajax search widget

It would be better if you just posted a URL as most theme’s can have different class selectors. This is a guessing game with a picture and hard to advise.

And if you’re referring to this theme then you are better off contacting the author. Premium paid themes are not supported here.

• This reply was modified 5 years, 6 months ago by Stef.

Unlockingsnow.com

Its a free theme, not the pro

I’d probably do something like this for desktop and then rewrite the query for mobile as this will probably mess up in mobile. Do you know how to write CSS?

.es-header-area-cart-wrapper{
    width:70%;
}

.dgwt-wcas-search-wrapp{
    width:35% !important;
    float:left !important;
    margin-top:0.5em !important;
    width:100% !important;
    max-width:480px !important;
}
.site-header-cart{
    float:right;
}

View post on imgur.com

• This reply was modified 5 years, 6 months ago by Stef.

ok so just add this to additional css? but how about the mobile code?

Yup. Just add it. You don’t know css then right?

thank you so much, i applied your code and worked great for desktop, but mobile a bit messed up as you said. Search bar is supposed to be a bit longer and page a bit wider and shopping cart centered.

Here it is how it is supposed to be: https://i66.tinypic.com/24b1yww.jpg

here is how it is now: https://i64.tinypic.com/beg129.jpg

Just add a margin-bottom to that at maybe 1em

Like this?

.es-header-area-cart-wrapper{
width:70%;
}

.dgwt-wcas-search-wrapp{
width:35% !important;
float:left !important;
margin-top:0.5em !important;
margin-bottom:1em !important;
width:100% !important;
max-width:480px !important;
}
.site-header-cart{
float:right;
}

Yup. But you might have to add/write it as a media query for specific devices.

We’re in a tornado warning and hunkered down. No computer right now so can’t do it for you.

So sorry to hear that hope all is alright there, i think i got it

picture: https://i63.tinypic.com/2gsjsdj.jpg

but now want to center shopping cart

this is my code:

`.es-header-area-cart-wrapper{
width:70%;
}

.dgwt-wcas-search-wrapp{
width:35% !important;
float:left !important;
margin-top:0.5em !important;
width:100% !important;
max-width:480px !important;
}
.site-header-cart{
float:right;
}

@media screen and (max-width: 580px) {
.dgwt-wcas-search-wrapp{
width:100% !important;
float:center !important;
margin-bottom:0.5em !important;
max-width:280px

}
.es-header-area-cart-wrapper{
align-items:center !important;

}
}`

thanks for any futher help!

Looks good. I’d maybe make it perfect in mobile.

@media only screen and (max-width: 600px) {

 .site-header-cart{
     float:none !important;
     clear:both !important;
     margin:1em 0em !important;
     width:100% !important;
  }

}

that worked perfectly with some adjustments, thank you again!