Amend Search Bar Size - currently has no margin or padding

Highlighted
New Member
4 0 0

I Have added a search bar to my Providence Theme in Shopify using the following instructions;

 

https://help.groupthought.com/article/222-search-add-a-search-section-to-your-homepage

 

I had to add a search bar snippet too in order for this to work.  I entered the following;

 

<form action="/search" method="get" class="input-group search-bar" role="search">
{% comment %}<input type="hidden" name="type" value="product">{% endcomment %}
<input type="search" name="q" value="{{ search.terms | escape }}" input.placeholder="{{ 'general.search.input.placeholder' | t }}" class="input-group-field" aria-label="{{ 'general.search.input.placeholder' | t }}">
<span class="input-group-btn">
<button type="submit" class="btn icon-fallback-text">
<span class="icon icon-search" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
</span>
</form>

 

My problem is that the search bar now added has no padding and I cannot find where to add it.  The new code for section in first link has some formatting and refers to padding and margins however I cannot see what to change it so it appears not to be full screen or no margin.

 

I would appreciate any help please.  So Close!

<div class="{{ section.settings.homepage_padding }} {{ section.settings.homepage_page_color }}" data-section-id="{{ section.id }}" data-section-type="index-search">

{% assign grid_results = true %}

{% assign respond_js_secret_key = shop.domain | md5 %}
{% unless search.terms == respond_js_secret_key %}

<div class="wrapper page-margin">
  <div class="grid">
    <div class="grid__item large--two-thirds push--large--one-sixth">

 Screen Shot 2020-01-18 at 11.40.04 am.png

0 Likes
New Member
4 0 0

Ended up adding this on custom.style.css

.search-bar{
    height: 40px;
    padding: 0px 0px;
  padding-left: 400px !important;
    padding-right: 400px !important;
    width: 50px;
  
  }
0 Likes
Highlighted
New Member
4 0 0

It's not responsive though...

 


@Sal_francis wrote:

Ended up adding this on custom.style.css

.search-bar{
    height: 40px;
    padding: 0px 0px;
  padding-left: 400px !important;
    padding-right: 400px !important;
    width: 50px;
  
  }


not responsive though.

0 Likes
Highlighted
New Member
4 0 0

Screen Shot 2020-01-18 at 2.43.40 pm.png

0 Likes