Jump to content

Search Bar


Dan007007
 Share

Recommended Posts

Hi, I have no web developer i sacked him! I can do basics, one thing i can't seem to do is on my website if you make the screen you are looking at small the search bar moves out of the place it is meant to be and goes over items below but it is not very visible there, the code I have is below.

 <div class="container">
        <div class="home_search">
            <h1>Search <%=siteName%></h1>
            <form id="search_form" action="<%=absolutePath%>search" method="get">
            <input type="text" class="search_box" name="keyword" value="<%=lcase(keyword)%>" placeholder="Search item number, brand or keyword" />
            <button class="search_btn" type="submit">Search</button>
            </form>
            <div class="recent_searches">
                <div class="recent_header">Recent Searches:</div>
                <%
                if not rstemp.eof then
                do while not rstemp.eof
                %>
                <a href="<%=absolutePath%>search?keyword=<%=replace(rstemp("keyword")," ","+")%>"><%=makeFriendly(pcase(rstemp("keyword")))%></a>
                <%
                rstemp.movenext
                loop
                end if
                %>
            </div>
        </div> 

Link to comment
Share on other sites

As I'm new that all looks like Japanese to me, sorry. Can i ask you to put my website on your browser and make minimise the page more and more, you will see what I mean, I'll add a picture here if it lets me. Thanks for replying though, very good of you. It looks bad on mobiles also because screens are small.

 

search bar moving.jpg

search bar moving bad.jpg

Link to comment
Share on other sites

Place this just before /* Resize general elements to Media */ in general.css file

header .search {
    width: 38%;
}

header .search input {
    width: calc(95% - 75px);
}

header .search button {width: 75px;}

Place this after /* Resize general elements to Media */

@media only screen and (min-width:380px) and (max-width:768px) 
{
body header .search {width: 55%;}
    
    .side_nav + header {
        height:auto;
    }
  header .logo {
    float: none;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    clear:both;
    width:100%;
 
    }

header .logo a {
    float: none;
    margin:0 auto;
}

main {padding-top: 60px;}
}

 

Link to comment
Share on other sites

I'm practising on my other website now as it is not very busy, jusy in case customers keep seeing screen move!. 

Same coding, so I did below this time, even changed both of these top and bottom.@media only screen and (min-width:380px) and (max-width:768px)

 

@media only screen and (min-width:380px) and (max-width:768px)
{
    .modal { width:98%; }

    header .search input { font-size:22px; width:80%; }
    header .search button { font-size:22px; }

    #breadcrumb { display:none; }
    nav.side_nav { width:100%; }
    .container { width:98%; }
    footer .footer .footer_box_wide { display:none; }  
    footer .footer .footer_box { width:98%; margin:0 0 10px 1% }
    main .top_search input { font-size:22px; width:80%; }
    main .top_search button { font-size:22px; }
    footer .footer div.footer_cards img { width:100%; }

@media only screen and (min-width:650px) and (max-width:1024px) 
{
    header .search input { font-size:26px; width:80%; }
    header .search button { font-size:26px; }

    #breadcrumb { display:none; }
    .container { width:98%; }
    footer .footer .footer_box_wide { display:none; }  
    footer .footer .footer_box { width:48%; }
        main .top_search input { font-size:26px; width:80%; }
        main .top_search button { font-size:26px; }
    footer .footer div.footer_cards img { width:90%; }

@media only screen and (min-width:380px) and (max-width:768px)

Link to comment
Share on other sites

I tested my code again! and it worked fine. It set the size of button to a size that will not shrink to a size smaller than the text. The input allows for size of the button to fit in available width. The logo goes to top and nav bar extends to size of content  enveloping logo at top and input, search button, menu button and cart.

Link to comment
Share on other sites

it still jumps off the main blue part when i minimise or adjust desktop screen size, but not as bad, I must need one other little change i'm missing ?.

/* Resize general elements to Media */
@media only screen and (max-width:475px) 
{
    .modal { width:98%; }
    header { height:121px; }
        header .logo { float:left; border-bottom:1px solid #D25A1E; height:60px; width:100%; margin:0; display:block; text-align:center; }
            header .logo a { width:100%; height:60px; display:block; background-position:center center; } 
            header nav.main_nav { width:32%; float:left; }
                
            header .search { position:relative; width:40%; float:left; margin-left:2px; }
            header .search input { width:80%; font-size:12px; }
            header .search button { width:40%; font-size:11px; }
        
            header .trolley { }
    main { border-top:121px solid #F5F5F5; }
    #breadcrumb { display:none; }
    nav.side_nav { width:100%; }
    .container { width:98%; }
    footer .footer .footer_box_wide { display:none; }  
    footer .footer .footer_box { width:96%; margin:0 0 10px 2%; }
    main .top_search { top:121px; }
        main .top_search input { font-size:18px; width:65%; }
        main .top_search button { font-size:18px; }
    footer .footer div.footer_cards img { width:100%; }


                
@media only screen and (min-width:475px) and (max-width:650px) 
{
    .modal { width:98%; }

    header .search input { font-size:22px; width:80%; }
    header .search button { font-size:22px; }

    #breadcrumb { display:none; }
    nav.side_nav { width:100%; }
    .container { width:98%; }
    footer .footer .footer_box_wide { display:none; }  
    footer .footer .footer_box { width:98%; margin:0 0 10px 1% }
    main .top_search input { font-size:22px; width:80%; }
    main .top_search button { font-size:22px; }
    footer .footer div.footer_cards img { width:100%; }

@media only screen and (min-width:650px) and (max-width:1024px) 
{
    header .search input { font-size:26px; width:80%; }
    header .search button { font-size:26px; }

    #breadcrumb { display:none; }

Link to comment
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Is a old unused doctype any html5 tags css3 css styling won't work as they should, you also have multiple html,body, head, title opening/closing tags to name few, that! are not allowed. I can't provide a solution for such invalid broken html code. Copy source code and paste in direct input tab at https://validator.w3.org/

and correct the errors.

https://www.w3schools.com/html/default.asp

Show the correct doctype and required attributes to allow nav, header, footer tags showed as invalid tags in valdator using transitional doctype.

Edited by dsonesuk
Link to comment
Share on other sites

I'll try a few things, but I'm not great and the guy that made this custom site did it bad I know. I'm thinking about starting over one day, what would you say is any good, would wordpress and woocommerce be any good or is Microsoft any better was asp.net core 3.0, I'm open to suggestions and you guys know your stuff!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...