Google custom search bar is squished

#1

So I’m new to ghost and websites aren’t my specialty but here is my situation. I want to put a google custom search in the center of my search page which I was “able” to but it’s all squished.

Here is my website: https://theinformationsecuritycenter.com/search/

I’ve been working on this problem on implementing google custom search to my website. I tried using various blogs/tutorials but to no avail as the ones I found were out of date or simply didn’t work. I tried Injecting the code for the search bar in the header and footer and it isn’t what I want (Takes up the whole top or bottom part of the page). I want to try to put it in the center of the page so I put the code in the article itself with the HTML + option as shown in my screenshot.

If anyone is willing to help, I would really appreciate it. I love my experience with ghostblog so far.
Below is two separate windows. The first one with how it looks when visiting my site and the second one showing the code being injected in the body of the article.

Website%20help
Website help.PNG1757×770 56.7 KB

#2

I ended up figuring out the problem, guys. I ended up putting my code into a div element with width added:

<div class="search-wrapper" style="width: 600px;">
  <gcse:search></gcse:search>
</div>

In addition, I took some other solutions from some other sources and combined it with my code. I also was forced to change the layout in the google custom search control panel.

closed #3

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.