CSS needed for landscape mode of Galaxy S8

Hi, I've got a header menu/secondary menu that changes position and overlaps the logo on landscape view of phones, specifically for Samsung Galaxy S8 - can I get CSS to stop it doing that please?
The part in header saying "Individually tailored eye tests in your home or office." needs to be centered aligned instead.
Here's what I see, after latest change proposed by Dimitris in chat https://static.livechatinc.com/8801096/OZ4O38FXYS/c20d05e8888072cb6bee98f6750b2377/s8landscape.PNG

@media screen and (min-width: 740px) and (max-width: 741px) {
  #secondary-nav-bar-location-1 {
    width: 100% !important;
    right: 0 !important;
  }
  #sec-nav-text-area-1 h4 {
    text-align: center !important;
  }
}

This seems that's working for responsive mode of Firefox (https://monosnap.com/file/6itreCh8XJlxlteC6D66XzZj4kXQej#), not in my S8 device though.

  • Ari

    Hey Farzan Ahmed,

    I have overridden Dimitris CSS with the following CSS in the Dashboar->Appearance->Customize->Additional CSS.

    @media screen and (max-width: 959px) {
    	#secondary-nav-bar-location-1 {
    		margin-bottom: 30px;
    		padding-left: 20px !important;
    		padding-right: 20px !important;
    		-webkit-box-sizing: border-box;
    		   -moz-box-sizing: border-box;
    			    box-sizing: border-box
    	}
    	#sec-nav-text-area-1 {
    		text-align: center !important;
    	}
    	#sec-nav-text-area-1 h4 {
    		text-align: center !important;
    	}
    }

    Now it looks fine from my end, let me know if it's ok from your end.

    Regards, Ari

  • Ari

    Hey Farzan Ahmed,

    I have centralized the text, and also reduced the top & bottom space.
    It is possible to reduce more space from top & bottom, if you suggest me to do it, I'll do it.

    Now the updated code looks like:

    @media screen and (max-width: 959px) {
    	#secondary-nav-bar-location-3 {
    		padding-top: 20px;
    	}
    	#secondary-nav-bar-location-1 {
    		margin-bottom: 15px;
    		right: 0 !important;
    	    padding-left: 20px !important;
    	    padding-right: 20px !important;
    	    -webkit-box-sizing: border-box;
    	       -moz-box-sizing: border-box;
    	            box-sizing: border-box
    	}
    	#sec-nav-text-area-1 {
    	    text-align: center !important;
    	}
    	#sec-nav-text-area-1 h4 {
    	    text-align: center !important;
    	}
    }

    About the: "call us on", and then the logo and then "ind tailored"
    I think it will not be better, because in this way the text will have lower space. in this situation text will go in multi line. that's why it's not better.

    The current layout is looks nice & clean in mobile devices I hope.

    Please check it & let me know what what do you think?

    Regards, Ari

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.