Archived

This topic is now archived and is closed to further replies.

  • 0

Header messed up on mobile


Question

Posted · Report post

Hi,

 

I have noticed that the mobile view of my site is not displaying correctly.

 

I have a blog title then language switcher and social icons all displayed in one line on the web: http://wordofmouthlabs.com

 

But on mobile the header behaves differently and site title becomes overlapped with the language switcher and social icons.. It would be nice to display first the logo + title in one line, then the switcher and icons right under.

 

I have tried tweaking the code with Browser Specific CSS plugin, but could not figure it out. :(

 

Can you advise the solution please?

Share this post


Link to post
Share on other sites

11 answers to this question

Posted · Report post

Are you using responsive or static layout for your site and is the mobile optimized view disabled or enabled? (Dashboard > Pagelines > Site Options > Layout Editor)

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Mackenzie,

 

Thanks for getting back!

 

I am using responsive layout and mobile view is enabled.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

 

I would imagine this is happening as the selector isn't responsive so the menu doesn't resize when it shrinks and moves along with the mobile layouts positioning.

 

If you have the browser specific plugin you can try using some css like the below to position it on the mobile screen better. You can do the same for the social icons position, change the figures to suit etc

 

body.mobile #lang_sel a.lang_sel_sel {padding-left:50px;} 
to position the container and if you want to resize the box slightly something like
body.mobile #lang_sel a.lang_sel_sel { width: 50%;}

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you James,

 

Unfortunately the positioning worked on one screen, but appeared wrong on another (I just flipped from portrait to landscape mode).. So this does not solve it....

Share this post


Link to post
Share on other sites

Posted · Report post

Ah i see, ok in that case I'd suggest looking into using the @media prefix so you can style the css depending on whether the device is landscape/portrait. An example of this can be found at - http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

 

An example for one using @media would be as below

@media (max-width:768px) {
#lang_sel a.lang_sel_sel { padding-left:50px; 
and following css you want to add can go in here;}}

Otherwise you could enter the login widget into another location which displays better on the mobile and use browser specific css to hide it on the desktop, but show it on the mobile display (and visa versa).

Share this post


Link to post
Share on other sites

Posted · Report post

Ok I understand the idea of playing with screen sizes .. But currently I can't get the initial problem fixed..

 

If I move the language switcher lower, it appears under my menu.. (I style it with margin-left, margin-top)

 

Plus, the site title is positioned wrongly, not in one line with the logo (couldn't get it higher and/or reduce the font size) and social icons also are not displayed correctly.

 

I am trying a bunch of styles but none of them work. :( oof, sorry I'm not that strong in CSS.

 

Appreciate your assistance!

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

The issue is caused by your own custom code which adds the language selector, if you remove this selector, your header/branding area will respond perfectly. We are unable to provide custom CSS support for user created code. To resolve your issue, you will most likely need to use either the Browser specific CSS plugin like James recommended or use @media queries to reposition the selector.

 

If you're not comfortable with CSS, the best course of action would be to contact one of our Pros. - http://www.pagelines.com/pros/

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Danny,

 

Thank you, I know that the issue is caused by language selector. I am using the Browser Specific CSS plugin without James' recommendation as you can notice, only could not figure out the code to display the selector right under the title (without margin/padding positioning but with some kind of display/inline code).

 

Sorry I am just learning CSS, I thought this was not a difficult issue for some of you to solve..

 

Appreciate your attention.

Share this post


Link to post
Share on other sites

Posted · Report post

Sveiki!

 

Unfortunately, we are sometimes limited in dealing with custom coded solutions, so many apologies.

 

I've just checked your site on my phone and can see the problem. 

 

Have you considered replacing the drop down list with some buttons? This might be easier for you, and work better on multiple devices.

Share this post


Link to post
Share on other sites

Posted · Report post

Sveiki Rob! :)

 

No, I have not yet considered replacing the dropdown with buttons. This is a WPML solution, will look into it, but I guess it would bring us back to the square one: how to place it under the title....

Share this post


Link to post
Share on other sites

Posted · Report post

By any chance did you use the Action Map Plugin to find the applicable hook?

 

How did you place the code for the drop down list? Did you edit the pagelines-customize/functions.php or, use the Hooker Plugin, perhaps?

Share this post


Link to post
Share on other sites