Jump to content

Archived

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

mikeo9043

Making mobile same as desktop

Recommended Posts

mikeo9043    0
mikeo9043

I know DMS is all about being responsive but is there anyway to make the mobile version just like the desktop version? I have some edits on one of my sites that doesn't look good on mobile.

 

Thanks,

 

Mike

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hello Mike,

 

There are ways to make the site look the same.  One is using the Browser Specific CSS plugin or directly.  Alternatively, if you have Framework installed on the website, but don't have it activated, you can temporarily activate it, and check the option to disable mobile view.  This may work, but it may also cause other problems with your site.  You're free to test it, then re-activate DMS.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
mikeo9043    0
mikeo9043

Hello Mike,

 

There are ways to make the site look the same.  One is using the Browser Specific CSS plugin or directly.  Alternatively, if you have Framework installed on the website, but don't have it activated, you can temporarily activate it, and check the option to disable mobile view.  This may work, but it may also cause other problems with your site.  You're free to test it, then re-activate DMS.

 

I am not fully understanding what you are saying. The two problems I have with the mobile version is; 

 

1. I have a banner that is a background image for a section that doesn't fit right on the mobile version 

 

2. The navigation doesn't show all navigation links on the mobile. 

Share this post


Link to post
Share on other sites
Rob    547
Rob

What's the website Mike? I'll look at it.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
mikeo9043    0
mikeo9043

What's the website Mike? I'll look at it.

 

I have PM'd you.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi Mike,

 

I've viewed your site on an Android device and indeed you do have some issues.

1.  The width of your header is causing the problem with the mobile view.  You're using a background image, with an empty space as a place holder to maintain the appearance you desire on computers.  Unfortunately, this is not proficient design for mobile views, whether it's an old view (non-responsive) or contemporary (responsive).  To fix this, you'd isolate the logo part of the background and turn it into a smaller image and I'd recommend making the green surrounding it transparent.  Assign a class to the header area, then include CSS for that class to make the entire header the green background color and set the min-height to 236px.  Add a two column section to the header.  In the left column, resized to 4 columns, add a Media Area and upload the logo.  In the right of the two columns, set to 8 columns, add a text box and create a new class for it too.  There, you can type in all caps, the brand name in your existing logo.  Set the CSS for that class to size, color and set the font you wish.  If you need more font choices, you can get the PageLines GoogleFonts Plugin, which will add over 650 choices. This will let you have fully responsive design.

 

2.  Your menu in the site is the Simple Nav, as visible on a computer.  In a mobile view, the site is selecting the Secondary Menu selected in Dashboard > Appearance > Menus.  All you need to do is use the options to select the proper menu in that location and where it says "Manage Locations".  You can also use DMS settings at Global Options > Navbar to deselect the Secondary Menu for mobile view.

 

Now these will not make the site look the same on a mobile device as they do on a computer.  We don't offer an option to disable mobile view in DMS.  The only way I know of to do that is to go into Framework (activated as your theme) and check Disable Mobile View from Framework's options.  I know version 1.0.3 of DMS may have disabled the connection between DMS and Framework, but it might still work. Then, you'd reactivate DMS.  Personally, I think that if you made the changes above, your site would look absolutely amazing in a mobile device.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
mikeo9043    0
mikeo9043

I made the two columns and also tried just making one column and resizing both media boxes but for some reason it keeps enlarging my logo more then the actual size.

 

EDIT: I figured that problem out. but now I need the two columns to come closer together. How can I accomplish this?

 

Thanks!

Share this post


Link to post
Share on other sites
Rob    547
Rob

Mike, each column in the 2 column section has a number associated with it, when you hover over it.  I think you may have the branding logo set to 4 as I pointed out earlier.  Between the two columns, the total value should be 12.  So, if the left column were 3, for example, make the right one 9.  You can play with these numbers, as long as you keep the value 12 as the total between them.  Also, we can also align the image to the right side of that media container.  There may be settings for that, so before I start giving you CSS, let's check the settings. Look for the image alignment option. Make it right aligned.

 

For the right side, this code may be of assistance:

#header .masthead .masthead-title {

    font-size: 96px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 18px;
}

#header .masthead {

    margin-bottom: 0;
    position: relative;
}

#header .pl-area .pl-section .pl-section > .pl-section-pad {

    margin-bottom: 0;
    padding: 8px;
}
 
Add the code above to Custom Code after you adjust your columns.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

  • 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?

    • 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.
    • 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???
    • yemoonyah
      By yemoonyah+
      While building my website, I set a padding of 5%, 25%, 5%, 25% so the text on the pages is not too wide.
      However, it looks crappy on mobile.
      How do I get the same effect and still have it look good on mobile?
      Example: http://yemoonyah.com/quiz
      Thanks
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      can I limit the overall of MegaNav on mobile? When I look at michaelkummer.com on a mobile device, the menu takes up more than a third of the screen space. Using CSS to limit max-height doesn't seem to work. Is there another/better way to reduce the overall height to maybe 10% of the screen available?
      Thanks
      Michael
       
×