Dan007007 Posted November 23, 2019 Share Posted November 23, 2019 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 More sharing options...
dsonesuk Posted November 23, 2019 Share Posted November 23, 2019 I doubt that's a asp/html problem but a CSS problem. Link to comment Share on other sites More sharing options...
Dan007007 Posted November 24, 2019 Author Share Posted November 24, 2019 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 24, 2019 Share Posted November 24, 2019 Normally the logo would be stacked at top and hamburger menu usually only appears on smaller devices (in place of desktop hover over dropdown menu) to give extra room for remaining features. Has this hb menu always been viewable what ever device size? Link to comment Share on other sites More sharing options...
Dan007007 Posted November 24, 2019 Author Share Posted November 24, 2019 Remember, I don't know much about these tech words you use lol. I just can't see why it drops off the orange part of the site Link to comment Share on other sites More sharing options...
Dan007007 Posted November 25, 2019 Author Share Posted November 25, 2019 (edited) it has been like this for ages, any chance you could write a code I can try?? I can get the code there at the moment, maybe you could modify it, don'y worry i know how to change back if it goes wrong. Edited November 25, 2019 by Dan007007 Link to comment Share on other sites More sharing options...
dsonesuk Posted November 26, 2019 Share Posted November 26, 2019 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 More sharing options...
Dan007007 Posted November 29, 2019 Author Share Posted November 29, 2019 I did it in the homepage css file, think thats where it is, still no good when page made smaller. Link to comment Share on other sites More sharing options...
Dan007007 Posted November 29, 2019 Author Share Posted November 29, 2019 sorry, ignore, I just found the general css file, one min Link to comment Share on other sites More sharing options...
Dan007007 Posted November 29, 2019 Author Share Posted November 29, 2019 done it to general, still the same problem Link to comment Share on other sites More sharing options...
dsonesuk Posted November 29, 2019 Share Posted November 29, 2019 Was there any change? If there was no change press ctrl F5, or clear history. Link to comment Share on other sites More sharing options...
Dan007007 Posted November 29, 2019 Author Share Posted November 29, 2019 I even done ctrl and F5, shall i try in an incognito window? Link to comment Share on other sites More sharing options...
Dan007007 Posted November 29, 2019 Author Share Posted November 29, 2019 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 More sharing options...
Dan007007 Posted November 29, 2019 Author Share Posted November 29, 2019 these are the folders i have Link to comment Share on other sites More sharing options...
Dan007007 Posted November 29, 2019 Author Share Posted November 29, 2019 even before it jumps out of the top bit the box around search shrinks a bit Link to comment Share on other sites More sharing options...
dsonesuk Posted November 29, 2019 Share Posted November 29, 2019 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 More sharing options...
Dan007007 Posted November 30, 2019 Author Share Posted November 30, 2019 (edited) It must be me, no idea what i'm doing wrong, grrrrrr. I need you here lol Edited November 30, 2019 by Dan007007 Link to comment Share on other sites More sharing options...
Dan007007 Posted December 2, 2019 Author Share Posted December 2, 2019 Any more ideas of what I can try, I even hope I,m looking in correct folders, I have homepage folders in .asp and css folders Link to comment Share on other sites More sharing options...
Dan007007 Posted December 2, 2019 Author Share Posted December 2, 2019 I found the general css file, changed it as dsonesuk said, I'm getting there, still not quite there though and now on my mobile it has a mysterious red line under my shophere.co.uk logo (I'm practising on shophere as not my busy website) Link to comment Share on other sites More sharing options...
Dan007007 Posted December 2, 2019 Author Share Posted December 2, 2019 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 More sharing options...
dsonesuk Posted December 2, 2019 Share Posted December 2, 2019 (edited) <!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 December 2, 2019 by dsonesuk Link to comment Share on other sites More sharing options...
Dan007007 Posted December 3, 2019 Author Share Posted December 3, 2019 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 More sharing options...
Dan007007 Posted December 3, 2019 Author Share Posted December 3, 2019 And thank you so much for that link, https://validator.w3.org/, I'll clean up some of it with my limited efforts for now. Link to comment Share on other sites More sharing options...
Dan007007 Posted December 9, 2019 Author Share Posted December 9, 2019 clean some up, but search bar still not great. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 9, 2019 Share Posted December 9, 2019 Are you sure? cuz i see no difference. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now