Jump to content


Photo
- - - - -

Header messed up on mobile

header mobile css

  • Please log in to reply
11 replies to this topic

#1 Lexxus

Lexxus

    Member

  • Members
  • 13 posts
  • Country: Country Flag

Posted 12 April 2013 - 05:35 PM

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:

Please Login or Register to see this Hidden Content

 

But

Please Login or Register to see this Hidden Content

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?



#2 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 12 April 2013 - 06:01 PM

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)



#3 Lexxus

Lexxus

    Member

  • Members
  • 13 posts
  • Country: Country Flag

Posted 12 April 2013 - 09:26 PM

Hi Mackenzie,

 

Thanks for getting back!

 

I am using responsive layout and mobile view is enabled.



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 April 2013 - 10:04 PM

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

 

Please Login or Register to see this Hidden Content

to position the container and if you want to resize the box slightly something like

Please Login or Register to see this Hidden Content



#5 Lexxus

Lexxus

    Member

  • Members
  • 13 posts
  • Country: Country Flag

Posted 12 April 2013 - 11:23 PM

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....



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 April 2013 - 11:47 PM

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 -

Please Login or Register to see this Hidden Content

 

An example for one using @media would be as below

Please Login or Register to see this Hidden Content

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).



#7 Lexxus

Lexxus

    Member

  • Members
  • 13 posts
  • Country: Country Flag

Posted 13 April 2013 - 05:25 PM

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

Please Login or Register to see this Hidden Content

, 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!



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 17977 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 14 April 2013 - 09:02 AM

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. -

Please Login or Register to see this Hidden Content



#9 Lexxus

Lexxus

    Member

  • Members
  • 13 posts
  • Country: Country Flag

Posted 14 April 2013 - 05:56 PM

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.



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 14 April 2013 - 06:09 PM

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.



#11 Lexxus

Lexxus

    Member

  • Members
  • 13 posts
  • Country: Country Flag

Posted 14 April 2013 - 06:55 PM

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....



#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 14 April 2013 - 06:58 PM

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?







Also tagged with one or more of these keywords: header, mobile, css