Hello! I have used a Wordpress theme and maneuvered it a bit as per my needs. Now when I am checking the web page in my cell phone - I am seeing two problems which I need help to solve, please. 1: In max-width 480 - The contact information is cutting, i.e the phone number. How can I align to little left? Attached is the snapshot for reference. 2: In max-width 480 - The search bar is too small. How can I increase the width of it? Attached is the snapshot for reference. WEBSITE URL: https://www.directsupplyservices.com/ Thanks & Regards, Rashida H.
Hello @Rashida H. , Here's my solution. In your CSS add the following inside that media query: @media only screen and (max-width: 767px) { .contact-info-section .contact-information-wrapper { margin-right: 0; } div#ajaxsearchlite1.wpdreams_asl_container.asl_w.asl_m.asl_m_1 { width: 100% !important; } } Code (CSS): Then it should be fixed.
hello @alfieindesigns Thank you so much. The search bar issue is solved. - However, how can I shift the contact information more to left so its get in centre? - How can I shift logo to the left too? WEBSITE URL: https://www.directsupplyservices.com/ Kindly advise please. Appreciate your help a lot. Thanks & Regards, Rashida H.
In #scb-wrapper h2, there is something forcing a line-break. A cursory search did not find it. Also in #scb-wrapper, there is side padding applying to multiple elements. Remove that. I also see about 30!!! stylesheets plus multiple embedded style elements. Don't even get me started on the potload of js scripts. As a rule of thumb, if you have more than 2 stylesheet files and any embedded or inlined style elements, you're asking for trouble. These are error attractors. gary
Hello @Rashida H. Note: This is not best practice. But this will fix the issue. @media only screen and (max-width: 767px) { /* removed excess space on right */ .contact-info-section .contact-information-wrapper { margin-right: 0; } /* full-width searchbar */ div#ajaxsearchlite1.wpdreams_asl_container.asl_w.asl_m.asl_m_1 { width: 100% !important; } /* align logo to the left */ .contact-info-section .col.col-1-of-4 { padding-left: 0 !important; margin-left: -20px !important; } /* align to the left*/ .contact-information { width: 100%; } } Code (CSS): Try exploring your code using `Inspect Element` web developer tool. Doing so will give you more ideas on how to fix the problem.
And why I couldn't be bothered to even try and help desipite accessibility -- such as responsive design -- being my thing. It's another case of using ten times or more the code needed, that would immediately result in my telling them -- if they came to me as a client -- to pitch the entire mess in the trash and to start over from scratch. See such train wrecks of ignorance, incompetence, and ineptitude as: <body data-rsssl=1 class="home page-template-default page page-id-5 wp-custom-logo kingcomposer kc-css-system right-sidebar"> <div id="page" class="site"> <header id="masthead" class="site-header header primary-header header-logo-only" role="banner"> <div class="contact-info-section"> <div class="container"> <div class="row"> <div class="col col-1-of-4"> <div class="site-branding"> <a href="https://www.directsupplyservices.com/" class="custom-logo-link" rel="home"><img width="4764" height="1217" src="https://www.directsupplyservices.com/wp-content/uploads/2018/09/cropped-DSS-Final-Logo-1-1.png" class="custom-logo" alt="Direct Supply Services" srcset="https://www.directsupplyservices.com/wp-content/uploads/2018/09/cropped-DSS-Final-Logo-1-1.png 4764w, https://www.directsupplyservices.com/wp-content/uploads/2018/09/cropped-DSS-Final-Logo-1-1-300x77.png 300w, https://www.directsupplyservices.com/wp-content/uploads/2018/09/cropped-DSS-Final-Logo-1-1-768x196.png 768w, https://www.directsupplyservices.com/wp-content/uploads/2018/09/cropped-DSS-Final-Logo-1-1-1024x262.png 1024w, https://www.directsupplyservices.com/wp-content/uploads/2018/09/cropped-DSS-Final-Logo-1-1-775x198.png 775w" sizes="(max-width: 4764px) 100vw, 4764px" /></a> </div><!-- .site-branding --> </div><!-- .col --> <div class="col col-3-of-4"> <div class="contact-information-wrapper"> <div class="contact-information"> <dl> <dt><i class="fa fa-phone"></i></dt> <dd> <p><a href="tel:+971556305217/+971503643228">+971-55-6305217 / +971-50-3643228</a><p> </dd> </dl> <dl> <dt><i class="fa fa-envelope"></i></dt> <dd> <p><a href="mailto:enquiry@agisafety.com">enquiry@agisafety.com</a></p> </dd> </dl> </div> </div><!-- .contact-information --> </div><!-- .col --> </div> </div> </div><!-- .contact-info-section --> Code (markup): Doing the job of: <body> <h1><a href="/">Direct Supply <span>Services</span></a></h1> <a href="tel:+971556305217/+971503643228" class="topPhone"> +971-55-6305217 / +971-50-3643228 </a><br> <a href="mailto:enquiry@agisafety.com" class="topMail"> enquiry@agisafety.com </a> Code (markup): It is a train wreck laundry list of how NOT to build a website; though entirely inline with what I've come to expect from turdpress and those making templates for it.