html object responsive

Jerry · Post by **Jerry** » Thu Dec 15, 2022 4:26 pm

Hi all

Anyone know how or if I can make an html object to work to be responsive?
I have a (html object) "Google" search on our old pages but I use a different one for each break point.
I can't use the "Site Search" from WB as we use 9 different project on our website.

In my new page I would like to use something that contains the html code but will be responsive in any size.
Any thoughts would be appreciated.

Thanks

BaconFries · Post by **BaconFries** » Thu Dec 15, 2022 5:26 pm

It's not that the HTML Object isn't responsive or can't be used in a responsive layout it is related to the code used within it being responsive for it to work.

alan_sh · Post by **alan_sh** » Thu Dec 15, 2022 5:33 pm

Have you checked that the horizontal and vertical statements in the code say "100%" and not a fixed pixel value?

Jerry · Post by **Jerry** » Thu Dec 15, 2022 7:34 pm

Thank you for answering.
But I don't see where i can change that.
I can post a screen shot of the code but I don't know how to do that on this forum?

BaconFries · Post by **BaconFries** » Thu Dec 15, 2022 7:39 pm

Uploading images to the forum has been disabled. To do so upload the image to your own host and provide a url or use the following https://imgbb.com/ and provide the generated url

Jerry · Post by **Jerry** » Thu Dec 15, 2022 8:05 pm

The html for the google search is here: https://www.edesignsplans.ca/temp/google.html

Post by **Pablo** » Thu Dec 15, 2022 8:34 pm

Is the HTML box inside a layout grid?
Did you try 'full width' = 'true'?

Note that the code will be inserted "AS IS", so WWB will not make the code responsive if it is not responsive to begin with.
The HTML object itself is responsive, which mean that it can have a different size in breakpoints.

Jerry · Post by **Jerry** » Thu Dec 15, 2022 8:43 pm

Thank you.. but didn't work
I keep trying but thank you for all your help.
Much appreciated.

crispy68 · Post by **crispy68** » Thu Dec 15, 2022 8:58 pm

9.9 times out of 10 it is the code you are entering that is prohibiting it from being responsive. Without knowing what code you are entering it is hard to say how to fix it if there is a fix. Typically, somewhere in the code the width and/or height is defined and if it is set to a fixed dimension (ex: 500px) then that's what the width will be regardless of what you set the html box to be. It just depends on how much control you have over the code you are entering.

BaconFries · Post by **BaconFries** » Thu Dec 15, 2022 9:32 pm

@Jerry I have embedded your image into the post to make it easier to view. Are you sure this is the complete code? Are you sure you are inserting in the correct section? I can really say but it looks like it should be between the <body></body> and needs the following <div class="gcse-search"></div> Can you please ensure you have all the code/script so it will work.

BaconFries · Post by **BaconFries** » Thu Dec 15, 2022 9:40 pm

Do me a favour try the following script in the code replace the cx= with your own and see if this works
Placing between the <body></body>

Code: Select all

<script async src= "https://cse.google.com/cse.js?cx=007019498718139788174:amtiepdpgeg"></script> 
<div class="gcse-search"></div>

Jerry · Post by **Jerry** » Fri Dec 16, 2022 11:40 am

Good Day

Once again you guys came to the rescue of this old man.

Not knowing much about html codes... I took your info and played around with it and I think I got it.
Here is a link to my test page. https://www.edesignsplans.ca/temp/test-page-2A.html
The html (Google Search Box) is now responsive.
The rest of the page is still a work in progress.

Thanks so much
Jerry

www.wysiwygwebbuilder.com

html object responsive

html object responsive

Re: html object responsive

Re: html object responsive

Re: html object responsive

Re: html object responsive

Re: html object responsive

Re: html object responsive

Re: html object responsive

Re: html object responsive

Re: html object responsive

Re: html object responsive

Re: html object responsive