Jump to content
Lexxus

Header messed up on mobile

Recommended Posts

Lexxus    0
Lexxus

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
mackenzie    12
mackenzie

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)


Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites
Lexxus    0
Lexxus

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
James B    436
James B

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%;}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Lexxus    0
Lexxus

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Lexxus    0
Lexxus

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
Danny    1,327
Danny

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/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Lexxus    0
Lexxus

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Lexxus    0
Lexxus

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
Rob    547
Rob

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?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • dwpoyner
      By dwpoyner+
      Not sure exactly what is causing the issue. For some reason, why you view my site on mobile, the menu does not show up. It will pop up, but it is black. You can check it out here: http://dev.caryfbc.org. I'm also attaching a screenshot where I shrunk my browser down. Any suggestions?

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
      Thanks
      Michael 
    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • poseyg
      By poseyg+
      This just happened to a site I'm working on. When I decrease width of browser to check for responsiveness...the pagelines content section is not responding???
×