1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need help with some responsive web design..

Discussion in 'CSS' started by Rashida H., May 5, 2019.

  1. #1
    Hello!
    SEMrush
    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.
     

    Attached Files:

    Rashida H., May 5, 2019 IP
    SEMrush
  2. alfieindesigns

    alfieindesigns Well-Known Member

    Messages:
    127
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    130
    #2
    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.
    [​IMG]
     
    alfieindesigns, May 13, 2019 IP
  3. Rashida H.

    Rashida H. Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    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.
     
    Rashida H., May 13, 2019 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,466
    Likes Received:
    360
    Best Answers:
    28
    Trophy Points:
    335
    #4
    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
     
    kk5st, May 13, 2019 IP
  5. alfieindesigns

    alfieindesigns Well-Known Member

    Messages:
    127
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    130
    #5
    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):
    [​IMG]

    Try exploring your code using `Inspect Element` web developer tool.
    Doing so will give you more ideas on how to fix the problem.
     
    alfieindesigns, May 14, 2019 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,801
    Likes Received:
    1,593
    Best Answers:
    229
    Trophy Points:
    515
    #6
    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.
     
    deathshadow, May 15, 2019 IP